BootStrap ile Buton Oluşturma
Bootstrap bizlere farklı buton stilleri sunmaktadır. Bu stilleri a, button, input gibi etiketlere uygulayabiliriz.
Yukarıda BootStrap 3'ün bize sunduğu buton sınıflarını görmektesiniz. Alt tarafta ise Bootstrap 4 butonlarını görüyorsunuz.
Gördüğünüz gibi 3 ve 4 versiyonları arasında aynı isme sahip stillerde bile bazı farklar bulunmakta.
Buton oluşturmak için .btn seçicisi (class) kullanılır. Örneğin;
<a href="#" class="btn" >Buton 1</a>
.btn seçicisi ile beraber default, primary, success, info, warning, danger, link seçicileri kullanarak butonun görünümünü yukarıdakilerden biri gibi yapabilirsiniz. BootStrap4 kullanıyorsanız light, dark ve secondary seçicileri de kullanabilirsiniz.
<a href="#" class="btn btn-danger" >Buton 1</a>
Farklı buton boyutları için btn-lg, btn-md, btn-sm ve btn-xs seçicileri kullanılabilir.
<button class="btn btn-success btn-lg" type="button">btn-lg</button>
<button class="btn btn-success btn-md" type="button">btn-md</button>
<button class="btn btn-success btn-sm" type="button">btn-sm</button>
<button class="btn btn-success btn-xs" type="button">btn-xs</button>
.btn-block seçicisi, buton genişliğinin %100 olmasını sağlar.
.active seçicisi butonun basıldığı andaki haliyle görünmesini sağlar. .disabled seçicisi ise butonu pasif hale getirir.
BootStrap 4'te tüm bunlara ek olarak dolgusuz, sadece kenarlıklı (outline) butonlar kullanılabilir. Üzerine gelindiğinde ise dolgu rengi görünmektedir:
Gördüğünüz gibi buton konusunda uygulaması kolay pek çok alternatif bulunmakta.
Kendi css kodlarımızla bu butonların görünümlerinde değişiklikler yapabileceğimizi unutmayınız.
Konu örnekleri kısmında, bootstrap butonlarına kendi stillerimizi uygulama ile ilgili bir örnek yer almaktadır.
bootstrap butonlar, bootstrap, buton örnekleri, button, buton kullanımı, butonların kullanımı, buton oluşturma, buton çeşitleri, butonları kişiselleştirme, stil uygulama
KONU İLE İLGİLİ ÖRNEKLER
|
BootStrap Butonlarına Kendi Stillerimizi Uygulama
|
Kendin Dene
|
Yukarıda bazı bootstrap buton seçicileri style kısmında yazılan kodlar ile değiştirilmiştir. Ayrıca kendi oluşturduğumuz bir class (benimButonum) sondaki butona uygulanmıştır.
Kendin dene butonuna tıklayarak kodları görebilir, değiştirebilir ve sonucu inceleyebilirsin.
16438 kez okundu.