Knoppies
Gebruik Bootstrap se pasgemaakte knoppiestyle vir aksies in vorms, dialoogvensters en meer met ondersteuning vir verskeie groottes, toestande en meer.
Voorbeelde
Bootstrap bevat verskeie voorafbepaalde knoppiestyle, wat elkeen sy eie semantiese doel dien, met 'n paar ekstras ingegooi vir meer beheer.
<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>
Dra betekenis aan ondersteunende tegnologieë oor
Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-only
klas versteek is.
Deaktiveer teksomvou
As jy nie wil hê dat die knoppieteks moet omvou nie, kan jy die .text-nowrap
klas by die knoppie voeg. In Sass kan jy instel $btn-white-space: nowrap
om teksomvou vir elke knoppie te deaktiveer.
Knoppie-etikette
Die .btn
klasse is ontwerp om saam met die <button>
element gebruik te word. U kan egter ook hierdie klasse op <a>
of <input>
elemente gebruik (hoewel sommige blaaiers 'n effens ander weergawe kan toepas).
Wanneer knoppieklasse gebruik word op <a>
elemente wat gebruik word om in-bladsy-funksionaliteit te aktiveer (soos ineenstortende inhoud), eerder as om na nuwe bladsye of afdelings binne die huidige bladsy te skakel, moet hierdie skakels 'n gegee role="button"
word om hul doel toepaslik oor te dra aan ondersteunende tegnologieë soos bv. skermlesers.
<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">
Omlyn knoppies
Het jy 'n knoppie nodig, maar nie die stewige agtergrondkleure wat hulle bring nie? Vervang die verstek wysiger klasse met .btn-outline-*
dié om alle agtergrond beelde en kleure op enige knoppie te verwyder.
<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>
Groottes
Lus vir groter of kleiner knoppies? Voeg by .btn-lg
of .btn-sm
vir addisionele groottes.
<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>
Skep blokvlakknoppies—dié wat oor die volle breedte van 'n ouer strek—deur by te voeg .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>
Aktiewe toestand
Knoppies sal gedruk verskyn wanneer dit aktief is met 'n donkerder agtergrond, donkerder rand, en, wanneer skaduwees geaktiveer is, 'n ingeboude skaduwee. Dit is nie nodig om 'n klas by <button>
s te voeg nie, aangesien hulle 'n pseudo-klas gebruik . Jy kan egter steeds dieselfde aktiewe voorkoms afdwing met .active
(en die aria-pressed=“true”
kenmerk insluit) indien jy die toestand programmaties moet herhaal.
<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>
Gestremde toestand
Laat knoppies onaktief lyk deur die disabled
Boolese kenmerk by enige <button>
element te voeg.
<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>
Gedeaktiveerde knoppies wat die <a>
element gebruik, tree 'n bietjie anders op:
<a>
s ondersteun nie diedisabled
kenmerk nie, so jy moet die.disabled
klas byvoeg om dit visueel gestremd te laat lyk.- Sommige toekomsvriendelike style is ingesluit om alles
pointer-events
op ankerknoppies te deaktiveer. In blaaiers wat daardie eiendom ondersteun, sal jy glad nie die gedeaktiveerde wyser sien nie. - Gedeaktiveerde knoppies wat gebruik
<a>
word, moet diearia-disabled="true"
kenmerk insluit om die toestand van die element aan ondersteunende tegnologieë aan te dui. - Gedeaktiveerde knoppies wat gebruik
<a>
word, moet nie diehref
kenmerk insluit nie.
<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>
Skakel funksionaliteit waarskuwing
Om gevalle te dek waar jy die href
kenmerk op 'n gedeaktiveerde skakel moet hou, .disabled
gebruik die klas pointer-events: none
om die skakelfunksionaliteit van <a>
s te probeer deaktiveer. Let daarop dat hierdie CSS-eienskap nog nie vir HTML gestandaardiseer is nie, maar alle moderne blaaiers ondersteun dit. Boonop, selfs in blaaiers wat wel ondersteun pointer-events: none
, bly sleutelbordnavigasie onaangeraak, wat beteken dat siende sleutelbordgebruikers en gebruikers van ondersteunende tegnologie steeds hierdie skakels sal kan aktiveer. Om veilig te wees, sluit, benewens aria-disabled="true"
, ook 'n tabindex="-1"
kenmerk op hierdie skakels in om te verhoed dat hulle sleutelbordfokus ontvang, en gebruik pasgemaakte JavaScript om hul funksionaliteit heeltemal uit te skakel.
<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>
Knoppie-inprop
Doen meer met knoppies. Beheer knoppie state of skep groepe knoppies vir meer komponente soos nutsbalke.
Wissel state
Voeg by om 'n knoppie se toestand data-toggle="button"
te wissel . active
As jy 'n knoppie vooraf wissel, moet jy die .active
klas en aria-pressed="true"
by die <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Merkblokkie en radioknoppies
Bootstrap se .button
style kan toegepas word op ander elemente, soos <label>
s, om die merkblokkie of radiostylknoppie te wissel. Voeg data-toggle="buttons"
by 'n .btn-group
wat daardie gewysigde knoppies bevat om hul wisselgedrag via JavaScript te aktiveer en voeg by .btn-group-toggle
om die <input>
s binne jou knoppies te styl. Let daarop dat jy enkele invoer-aangedrewe knoppies of groepe daarvan kan skep.
Die gemerkte toestand vir hierdie knoppies word slegs opgedateer via click
gebeurtenis op die knoppie. As jy 'n ander metode gebruik om die invoer op te dateer—bv met <input type="reset">
of deur die invoer se checked
eienskap handmatig toe te pas—sal jy die inset .active
met die <label>
hand moet aanskakel.
Let daarop dat vooraf gemerkte knoppies vereis dat jy die .active
klas handmatig by die invoer se <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>
Metodes
Metode | Beskrywing |
---|---|
$().button('toggle') |
Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is. |
$().button('dispose') |
Vernietig 'n element se knoppie. |