Bootstrap Butonlar

Hazırlayan: Nihal Kemer

Bootstrap buton sınıflarını kullanarak çok kısa sürede sade ve şık butonlar yapabiliriz. CSS kodu yazarak da istediğimiz butonları oluşturabiliriz ama zamandan kazanmak adına kesinlikle Bootstrap kullanmanızı tavsiye ederim. Bootstrap buton sınıflarını <a>, <input> veya <button> etiketleri ile kullanıyoruz. Butonları hangi amaç için kullanacaksanız ona göre seçmelisiniz. Örneğin;

Bir link button oluşturmak istiyorsanız <a> etiketini kullanabilirsiniz.
Bir submit button oluşturmak istiyorsanız <input> etiketini kullanabilirsiniz.
Normal button oluşturmak istiyorsanız <button> etiketini kullanabilirsiniz.

Bootstrap Buton Renk Sınıfları

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-light">Light</button>

Gördüğünüz gibi oluşturduğumuz Html etiketlerine birkaç sınıf yazarak hızlı bir şekilde çok güzel butonlar oluşturabiliyoruz. Dikkat ederseniz vermiş olduğumuz ikinci sınıfa göre butonların rengi değişiyor. Sizde hangisini kullanmak istiyorsanız ona uygun sınıfı seçmelisiniz.

Yine aynı şekilde Html etiketlerine bazı sınıfları yazarak butonların boyutunu değiştirebiliriz. Örneğin;

btn-sm sınıfını yazarak butonu küçültebiliriz.
btn-lg sınıfını yazarak butonu büyültebiliriz.
btn-block sınıfını yazarak butonun block element olmasını sağlayabiliriz. Yani bulunduğu satırı tamamen kaplar.

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

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

Dış Çerçeveli Butonlar

Dış Çerçeveli Buton renk sınıfları şunlardır:

btn-outline-success
btn-outline-info
btn-outline-warning
btn-outline-danger
btn-outline-primary
btn-outline-secondary
btn-outline-light
btn-outline-dark

Outline butonları da örnek üzerinde görelim. Kodlarımız şu şekilde;

<button type="button" class="btn btn-outline-primary">Primary</button>

<button type="button" class="btn btn-outline-secondary">Secondary </button>

<button type="button" class="btn btn-outline-success">Success</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-light">Light</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.

<button type="button" class="btn btn btn-primary active">Aktif</button>

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

Animasyonlu Dönen Buton

Bootstrap sınıfları ile animasyonlu loading (yükleniyor..) butonu oluşturalım.

Kodlarımız şu şekilde;

</button>

</button>

</button>

</button>

Page updated

Report abuse