En son web geliştirme öğreticiler
 

Bootstrap Buttons

❮ Önceki Sonraki Bölüm ❯

Düğme Stilleri

Bootstrap düğmelerinin yedi stilleri sağlamaktadır:

Yukarıdaki düğme stilleri elde etmek için, Bootstrap aşağıdaki sınıfları vardır:

  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Aşağıdaki örnekte, farklı düğme stilleri kodunu gösterir:

Örnek

<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>
Kendin dene "

Düğme sınıfları bir kullanılabilir <a> , <button> veya <input> elemanının:

Ö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">
Kendin dene "

Neden bir koyacağım # içinde href bağlantı özniteliği?

Biz bağlamak için herhangi bir sayfaya yok ve biz almak istemiyoruz yana "404" mesajı, biz koymak # bağlantı olarak. Gerçek hayatta bunun tabii gerçek bir URL olmuş olmalıdır "Search" sayfa.

Düğme Boyutları

Bootstrap dört düğme boyutları sağlamaktadır:

Farklı boyutlarda tanımlayan sınıfları şunlardır:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

Aşağıdaki örnekte, farklı düğme boyutları için kod gösterir:

Örnek

<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>
Kendin dene "

Blok Seviye Düğmeler

Bir blok seviye düğmesi üst elemanın tüm genişliği boyunca.

Sınıf ekleyin .btn-block blok seviyesi düğmesi oluşturmak için:

Örnek

<button type="button" class="btn btn-primary btn-block">Button 1</button>
Kendin dene "

Aktif / Engelli Düğmeler

Bir düğme aktif olarak ayarlanabilir (appear pressed) ya da devre dışı bırakılmış (unclickable) durum:

Sınıf .active görünen basılı bir düğme yapar ve sınıf .disabled bir düğme tıklanamayan yapar:

Örnek

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»

Komple Bootstrap Düğme Referans

Tüm düğme sınıfların tam referans için lütfen tüm gidin Bootstrap Düğme Referans .


❮ Önceki Sonraki Bölüm ❯