Bootstrap - Düğmeler

Bu bölüm, örneklerle birlikte Bootstrap düğmesinin kullanım yaşını kapsar. Bir sınıf verilen her şey.btnyuvarlatılmış köşeleri olan gri bir düğmenin varsayılan görünümünü devralır. Bununla birlikte, Bootstrap, aşağıdaki tabloda özetlenen düğmeler için bazı seçenekler sunar -

Sr.No.	Sınıf ve Açıklama
1	btn Varsayılan / Standart düğmesi.
2	btn-primary Ekstra görsel ağırlık sağlar ve bir düğme kümesindeki birincil eylemi tanımlar.
3	btn-success Başarılı veya olumlu bir eylemi gösterir.
4	btn-info Bilgilendirici uyarı mesajları için bağlamsal düğme.
5	btn-warning Bu işlem sırasında dikkatli olunması gerektiğini belirtir.
6	btn-danger Tehlikeli veya potansiyel olarak olumsuz bir eylemi gösterir.
7	btn-link Düğme davranışını korurken bir bağlantı gibi görünmesini sağlayarak bir düğmeyi vurgulayın.

Aşağıdaki örnek, yukarıdaki tüm düğme sınıflarını gösterir -

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>

Düğme Boyutu

Aşağıdaki tablo, çeşitli boyutlarda düğmeler elde etmek için kullanılan sınıfları özetler -

Sr.No.	Sınıf ve Açıklama
1	.btn-lg Bu, düğme boyutunu büyütür.
2	.btn-sm Bu, düğme boyutunu küçültür.
3	.btn-xs Bu, düğme boyutunu çok küçük yapar.
4	.btn-block Bu, bir ebeveynin tüm genişliğine yayılan blok seviyesi düğmeleri oluşturur.

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Düğme Durumu

Bootstrap, düğmelerin durumunu etkin, devre dışı vb. Olarak değiştirmenize olanak tanıyan sınıflar sağlar ve bunların her biri aşağıdaki bölümlerde ele alınmıştır.

Aktif Durum

Etkin olduğunda, düğmeler basılı (daha koyu bir arka plan, daha koyu kenarlık ve ek gölge ile) görünecektir. Aşağıdaki tablo, düğme öğelerini ve bağlantı öğelerini etkin hale getirmek için kullanılan sınıfları özetlemektedir -

Eleman	Sınıf
Düğme öğesi	Kullanım .active etkinleştirildiğini göstermek için sınıf.
Ankraj elemanı	Kullanım .active etkinleştirildiğini göstermek için <a> düğmelerine sınıf.

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Engelli Durumu

Bir düğmeyi devre dışı bıraktığınızda, rengi% 50 oranında solacak ve renk geçişini kaybedecektir.

Aşağıdaki tablo, düğme öğesini ve bağlantı öğesini devre dışı bırakmak için kullanılan sınıfları özetlemektedir -

Eleman	Sınıf
Düğme öğesi	Ekle disabled <button> düğmelerine öznitelik .
Ankraj elemanı	Ekle disabled sınıfı <a> düğmelerine. Note- Bu sınıf, <a> ’nin işlevini değil, yalnızca görünümünü değiştirecektir. Buradaki bağlantıları devre dışı bırakmak için özel JavaScript kullanmanız gerekir.

Aşağıdaki örnek bunu göstermektedir -

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Düğme Etiketleri

<a>, <button> veya <input> öğesi ile düğme sınıflarını kullanabilirsiniz. Ancak, tarayıcılar arası tutarsızlık sorunlarını önlemek için bunu çoğunlukla <button> öğeleriyle kullanmanız önerilir.

Aşağıdaki örnek bunu göstermektedir -

<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">