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
buttonetiketi kullanılabileceği gibi
aveya
inputnesnelerine 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-blockButon 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 DisabledBootstrap4'te pasif butonların disabled(seçilemez) durumları oluşturulabilir. Bu durumlar için
buttonnesnesinde disabled parametresini kullanmak yeterlidir. Ancak
ave
inputnesnelerinde class özelliği olarak disabled vermek gerekir.
Örnek: