Source

Hnappar

Notaðu sérsniðna hnappastíl Bootstrap fyrir aðgerðir í eyðublöðum, glugga og fleira með stuðningi fyrir margar stærðir, stöður og fleira.

Dæmi

Bootstrap inniheldur nokkra fyrirfram skilgreinda hnappastíla, sem hver þjónar sínum merkingarfræðilega tilgangi, með nokkrum aukahlutum til að fá meiri stjórn.

<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>
Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.

Slökktu á textabroti

Ef þú vilt ekki að hnappatextinn hverfi, geturðu bætt .text-nowrapbekknum við hnappinn. Í Sass geturðu stillt $btn-white-space: nowraptil að slökkva á textaumbroti fyrir hvern hnapp.

Hnapparmerki

Flokkarnir .btneru hannaðir til að nota með <button>frumefninu. Hins vegar geturðu líka notað þessa flokka á <a>eða <input>þætti (þó að sumir vafrar gætu notað aðeins öðruvísi flutning).

Þegar hnappaflokkar eru notaðir á <a>þætti sem eru notaðir til að kveikja á virkni síðunnar (eins og efni sem hrynur saman), frekar en að tengja við nýjar síður eða hluta á núverandi síðu, ætti að gefa þessum hlekkjum til role="button"að koma tilgangi sínum á framfæri á viðeigandi hátt til hjálpartækni eins og skjálesarar.

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

Útlínuhnappar

Þarftu hnapp, en ekki stífu bakgrunnslitina sem þeir koma með? Skiptu út sjálfgefnum breytingaflokkum fyrir .btn-outline-*þá til að fjarlægja allar bakgrunnsmyndir og liti á hvaða hnapp sem er.

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

Stærðir

Langar þig í stærri eða minni hnappa? Bæta við .btn-lgeða .btn-smfyrir fleiri stærðir.

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

Búðu til blokkarstigshnappa - þá sem spanna alla breidd foreldris - með því að bæta við .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>

Virkt ástand

Þrýst er á hnappana (með dekkri bakgrunni, dekkri ramma og innfelldum skugga) þegar þeir eru virkir. Það er engin þörf á að bæta flokki við <button>s þar sem þeir nota gerviflokk . Hins vegar geturðu samt þvingað sama virka útlitið með .active(og látið aria-pressed="true"eigindina fylgja með) ef þú þarft að endurtaka ástandið með áætlun.

Aðal hlekkur Tengill 
<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>

Óvirkt ástand

Láttu hnappa líta út fyrir að vera óvirkir með því að bæta disabledboolean eiginleikanum við hvaða <button>frumefni sem er.

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

Óvirkir hnappar sem nota <a>þáttinn hegða sér svolítið öðruvísi:

  • <a>s styðja ekki disabledeigindina, svo þú verður að bæta við .disabledbekknum til að láta hann líta út fyrir að vera óvirkur.
  • Sumir framtíðarvænir stílar eru innifaldir til að slökkva pointer-eventsá öllum akkerishnappum. Í vöfrum sem styðja þessa eiginleika muntu alls ekki sjá óvirka bendilinn.
  • Óvirkir hnappar ættu að innihalda aria-disabled="true"eigindina til að gefa til kynna stöðu þáttarins fyrir hjálpartækni.
Aðal hlekkur Tengill 
<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>

Bekkurinn .disablednotar pointer-events: nonetil að reyna að slökkva á tengivirkni <a>s, en þessi CSS eign er ekki enn staðlað. Að auki, jafnvel í vöfrum sem styðja pointer-events: none, er lyklaborðsleiðsögn óbreytt, sem þýðir að sjáandi lyklaborðsnotendur og notendur hjálpartækni munu enn geta virkjað þessa tengla. Svo til að vera öruggur skaltu bæta við tabindex="-1"eiginleikum á þessa tengla (til að koma í veg fyrir að þeir fái lyklaborðsfókus) og notaðu sérsniðið JavaScript til að slökkva á virkni þeirra.

Hnappa viðbót

Gerðu meira með hnöppum. Stjórna hnappastöður eða búa til hópa af hnöppum fyrir fleiri hluti eins og tækjastikur.

Skiptu um ríki

Bæta við data-toggle="button"til að skipta um stöðu hnapps active. Ef þú ert að skipta um hnapp fyrirfram verður þú að bæta .activebekknum og aria-pressed="true" við <button>.

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

Gátreitur og útvarpshnappar

Hægt er að nota stíl Bootstrap .buttoná aðra þætti, svo sem <label>s, til að skipta um gátreit eða útvarpsstílhnapp. Bættu data-toggle="buttons"við a .btn-groupsem inniheldur þessa breyttu hnappa til að virkja breytihegðun þeirra í gegnum JavaScript og bættu við .btn-group-toggletil að stíla <input>s á hnappunum þínum. Athugaðu að þú getur búið til staka inntaksknúna hnappa eða hópa af þeim.

Merkt ástand fyrir þessa hnappa er aðeins uppfært með clickatburði á hnappinum. Ef þú notar aðra aðferð til að uppfæra inntakið—td með <input type="reset">eða með því að beita checkedeiginleikum inntaksins handvirkt—þú þarft að kveikja .activeá inntakinu <label>handvirkt.

Athugaðu að fyrirfram hakaðir hnappar krefjast þess að þú bætir .activebekknum handvirkt við inntakið <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>

Aðferðir

Aðferð Lýsing
$().button('toggle') Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.
$().button('dispose') Eyðir hnappi frumefnis.