Knäppercher
Benotzt Bootstrap seng personaliséiert Knäppchenstiler fir Aktiounen a Formen, Dialogen a méi mat Ënnerstëtzung fir verschidde Gréissten, Staaten a méi.
Beispiller
Bootstrap enthält verschidde virdefinéiert Knäppercher, jidderee servéiert säin eegene semanteschen Zweck, mat e puer Extrae fir méi Kontroll geworf.
<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>
Bedeitung vun Hëllefstechnologien
D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-only
Klass.
Textverpackung auszeschalten
Wann Dir net wëllt datt de Knäppchen Text wéckelt, kënnt Dir d' .text-nowrap
Klass op de Knäppchen addéieren. A Sass kënnt Dir setzen $btn-white-space: nowrap
fir Textverpackung fir all Knäppchen auszeschalten.
Button Tags
D' .btn
Klassen sinn entwéckelt fir mam <button>
Element ze benotzen. Wéi och ëmmer, Dir kënnt dës Klassen och op Elementer benotzen <a>
( <input>
obwuel e puer Browser eng liicht aner Rendering applizéiere kënnen).
Wann Dir Knäppercher op <a>
Elementer benotzt, déi benotzt gi fir In-page Funktionalitéit auszeléisen (wéi Zesummebroch Inhalt), anstatt op nei Säiten oder Sektiounen op der aktueller Säit ze verlinken, sollten dës Linken e role="button"
ginn fir hiren Zweck an Assistenztechnologien wéi z. Écran Lieser.
<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">
Outline Knäppchen
Braucht Dir e Knäppchen, awer net déi hefteg Hannergrondfaarwen déi se bréngen? Ersetzen d'Standardmodifikateur Klassen mat .btn-outline-*
deenen fir all Hannergrondbiller a Faarwen op all Knäppchen ze läschen.
<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>
Gréissten
Loscht op méi grouss oder méi kleng Knäppercher? Addéieren .btn-lg
oder .btn-sm
fir zousätzlech Gréissten.
<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>
Erstellt Blockniveau Knäppercher - déi déi d'ganz Breet vun engem Elterendeel spanen - andeems Dir .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>
Aktiv Staat
Knäppercher erschéngen gedréckt wann aktiv mat engem däischterem Hannergrond, méi däischter Grenz, a wann Schatten aktivéiert sinn, en inset Schatten. Et ass net néideg eng Klass op <button>
s ze addéieren well se eng Pseudo-Klass benotzen . Wéi och ëmmer, Dir kënnt ëmmer nach datselwecht aktive Erscheinungsbild zwéngen mat .active
(an d' aria-pressed=“true”
Attributer enthalen) sollt Dir de Staat programmatesch replizéieren.
<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>
Behënnert Staat
Maacht Knäppercher inaktiv kucken andeems Dir de disabled
booleschen Attribut un all <button>
Element bäidréit.
<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>
Behënnerte Knäppercher mat dem <a>
Element behuelen e bëssen anescht:
<a>
s Ënnerstëtzung net dendisabled
Attribut, also musst Dir d'.disabled
Klass addéieren fir se visuell behënnert ze maachen.- E puer zukünfteg frëndlech Stiler sinn abegraff fir alles
pointer-events
op Ankerknäppchen auszeschalten. A Browser déi dës Eegeschafte ënnerstëtzen, gesitt Dir den behënnerte Cursor guer net. - Behënnerte Knäppercher
<a>
sollen denaria-disabled="true"
Attribut enthalen fir den Zoustand vum Element un Hëllefstechnologien unzeginn. - Behënnert Knäppercher benotzt
<a>
sollenhref
den Attribut net enthalen .
<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>
Link Funktionalitéit Opgepasst
Fir Fäll ze decken wou Dir den href
Attribut op engem behënnerte Link behalen muss, .disabled
benotzt d'Klass pointer-events: none
fir ze probéieren d'Linkfunktionalitéit vun <a>
s auszeschalten. Bedenkt datt dës CSS Eegeschafte nach net standardiséiert ass fir HTML, awer all modern Browser ënnerstëtzen et. Zousätzlech, och a Browser déi ënnerstëtzen pointer-events: none
, bleift d'Tastaturnavigatioun net beaflosst, dat heescht datt gesiende Tastaturbenotzer a Benotzer vun Hëllefstechnologien nach ëmmer fäeg sinn dës Linken ze aktivéieren. Also fir sécher ze sinn, zousätzlech zu aria-disabled="true"
, enthält och en tabindex="-1"
Attribut op dëse Linken fir ze verhënneren datt se Tastaturfokus kréien, a benotzt personaliséiert JavaScript fir hir Funktionalitéit komplett auszeschalten.
<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>
Knäppchen Plugin
Maacht méi mat Knäppercher. Kontroll Knäppchen Staaten oder Gruppe vu Knäppercher erstellen fir méi Komponenten wéi Toolbaren.
Toggle Staaten
Füügt fir den Zoustand data-toggle="button"
vun engem Knäppchen ze active
wiesselen. Wann Dir e Knäpp pre-toggelt, musst Dir d' .active
Klass manuell an aria-pressed="true"
d' <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Checkbox a Radio Knäppercher
Bootstrap .button
Stiler kënnen op aner Elementer applizéiert ginn, sou wéi <label>
s, fir d'Checkbox oder d'Radiostil-Knäppchen ze wiesselen. Füügt data-toggle="buttons"
zu engem .btn-group
enthalen déi geännert Knäppercher fir hiert Togglingverhalen iwwer JavaScript z'erméiglechen a füügt .btn-group-toggle
d' <input>
S an Äre Knäpper ze styléieren. Bedenkt datt Dir eenzel Input-powered Knäppercher oder Gruppe vun hinnen erstellen kënnt.
De gepréiften Zoustand fir dës Knäppercher gëtt nëmmen iwwer click
Event op de Knäppchen aktualiséiert. Wann Dir eng aner Methode benotzt fir den Input ze aktualiséieren - zB mat <input type="reset">
oder andeems Dir d' checked
Eegeschafte vum Input manuell applizéiert - musst Dir .active
op den <label>
manuell wiesselen.
Notéiert datt d'virgecheckte Knäpper erfuerderen datt Dir d' .active
Klass manuell an d'Input bäidréit <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>
Methoden
Method | Beschreiwung |
---|---|
$().button('toggle') |
Wiesselt Push Staat. Gëtt de Knäppchen d'Erscheinung datt et aktivéiert gouf. |
$().button('dispose') |
Zerstéiert en Element Knäppchen. |