Bootstrap Buttons

Bootstrap 7 tane buton sitili sunar. Bu sitilleri elde etmek için kullanılan class lar aşağıdaki tabloda görülmektedir.

Button classları kullanılırken ilk olarak temel .btn classı kullanılmalıdır.

Şekil *.1: Bootstrap button classlarının kullanımı

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Button classları <a>, <button> ve <input type=”submit” ..> , <input type=”button” …..> kontrollerinde Şekil *.2’te belirtildiği gibi kullanılabilir.

Şekil *.2: Button classlarının belirtilen kontrollerde kullanımı

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Button Boyutları

 

Bootstrap 4 farklı button boyutu sunar. Bunlar Large, Medium, Small ve Xsmall ‘dur.

Tablo *.2’de bu boyutlandırmalar için kullanılacak classlar yer almaktadır. Şekil *.4’te button boyutlandırma classlarının kullanımı görülmektedir.

Şekil *.3: Button boyutlandırma classlarının kullanımı

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Medium</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Block Level Buttons

İçinde bulunduğu elementin genişliğe kadar genişliğe sahip ve bulunduğu satırı kaplayan blok seviye butonlar oluşturmak için .btn-block classı kullanılır. İstenirse .btn-block classı ile birlikte buton boyutlandırma classları da kullanılabilir.

Şekil *.4: .btn-block classının butonlarda kullanımı

<button type="button" class="btn btn-primary btn-block">Button 1</button>

Şekil *.5: .btn-block classının kullanımı ile ortaya çıkan sonuç

 

8

Active/Disabled Buttons

Bootstrap ile buttonları aktif (yani tıklanmış görünümlü) veya disabled(tıklanamayan) buttonlar haline getirmek mümkündür. Aşağıdaki şekillerde bu işlemler için .active ve .disabled classlarının nasıl kullanıldığı gösterilmiştir.

Şekil *.6: .active ve .disabled classlarının kullanımı

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

 

Şekil *.7: .active ve .disabled classlarının kullanımı ile ortaya çıkan sonuç

9

 

Ramazan Bıyıkcı

Merhaba! Ben Ramazan. Medya Planlama ve Dijital Pazarlama Uzmanıyım. Çağımız medya çağı, hayatımızın bir çok alanı online olmuş durumda. Bu süreçte bende marka ve kurumların dijital ihtiyaçlarını karşılayacak şekilde planlamalar yapmaktayım. Bir çok markanın dijital pazarlama alanındaki online faaliyetlerini sürdürmekteyim. Farklı uzmanlık alanlarında çalışarak halen kendimi sürekli yenileyerek geliştirmekteyim.

Yorum Yap

Ramazan Bıyıkcı

"Merhaba! Ben Ramazan. Medya Planlama ve Dijital Pazarlama Uzmanıyım. Çağımız medya çağı, hayatımızın bir çok alanı online olmuş durumda. Bu süreçte bende markaların dijital ihtiyaçlarını karşılayacak şekilde planlamalar yaparak ve bir çok markanın dijital pazarlama alanındaki faaliyetlerini sürdürmekteyim. Farklı görevler ve farklı uzmanlık alanlarında çalışarak halen kendimi sürekli yenileyerek geliştirmekteyim."