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>

Button Tags

D' .btnKlassen 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-Säit 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 ze vermëttelen, 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-lgoder .btn-smfir 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 (mat engem däischterem Hannergrond, méi däischter Grenz, an inset Schied) wann se aktiv sinn. 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 nach ëmmer datselwecht aktive Erscheinungsbild zwéngen mat .active(an den aria-pressed="true"Attribut enthalen) wann Dir de Staat programmatesch muss 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 disabledbooleschen 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 den disabledAttribut, also musst Dir d' .disabledKlass addéieren fir se visuell behënnert ze maachen.
• E puer zukünfteg frëndlech Stiler sinn abegraff fir alles pointer-eventsop Ankerknäppchen auszeschalten. A Browser déi dës Eegeschafte ënnerstëtzen, gesitt Dir den behënnerte Cursor guer net.
• Behënnerte Knäppercher sollen den aria-disabled="true"Attribut enthalen fir den Zoustand vum Element un Assistenztechnologien unzeginn.

<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 activewiesselen. Wann Dir e Knäpp pre-toggelt, musst Dir d' .activeKlass manuell an aria-pressed="true" d' <button>.

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

Checkbox a Radio Knäppercher

Bootstrap .buttonStiler 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-groupenthalen déi geännert Knäppercher fir hiert Togglingverhalen iwwer JavaScript z'erméiglechen a füügt .btn-group-toggled' <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 clickEvent 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' checkedEegeschafte vum Input manuell applizéiert - musst Dir .activeop den <label>manuell wiesselen.

Notéiert datt d'virgecheckte Knäpper erfuerderen datt Dir d' .activeKlass 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 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>

Methoden