Source

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>
Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

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.

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

Primêre keppeling Link 
<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.
Primêre keppeling Link 
<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>

De .disabledklasse brûkt pointer-events: noneom te besykjen te skeakeljen de keppeling funksjonaliteit fan <a>s, mar dat CSS eigendom is noch net standerdisearre. Derneist, sels yn browsers dy't stypje pointer-events: none, bliuwt toetseboerdnavigaasje net beynfloede, wat betsjuttet dat sichtbere toetseboerdbrûkers en brûkers fan assistinte technologyen dizze keppelings noch kinne aktivearje. Dus om feilich te wêzen, foegje in tabindex="-1"attribút oan dizze keppelings ta (om foar te kommen dat se toetseboerdfokus krije) en brûk oanpaste JavaScript om har funksjonaliteit út te skeakeljen.

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" autocomplete="off">
  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 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>

Metoaden

Metoade Beskriuwing
$().button('toggle') Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.
$().button('dispose') Fernielet in elemint syn knop.