Önyükleme Düğmeleri
Düğme Stilleri
Bootstrap, farklı düğme stilleri sağlar:
Yukarıdaki düğme stillerini elde etmek için Bootstrap aşağıdaki sınıflara sahiptir:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Aşağıdaki örnek, farklı düğme stillerinin kodunu gösterir:
Örnek
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
Düğme sınıfları bir <a>, <button>, veya
<input>öğesinde kullanılabilir:
Örnek
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Bağlantının href niteliğine neden # koyuyoruz?
Link verecek bir sayfamız olmadığı ve "404" mesajı almak istemediğimiz için örneklerimizde link olarak # koyduk. Belirli bir sayfanın gerçek URL'si olmalıdır.
Düğme Boyutları
Bootstrap dört düğme boyutu sağlar:
Farklı boyutları tanımlayan sınıflar şunlardır:
.btn-lg.btn-sm.btn-xs
Aşağıdaki örnek, farklı düğme boyutları için kodu gösterir:
Örnek
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Blok Seviyesi Düğmeleri
Bir blok seviyesi düğmesi, ana öğenin tüm genişliğini kapsar.
.btn-blockBlok düzeyinde bir düğme oluşturmak için sınıf ekleyin :
Örnek
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Aktif/Devre Dışı Düğmeler
Bir düğme, etkin (basılı gibi görünüyor) veya devre dışı (tıklanamaz) bir duruma ayarlanabilir:
Sınıf .active, bir düğmenin basılı görünmesini sağlar ve sınıf
.disabled
bir düğmeyi tıklanamaz hale getirir:
Örnek
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Tam Önyükleme Düğmesi Referansı
Tüm düğme sınıflarının eksiksiz bir referansı için, eksiksiz Bootstrap Düğme Referansımıza gidin .