Dugmad

Koristite Bootstrap-ove prilagođene stilove gumba za radnje u obrascima, dijalozima i još mnogo toga uz podršku za više veličina, stanja i još mnogo toga.

Primjeri

Bootstrap uključuje nekoliko unaprijed definiranih stilova gumba, od kojih svaki služi svojoj semantičkoj svrsi, s nekoliko dodataka za veću kontrolu.

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

Oznake dugmadi

Klase .btnsu dizajnirane da se koriste sa <button>elementom. Međutim, možete koristiti i ove klase na elementima <a>ili <input>(iako neki pretraživači mogu primijeniti malo drugačiji prikaz).

Kada koristite klase dugmadi na <a>elementima koji se koriste za pokretanje funkcionalnosti unutar stranice (kao što je sažimanje sadržaja), umjesto povezivanja na nove stranice ili odjeljke unutar trenutne stranice, ovim vezama treba dati role="button"adekvatnu funkciju da prenesu svoju svrhu pomoćnim tehnologijama kao što su čitači ekrana.

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

Dugmad obrisa

Trebate dugme, ali ne i bogate boje pozadine koje donose? Zamijenite zadane klase modifikatora .btn-outline-*onima za uklanjanje svih pozadinskih slika i boja na bilo kojem gumbu.

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

Veličine

Želite veće ili manje dugmad? Dodati .btn-lgili .btn-smza dodatne veličine.

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

Kreirajte dugmad na nivou bloka—ona koja obuhvataju punu širinu roditelja—dodavanjem .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>

Aktivno stanje

Dugmad će se pojaviti pritisnuti (s tamnijom pozadinom, tamnijim rubom i umetnutom sjenom) kada su aktivni. Nema potrebe za dodavanjem klase u <button>s jer oni koriste pseudo-klasu . Međutim, i dalje možete forsirati isti aktivni izgled sa .active(i uključiti aria-pressed="true"atribut) ako trebate programski replicirati stanje.

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

Disabled state

Neka gumbi izgledaju neaktivno dodavanjem disabledlogičkog atributa bilo kojem <button>elementu.

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

Onemogućeni gumbi koji koriste <a>element ponašaju se malo drugačije:

• <a>s ne podržavaju disabledatribut, tako da morate dodati .disabledklasu da bi izgledala kao da je ona vizuelno onemogućena.
• Neki stilovi prilagođeni budućnosti su uključeni kako biste onemogućili sve pointer-eventstipke za sidrenje. U pretraživačima koji podržavaju to svojstvo, uopće nećete vidjeti onemogućeni kursor.
• Onemogućena dugmad bi trebala uključivati aria-disabled="true"​​atribut koji ukazuje na stanje elementa pomoćnim tehnologijama.

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

Dodatak za dugme

Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.

Uključi države

Dodajte data-toggle="button"da biste promijenili stanje gumba active. Ako unaprijed uključujete dugme, morate ručno dodati .activeklasu i .aria-pressed="true"<button>

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

Polje za potvrdu i radio dugmad

Bootstrap-ovi .buttonstilovi se mogu primijeniti na druge elemente, kao što je <label>s, kako bi se omogućilo prebacivanje u okvir za potvrdu ili dugme za radio stil. Dodajte data-toggle="buttons"u a .btn-groupkoji sadrži te modificirane dugmad kako biste omogućili njihovo ponašanje pri prebacivanju putem JavaScripta i dodajte .btn-group-togglestil <input>s unutar vaših dugmadi. Imajte na umu da možete kreirati pojedinačna dugmad sa napajanjem ili grupe njih.

Provjereno stanje ovih dugmadi se ažurira samo putem clickdogađaja na gumbu. Ako koristite neki drugi metod za ažuriranje unosa – npr. sa <input type="reset">ili ručnom primjenom checkedsvojstva unosa – morat ćete ručno .activeuključiti <label>.

Imajte na umu da prethodno označena dugmad zahtijevaju od vas da ručno dodate .activeklasu u input <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>

Metode