Sizler için önceden tanımlanmış; boyut renk ve diğer özellikler. v5'in özel buton stillerini kullanın.

Örnekler

<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">Link</button>

Dış çizgi

<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

<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-md">Medium button</button>

<button type="button" class="btn btn-secondary btn-md">Medium 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>

Durumlar

Devre dışı

Herhangi bir <button> öğesine devre dışı bırakılmış niteliğini ekleyerek buton devre dışı görünmesini sağlayın. Devre dışı bırakılan düğmelerin işaretçi olayları vardır: hiçbiri uygulanmaz, vurgulu ve etkin durumların tetiklenmesi engellenir.

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

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

<a> öğesini kullanan devre dışı bırakılan butonlar farklı davranır:

• <a> disable niteliğini desteklemediğinden, görsel olarak devre dışı görünmesi için .disabled sınıfını eklemelisiniz.
• Bağlantı butonlarına tüm pointer-events devre dışı bırakmak için bazı stiller dahil edilmiştir.

Duyarlı bir tasarım için aria-disabled="true" içermesi tavsiye edilir.

Primary linkLink

<a href="#" class="btn btn-primary disabled" aria-disabled="true">Primary link</a>

<a href="#" class="btn btn-secondary disabled" aria-disabled="true">Link</a>

Aktif

Herhangi bir <button> öğesine veya <a> etiketine aktif niteliğini ekleyerek butonun aktif duruma geçmesini sağlayın.

Buton:

a tag:Primary linkLink

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

<button type="button" class="btn btn-secondary active">Button</button>

<a href="#" class="btn btn-primary active">Primary link</a>

<a href="#" class="btn btn-secondary active">Link</a>