Uporabite Bootstrapove sloge gumbov po meri za dejanja v obrazcih, pogovornih oknih in več s podporo za več velikosti, stanj in več.

Primeri

Bootstrap vključuje več vnaprej določenih slogov gumbov, od katerih vsak služi svojemu semantičnemu namenu, z nekaj dodatki, dodanimi za večji nadzor.

<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>
Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Onemogoči prelom besedila

Če ne želite, da se besedilo gumba prelomi, lahko dodate .text-nowraprazred gumbu. V Sassu lahko nastavite, $btn-white-space: nowrapda onemogočite prelom besedila za vsak gumb.

Oznake gumbov

Razredi .btnso zasnovani za uporabo z <button>elementom. Vendar pa lahko te razrede uporabite tudi na <a>ali <input>elementih (čeprav lahko nekateri brskalniki uporabijo nekoliko drugačno upodabljanje).

Pri uporabi razredov gumbov na <a>elementih, ki se uporabljajo za sprožitev funkcionalnosti na strani (na primer strnjevanje vsebine), namesto povezovanja na nove strani ali odseke na trenutni strani, je treba tem povezavam dodeliti, role="button"da ustrezno posredujejo svoj namen podpornim tehnologijam, kot je npr. bralniki zaslona.

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

Orisni gumbi

Potrebujete gumb, vendar ne zajetnih barv ozadja, ki jih prinašajo? Zamenjajte privzete razrede modifikatorjev s .btn-outline-*tistimi, ki odstranijo vse slike ozadja in barve na katerem koli 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>
Nekateri slogi gumbov uporabljajo razmeroma svetlo barvo ospredja in jih je treba uporabljati samo na temnem ozadju, da se zagotovi zadosten kontrast.

Velikosti

Ste všeč večji ali manjši gumbi? Dodajte .btn-lgali .btn-smza dodatne velikosti.

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

Ustvarite gumbe na ravni bloka – tiste, ki zajemajo celotno širino nadrejenega elementa – tako, da dodate .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

Gumbi bodo videti pritisnjeni, ko so aktivni s temnejšim ozadjem, temnejšim robom in, ko so omogočene sence, vstavljeno senco. S ni treba dodati razreda <button>, saj uporabljajo psevdorazred . Vendar pa lahko še vedno vsilite isti aktivni videz .active(in vključite aria-pressed=“true”atribut), če morate stanje programsko posnemati.

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

Onemogočeno stanje

Naj bodo gumbi videti neaktivni, tako da kateremu koli elementu dodate disabledlogični atribut .<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>

Onemogočeni gumbi, ki uporabljajo <a>element, se obnašajo nekoliko drugače:

  • <a>s ne podpirajo disabledatributa, zato morate dodati .disabledrazred, da bo vizualno videti onemogočen.
  • Vključeni so nekateri slogi, prijazni do prihodnosti, da onemogočite vse pointer-eventssidrne gumbe. V brskalnikih, ki podpirajo to lastnost, onemogočenega kazalca sploh ne boste videli.
  • Uporaba onemogočenih gumbov <a>mora vključevati aria-disabled="true"atribut za označevanje stanja elementa za podporne tehnologije.
  • Onemogočeni gumbi z uporabo <a> ne smejo vključevati hrefatributa.
<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>

Za pokrivanje primerov, ko morate obdržati hrefatribut na onemogočeni povezavi, .disabledrazred uporablja pointer-events: noneza poskus onemogočanja funkcije povezave <a>s. Upoštevajte, da ta lastnost CSS še ni standardizirana za HTML, vendar jo podpirajo vsi sodobni brskalniki. Poleg tega tudi v brskalnikih, ki podpirajo pointer-events: none, navigacija s tipkovnico ostane nespremenjena, kar pomeni, da bodo lahko videči uporabniki tipkovnice in uporabniki podpornih tehnologij še vedno aktivirali te povezave. Da bi bili varni, v te povezave aria-disabled="true"vključite tudi tabindex="-1"atribut, da preprečite, da bi prejele fokus s tipkovnico, in uporabite JavaScript po meri, da v celoti onemogočite njihovo delovanje.

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

Vtičnik za gumbe

Naredite več z gumbi. Nadzorni gumb navaja ali ustvari skupine gumbov za več komponent, kot so orodne vrstice.

Preklopi stanja

Dodaj data-toggle="button"za preklop stanja gumba active. Če vnaprej preklopite gumb, morate ročno dodati .activerazred in aria-pressed="true" v <button>.

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

Potrditveno polje in radijski gumbi

Sloge Bootstrapa je .buttonmogoče uporabiti za druge elemente, kot <label>je s, da zagotovite preklop potrditvenega polja ali radijskega sloga gumba. Dodajte data-toggle="buttons"v a, .btn-groupki vsebuje te spremenjene gumbe, da omogočite njihovo preklopno vedenje prek JavaScripta, in dodajte .btn-group-toggleslog <input>s znotraj svojih gumbov. Upoštevajte, da lahko ustvarite posamezne gumbe z vhodnim napajanjem ali njihove skupine.

Preverjeno stanje za te gumbe se posodobi samo prek clickdogodka na gumbu. Če uporabljate drugo metodo za posodobitev vnosa – npr. z <input type="reset">ali z ročno uporabo checkedlastnosti vnosa – boste morali ročno .activevklopiti <label>.

Upoštevajte, da vnaprej označeni gumbi zahtevajo, da ročno dodate .activerazred v vnos <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

Metoda Opis
$().button('toggle') Preklopi potisno stanje. Gumb daje videz, kot da je bil aktiviran.
$().button('dispose') Uniči gumb elementa.