Düğmeler

Birden çok boyut, durum ve daha fazlasını destekleyen formlardaki, iletişim kutularındaki ve daha fazlasındaki eylemler için Bootstrap'in özel düğme stillerini kullanın.

Örnekler

Bootstrap, her biri kendi anlamsal amacına hizmet eden önceden tanımlanmış birkaç düğme stili içerir ve daha fazla kontrol için birkaç ekstra eklenir.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Metin kaydırmayı devre dışı bırak

Düğme metninin sarılmasını istemiyorsanız, .text-nowrapsınıfı düğmeye ekleyebilirsiniz. Sass'ta, her düğme için metin kaydırmayı devre dışı bırakacak şekilde ayarlayabilirsiniz $btn-white-space: nowrap.

Düğme etiketleri

Sınıflar, eleman .btnile kullanılmak üzere tasarlanmıştır . Ancak, bu sınıfları or öğelerinde <button>de kullanabilirsiniz (ancak bazı tarayıcılar biraz farklı bir işleme uygulayabilir).<a><input>

Mevcut sayfadaki yeni sayfalara veya bölümlere bağlantı vermek yerine, sayfa içi işlevselliği tetiklemek için kullanılan öğelerde (içeriği daraltmak gibi) düğme sınıfları kullanırken , bu bağlantılara amaçlarını aşağıdaki gibi yardımcı teknolojilere uygun şekilde iletmek için <a>verilmelidir . role="button"ekran okuyucular

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

Anahat düğmeleri

Bir düğmeye mi ihtiyacınız var, ancak getirdikleri iri arka plan renklerine değil mi? .btn-outline-*Herhangi bir düğmedeki tüm arka plan resimlerini ve renklerini kaldırmak için varsayılan değiştirici sınıfları değiştirin .

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Boyutlar

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? Ekle .btn-lgveya .btn-smek boyutlar için.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Ekleyerek, bir ebeveynin tüm genişliğini kapsayan blok düzeyinde düğmeler oluşturun .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

aktif durum

Daha koyu bir arka plan, daha koyu kenarlık ve gölgeler etkinleştirildiğinde, bir iç gölge ile etkin olduğunda düğmelere basılmış olarak görünecektir. Sözde sınıf kullandıkları için s öğesine bir sınıf eklemeye gerek yoktur<button> . Bununla birlikte, durumu programlı olarak çoğaltmanız gerekirse , aynı etkin görünümü yine de zorlayabilirsiniz .active(ve özniteliği dahil edebilirsiniz ).aria-pressed=“true”

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Engelli durumu

Herhangi bir öğeye disabledboolean niteliğini ekleyerek düğmelerin devre dışı görünmesini sağlayın .<button>

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Öğeyi kullanan devre dışı bırakılan düğmeler <a>biraz farklı davranır:

• <a>s özelliği desteklemiyor , bu nedenle görsel olarak devre dışı görünmesi disablediçin sınıfı eklemelisiniz ..disabled
• pointer-eventsTüm bağlantı düğmelerini devre dışı bırakmak için geleceğe yönelik bazı stiller dahil edilmiştir . Bu özelliği destekleyen tarayıcılarda, devre dışı bırakılmış imleci hiç görmezsiniz.
• Devre dışı bırakılan düğmeler , öğenin durumunu yardımcı teknolojilere belirtmek için özniteliği <a>içermelidir .aria-disabled="true"
• Devre dışı bırakılan düğmeler , özniteliği <a> içermemelidir .href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Bağlantı işlevi uyarısı

hrefÖzniteliği devre dışı bırakılmış bir bağlantıda tutmanız gereken durumları kapsamak için .disabledsınıf , s'nin pointer-events: nonebağlantı işlevini devre dışı bırakmayı denemek için kullanır. <a>Bu CSS özelliğinin henüz HTML için standartlaştırılmadığını, ancak tüm modern tarayıcıların bunu desteklediğini unutmayın. Ek olarak, destekleyen tarayıcılarda bile pointer-events: noneklavye gezintisi etkilenmeden kalır, bu da gören klavye kullanıcıları ve yardımcı teknolojilerin kullanıcılarının bu bağlantıları etkinleştirebilecekleri anlamına gelir. Güvende olmak için, ek olarak , klavye odağını almalarını önlemek için bu bağlantılara aria-disabled="true"bir öznitelik de ekleyin ve işlevlerini tamamen devre dışı bırakmak için özel JavaScript kullanın.tabindex="-1"

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Düğme eklentisi

Düğmelerle daha fazlasını yapın. Araç çubukları gibi daha fazla bileşen için düğme durumlarını kontrol edin veya düğme grupları oluşturun.

Durumları değiştir

data-toggle="button"Bir düğmenin durumunu değiştirmek için Ekle active. Bir düğmeyi önceden değiştiriyorsanız , .activesınıfı ve aria-pressed="true" .<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Onay kutusu ve radyo düğmeleri

Önyükleme stilleri, onay kutusu veya radyo stili düğme geçişi sağlamak için s .buttongibi diğer öğelere uygulanabilir . JavaScript aracılığıyla geçiş davranışlarını etkinleştirmek için bu değiştirilmiş düğmeleri içeren bir öğeye <label>ekleyin ve düğmelerinizin içindeki s'leri stilize etmek için ekleyin . Girişle çalışan tek düğmeler veya bunların grupları oluşturabileceğinizi unutmayın.data-toggle="buttons".btn-group.btn-group-toggle<input>

Bu butonlar için kontrol edilen durum sadece buton üzerindeki olay aracılığıyla güncellenirclick . Girişi güncellemek için başka bir yöntem kullanırsanız (örneğin, girişin özelliğini kullanarak veya manuel olarak <input type="reset">uygulayarak) manuel olarak checkedaçmanız gerekir..active<label>

Önceden kontrol edilmiş düğmelerin, .activesınıfı manuel olarak girdinin <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

yöntemler