Bootstrap ile Buton Kullanımı

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?