
Bootstrap ile Buton Kullanımı
Bootstrap ile oldukça şık görünümlü butonlar oluşturabilirsiniz. Bootstrap kütüphanesi 7 farklı stil ile buton oluşturmanıza olanak sağlar.
.btn sınıfı altındaki stillere göz atalım;
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
bootstrap ile butonları kullanmak oldukça basittir.
Şeklide Sırasıyla btn sınıfı ile ,default,primary,success,info,warning,danger ve link stillerinde toplamda 8 adet buton ekledik.
<button type=”button” class=”btn btn-default”>Anasayfa</button> örnek komutuyla buton ekleyebilirsiniz. hangi stildeki buton ile çalışmak istiyorsanız kırmızıyla gösterdiğim alanı yukarıdaki stiller ile değiştirmeniz yeterli.
Buton sınıfları <a>,<button>,<input> etiketleriyle beraber kullanılabilir.
<a href=”#” class=”btn btn-info” role=”button”>Link Button</a> //info stil ile link buton oluşturup istediğimiz yere yönlendirebiliriz.
<button type=”button” class=”btn btn-info”>Button</button> // info tarzda buton oluşturduk
<input type=”button” class=”btn btn-info” value=”Gönder”> //Üzerinde Gönder yazan buton oluşturduk
Butonların Ölçülerini Ayarlama:
Temelde 4 farklı büyüklükte sınıflar ile buton ölçülerini ayarlayabilirsiniz. Bu sınıflar ;
.btn-lg //-large Geniş büyüklükler için
.btn-md //-midium orta büyüklükler için
.btn-sm //- small küçük büyüklükte butonlar için
.btn-xs // //xsmall Çok küçük büyüklükte butonlar oluşturmak için
<button type=”button” class=”btn btn-primary btn-lg”>Large</button>
<button type=”button” class=”btn btn-primary btn-md”>Medium</button>
<button type=”button” class=”btn btn-primary btn-sm”>Small</button>
<button type=”button” class=”btn btn-primary btn-xs”>XSmall</button>
Ekranın genişliğine göre otomatik büyüklük alan blok butonlar eklemek için .btn-block sınıfını kullanabilirsiniz.
<button type=”button” class=”btn btn-primary btn-block”>Button 1</button>
Bootstrap ile Aktif ve Pasif Butonlarda ekleyebiliyoruz.
.active sınıfı butonları görünür ve tıklanabilir kılarken, .disabled sınıfı butonları pasif hale getirir.
<button type=”button” class=”btn btn-primary active”>Aktif buton</button>
<button type=”button” class=”btn btn-primary disabled”>pasif buton</button>
Bootstrap İle Visual Studio’da Oluşturulmuş Butonlar:
1.Ders : Visual Studio ile Bootstrap Nedir? Nerede, Nasıl Kullanılır?
Facebook
Pinterest
LinkedIn
RSS