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
Ş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
Yorum gönder