Bootstrap 4 Buttons

Bootstrap 4 Butonlar (Buttons)

Bootstrap 4'te butonlar içinde çok şık görünümler bulunmaktadır. Çoğu nesneyi renklendirmek için kullanılan hazır renkler butonlarda da kullanılmaktadır. Buton oluşturmak için button etiketi kullanılabileceği gibi a veya input nesnelerine de buton özelliği eklenebilir.
Önemli Not: a ve input elemanları buton olarak kullanılacaksa role="button" özelliği eklenmesi kodumuzun daha kararlı çalışmasını sağlar. Bir nesneye buton özellikleri vermek için
btn btn-* class özelliği verilmelidir.* işaretli bölüme renk ismi gelecektir.
Örnek: btn btn-danger gibi.

Dış kenarlıklı Butonlar (Outline Butons)

Bootstrap4'te yeni bir buton stili olarak dış kenarlıklı butonlar da kullanılabilmektedir. Class özelliğine btn btn-outline btn-* değeri verilerek butona dış kenarlık stili kazandırılır. * işaretli kısıma renk ismi gelecektir.
Örnek: btn btn-outline btn-primary

Buton Büyüklükleri btn-lg btn-sm btn-block

Buton büyüklükleri için verilebilecek 3 faklı sınıf değeri vardır. Bunlar;
küçük buton için => btn-sm
büyük buton için => btn-lg
satır büyüklüğünde buton için => btn-block

Active Disabled

Bootstrap4'te pasif butonların disabled(seçilemez) durumları oluşturulabilir. Bu durumlar için button nesnesinde disabled parametresini kullanmak yeterlidir. Ancak a ve input nesnelerinde class özelliği olarak disabled vermek gerekir.
Örnek:<button type="button" class="btn btn-primary" disabled >Primary</button> <a class="btn btn-primary disabled" >Primary</a>


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın