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.

Basit Buton Primary Buton Secondary Buton Success Buton Info Buton Warning Buton Danger Buton Dark Buton Light Buton Link Buton

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.

Primary Buton Secondary Buton Success Buton Danger Buton Warning Buton Info Buton Light Buton Dark Buton

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

Küçük Normal Büyük

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.

Tam Genişlikte Buton

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.

Akfif Buton

<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.

Devre Dışı Buton

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

 

Önceki Ders: Bootstrap Uyarılar

Sonraki Ders: Bootstrap Buton Grupları