Gumbi
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-only
razredom.
Onemogoči prelom besedila
Če ne želite, da se besedilo gumba prelomi, lahko dodate .text-nowrap
razred gumbu. V Sassu lahko nastavite, $btn-white-space: nowrap
da onemogočite prelom besedila za vsak gumb.
Oznake gumbov
Razredi .btn
so 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.
<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>
Velikosti
Ste všeč večji ali manjši gumbi? Dodajte .btn-lg
ali .btn-sm
za 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 disabled
logič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 podpirajodisabled
atributa, zato morate dodati.disabled
razred, da bo vizualno videti onemogočen.- Vključeni so nekateri slogi, prijazni do prihodnosti, da onemogočite vse
pointer-events
sidrne gumbe. V brskalnikih, ki podpirajo to lastnost, onemogočenega kazalca sploh ne boste videli. - Uporaba onemogočenih gumbov
<a>
mora vključevatiaria-disabled="true"
atribut za označevanje stanja elementa za podporne tehnologije. - Onemogočeni gumbi z uporabo
<a>
ne smejo vključevatihref
atributa.
<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>
Opozorilo glede funkcionalnosti povezave
Za pokrivanje primerov, ko morate obdržati href
atribut na onemogočeni povezavi, .disabled
razred uporablja pointer-events: none
za 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 .active
razred 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 .button
mogoč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-group
ki vsebuje te spremenjene gumbe, da omogočite njihovo preklopno vedenje prek JavaScripta, in dodajte .btn-group-toggle
slog <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 click
dogodka na gumbu. Če uporabljate drugo metodo za posodobitev vnosa – npr. z <input type="reset">
ali z ročno uporabo checked
lastnosti vnosa – boste morali ročno .active
vklopiti <label>
.
Upoštevajte, da vnaprej označeni gumbi zahtevajo, da ročno dodate .active
razred 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. |