Butoane

Utilizați stilurile personalizate de butoane Bootstrap pentru acțiuni în formulare, dialoguri și multe altele, cu suport pentru mai multe dimensiuni, stări și multe altele.

Exemple

Bootstrap include mai multe stiluri de butoane predefinite, fiecare având propriul scop semantic, cu câteva elemente suplimentare pentru mai mult control.

<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>

Dezactivați împachetarea textului

Dacă nu doriți ca textul butonului să se încadreze, puteți adăuga .text-nowrapclasa la buton. În Sass, puteți seta $btn-white-space: nowrapsă dezactivați împachetarea textului pentru fiecare buton.

Etichete pentru butoane

Clasele .btnsunt concepute pentru a fi utilizate cu <button>elementul. Cu toate acestea, puteți utiliza și aceste clase pe <a>sau <input>elemente (deși unele browsere pot aplica o randare ușor diferită).

Atunci când utilizați clase de butoane pe <a>elemente care sunt utilizate pentru a declanșa funcționalitatea în pagină (cum ar fi restrângerea conținutului), mai degrabă decât să faceți linkuri către pagini noi sau secțiuni din pagina curentă, aceste linkuri ar trebui să aibă un role="button"rol pentru a transmite în mod corespunzător scopul lor tehnologiilor de asistență, cum ar fi cititoare de ecran.

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

Contur butoanele

Ai nevoie de un buton, dar nu de culorile puternice de fundal pe care le aduc? Înlocuiți clasele modificatoare implicite cu .btn-outline-*cele pentru a elimina toate imaginile și culorile de fundal de pe orice buton.

<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>

Dimensiuni

Vrei nasturi mai mari sau mai mici? Adăugați .btn-lgsau .btn-smpentru dimensiuni suplimentare.

<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>

Creați butoane la nivel de bloc - cele care se întind pe toată lățimea unui părinte - adăugând .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>

Stare activă

Butoanele vor apărea apăsate atunci când sunt active, cu un fundal mai întunecat, un chenar mai întunecat și, când umbrele sunt activate, o umbră inserată. Nu este nevoie să adăugați o clasă la <button>s, deoarece folosesc o pseudo-clasă . Cu toate acestea, puteți forța în continuare aceeași apariție activă cu .active(și includeți aria-pressed=“true”atributul) dacă trebuie să replicați starea în mod programatic.

<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>

Stare dezactivată

Faceți butoanele să pară inactive adăugând disabledatributul boolean oricărui <button>element.

<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>

Butoanele dezactivate care utilizează <a>elementul se comportă puțin diferit:

• <a>s nu acceptă disabledatributul, așa că trebuie să adăugați .disabledclasa pentru ca aceasta să pară dezactivată vizual.
• Unele stiluri prietenoase pentru viitor sunt incluse pentru a dezactiva toate pointer-eventsbutoanele de ancorare. În browserele care acceptă această proprietate, nu veți vedea deloc cursorul dezactivat.
• Utilizarea butoanelor dezactivate <a>ar trebui să includă aria-disabled="true"atributul pentru a indica starea elementului la tehnologiile de asistență.
• Utilizarea butoanelor dezactivate <a> nu ar trebui să includă hrefatributul.

<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>

Avertisment privind funcționalitatea linkului

Pentru a acoperi cazurile în care trebuie să păstrați hrefatributul pe o legătură dezactivată, .disabledclasa folosește pointer-events: nonepentru a încerca să dezactiveze funcționalitatea de legătură a lui <a>s. Rețineți că această proprietate CSS nu este încă standardizată pentru HTML, dar toate browserele moderne o acceptă. În plus, chiar și în browserele care acceptă pointer-events: none, navigarea cu tastatura rămâne neafectată, ceea ce înseamnă că utilizatorii de tastatură văzători și utilizatorii de tehnologii de asistență vor putea în continuare să activeze aceste linkuri. Deci, pentru a fi în siguranță, pe lângă aria-disabled="true", includeți și un tabindex="-1"atribut pe aceste linkuri pentru a le împiedica să primească focalizarea tastaturii și utilizați JavaScript personalizat pentru a le dezactiva complet funcționalitatea.

<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>

Plugin de buton

Faceți mai mult cu butoanele. Controlați stările butoanelor sau creați grupuri de butoane pentru mai multe componente, cum ar fi barele de instrumente.

Comutați stările

Adăugați data-toggle="button"pentru a comuta activestarea unui buton. Dacă comutați în prealabil un buton, trebuie să adăugați manual .activeclasa și aria-pressed="true" la <button>.

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

Casetă de selectare și butoane radio

Stilurile Bootstrap .buttonpot fi aplicate altor elemente, cum ar fi <label>s, pentru a oferi casete de selectare sau butoane stil radio. Adăugați data-toggle="buttons"la un .btn-groupcare conține acele butoane modificate pentru a le activa comportamentul de comutare prin JavaScript și adăugați .btn-group-togglepentru a stiliza <input>s-urile din butoanele dvs. Rețineți că puteți crea butoane unice alimentate de intrare sau grupuri ale acestora.

Starea bifată pentru aceste butoane este actualizată numai prin clickeveniment de pe buton. Dacă utilizați o altă metodă pentru a actualiza intrarea, de exemplu, cu <input type="reset">sau prin aplicarea manuală a proprietății intrării, va trebui să checkedcomutați manual..active<label>

Rețineți că butoanele pre-verificate necesită să adăugați manual .activeclasa la intrarea <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>

Metode