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

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com