Şimdi yükleniyor

Bootstrap Grup Buttonlar

Bootstrap Şekil *.9’ ta görüldüğü gibi  tek satırda button dizisi yani button grubu oluşturmaya olanak sağlar. Bu işlem için buttonları kapsayan bir <div> elementine .btn-group classı uygulanır.

Şekil *.1: Bootstrap button grubu

10

Şekil *.2: .btn-group classının kullanımı

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Button grubunu dikey görünümde elde etmek için .btn-group-vertical classı <div> elementine uygulanır.

Button grubunda justify(iki yana yaslı) görünüm elde etmek için .btn-group-justified classı kullanılır.

Şekil *.3’de <a> elementine .btn-group-justified classının uygulanması görülmektedir.

Şekil *.3: .btn-group classının kullanımı

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Button grubunu dikey görünümde elde etmek için .btn-group-vertical classı <div> elementine uygulanır.

Button grubunda justify(iki yana yaslı) görünüm elde etmek için .btn-group-justified classı kullanılır.

Şekil *.4’de <a> elementine .btn-group-justified classının uygulanması görülmektedir.

Şekil *.4: .btn-group-justified classının <a> etiketinde kullanımı

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

<button> elemetine justify özelliği kazandırırken her bir button .btn-group classına sahip bir <div> etiketi içinde kullanılır. Tüm bu buttonları kapsayan <div> ise .btn-group-justified classına sahiptir.

Şekil *.5: .btn-group-justified classının <button> elementlerinde kullanılması

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

 

Nesting Button Groups  & Dropdown Menus (İç içe geçmiş butonlar ve Aşağı Açılır Menu)

Şekil *.6’ te   dropdown menu özelliğini barındıran button grup görülmektedir.

Şekil *.6: dropdown menü & button group

11

Yorum gönder