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>

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

Etkin olduğunda, düğmeler basılı olarak (daha koyu bir arka plan, daha koyu kenarlık ve iç gölge ile) görünecektir. Sözde sınıf kullandıkları için s öğesine bir sınıf eklemeye gerek yoktur<button> . Ancak, 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.
• aria-disabled="true"Devre dışı bırakılan düğmeler , öğenin durumunu yardımcı teknolojilere belirtmek için özniteliği içermelidir .

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

yöntemler