Bootstrap Butonlar

Html dilinde kullanıcıları etkin hale getirmek için kullandığımız butonlar bootstrap'ta da bulunmaktadır. Bootstrap'ta birden fazla buton özelliği bulunmaktadır. Bu özelliklerden görseli güzel olanı veya işlevi işinize yarayanı seçerek web sitenize ekleyebilirsiniz.

Buton özellikleri için btn sınıfı kullanılmaktadır. Butonlardan istediğimiz rengi vermek için bootstrap renkler  dersinde öğrenmiş olduğunuz renkler kullanılmaktadır.

Normal Butonlar

Normal olarak küçük ve en sık kullanılan butonlardır.

Kodları:

<button type="button" class="btn">Basit Buton</button>
<button type="button" class="btn btn-primary">Primary Buton</button>
<button type="button" class="btn btn-secondary">Secondary Buton</button>
<button type="button" class="btn btn-success">Success Buton</button>
<button type="button" class="btn btn-info">Info Buton</button>
<button type="button" class="btn btn-warning">Warning Buton</button>
<button type="button" class="btn btn-danger">Danger Buton</button>
<button type="button" class="btn btn-dark">Dark Buton</button>
<button type="button" class="btn btn-light">Light Buton</button>
<button type="button" class="btn btn-link">Link Buton</button>

 

Dış Çerçeveli Butonlar

Dış çerçeveli butonlarda butona verilen renk özelliğinde dış çerçeve ve buton yazı rengini ekler ve buton içi beyaz renkte'dir.

Dış Çerçeveli Buton Kodu:

<button type="button" class="btn btn-outline-primary">Primary Buton</button>
<button type="button" class="btn btn-outline-secondary">Secondary Buton</button>
<button type="button" class="btn btn-outline-success">Success Buton</button>
<button type="button" class="btn btn-outline-danger">Danger Buton</button>
<button type="button" class="btn btn-outline-warning">Warning Buton</button>
<button type="button" class="btn btn-outline-info">Info Buton</button>
<button type="button" class="btn btn-outline-light">Light Buton</button>
<button type="button" class="btn btn-outline-dark">Dark Buton</button>

 

Buton Boyutları

Buton boyutları 3 farklı şekilde'dir. Bunlar:

  • Küçük : btn-sm
  • Varsayılan : Artı olarak hiçbir özellik eklenmez.
  • Büyük : btn-lg

Kodları:

<button type="button" class="btn btn-primary btn-sm">Küçük</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-lg">Büyük</button>

 

Tam Genişlikte Buton

Sayfadaki genişliğe uyum sağlayarak tam olarak kaplayan butondur. Bu butonu eklemek için btn-block özelliği kullanılır.

Kodları:

<button type="button" class="btn btn-info btn-block"> Tam Genişlikte Buton</button>

 

Aktif ve Devre Dışı (Pasif) Buton

Butonlar aktif olarak kullanılması için kullanılır. Fakat bazı durumlarda butonun devre dışı olmasını isteyebilirsiniz. Bootstrap'ta bu özellikler sayesinde butonu aktif veya devre dışı hale getirebiliriz.

Aktif Buton Kodu

Butonu aktif hale yani kullanılabilir hale getirmek için class'ına active özelliği yazılır.

<button type="button" class="btn btn-info active">Akfif Buton</button>

Devre Dışı (Pasif) Buton Kodu

Butonu devre dışı bırakmak için class'ına disabled özelliği eklenir.

<button type="button" class="btn btn-info disabled">Devre Dışı Buton</button>