Knoppen

Brûk de oanpaste knopstilen fan Bootstrap foar aksjes yn formulieren, dialogen en mear mei stipe foar meardere grutte, steaten, en mear.

Foarbylden

Bootstrap omfettet ferskate foarôf definieare knopstilen, dy't elk har eigen semantyske doel tsjinje, mei in pear ekstra's ynlutsen foar mear kontrôle.

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

Tekstomloop útskeakelje

As jo ​​​​net wolle dat de tekst fan 'e knop omslacht, kinne jo de .text-nowrapklasse tafoegje oan de knop. Yn Sass kinne jo ynstelle $btn-white-space: nowrapom tekstomslach foar elke knop út te skeakeljen.

Knop tags

De .btnklassen binne ûntwurpen om te brûken mei it <button>elemint. Jo kinne dizze klassen lykwols ek brûke op <a>of <input>eleminten (hoewol guon browsers in wat oare rendering kinne tapasse).

By it brûken fan knopklassen op <a>eleminten dy't brûkt wurde om funksjonaliteit op 'e side te triggerjen (lykas ynstoarte ynhâld), ynstee fan keppeljen nei nije siden of seksjes binnen de hjoeddeistige side, moatte dizze keppelings in wurde jûn role="button"om har doel passend oer te bringen oan assistinte technologyen lykas skermlêzers.

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

In knop nedich, mar net de heftige eftergrûnkleuren dy't se bringe? Ferfange de standert modifikaasjeklassen mei dy .btn-outline-*om alle eftergrûnôfbyldings en kleuren op elke knop te ferwiderjen.

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

Maten

Wolle jo gruttere of lytsere knoppen? Add .btn-lgof .btn-smfoar ekstra maten.

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

Meitsje knoppen op bloknivo - dyjingen dy't de folsleine breedte fan in âlder beslaan - troch ta te foegjen .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>

Aktive steat

Knoppen sille yndrukt wurde (mei in donkerdere eftergrûn, donkerdere râne, en ynsletten skaad) as aktyf. D'r is gjin need om in klasse ta te foegjen oan <button>s, om't se in pseudo-klasse brûke . Jo kinne lykwols itselde aktive uterlik noch twinge mei .active(en it aria-pressed="true"attribút opnimme) as jo de steat programmatysk moatte replikearje.

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

Utskeakele steat

Meitsje knoppen lykje ynaktyf troch it tafoegjen fan it disabledBooleaanske attribút oan elk <button>elemint.

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

Utskeakele knoppen mei it <a>elemint gedrage in bytsje oars:

• <a>s stypje it disabledattribút net, dus jo moatte de .disabledklasse tafoegje om it fisueel útskeakele te meitsjen.
• Guon takomstfreonlike stilen binne opnommen om alles pointer-eventsop ankerknoppen út te skeakeljen. Yn browsers dy't dat eigendom stypje, sille jo de útskeakele rinnerke hielendal net sjen.
• Utskeakele knoppen moatte it aria-disabled="true"attribút omfetsje om de steat fan it elemint oan te jaan oan assistinte technologyen.

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

Knop plugin

Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.

Toggle steaten

Foegje data-toggle="button"ta om de status fan in knop te wikseljen active. As jo ​​​​foarôf in knop wikselje, moatte jo de .activeklasse manuell tafoegje en aria-pressed="true" oan 'e <button>.

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

Checkbox en radio knoppen

De stilen fan Bootstrap .buttonkinne tapast wurde op oare eleminten, lykas <label>s, om karfakje of radiostylknop te wikseljen. Taheakje data-toggle="buttons"oan in .btn-groupbefetsje dy wizige knoppen te skeakeljen harren toggling gedrach fia JavaSkript en tafoegje .btn-group-toggleoan styl de <input>s binnen dyn knoppen. Tink derom dat jo inkele ynput-oandreaune knoppen as groepen fan harren kinne oanmeitsje.

De kontrolearre steat foar dizze knoppen wurdt allinnich bywurke fia clickevenemint op de knop. As jo ​​​​in oare metoade brûke om de ynfier te aktualisearjen - bygelyks mei <input type="reset">of troch de eigenskip fan 'e ynfier manuell oan te passen checked- moatte jo .activede <label>hân ynskeakelje.

Tink derom dat foarôf kontrolearre knoppen jo fereaskje dat jo de .activeklasse manuell tafoegje oan 'e ynfier's <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>

Metoaden