Hnappar

Notaðu sérsniðna hnappastíl Bootstrap fyrir aðgerðir í eyðublöðum, gluggum 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>

Slökktu á textabroti

Ef þú vilt ekki að hnappatextinn hverfi, geturðu bætt .text-nowrapbekknum við hnappinn. Í Sass geturðu stillt $btn-white-space: nowrapá 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 (þó 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.

<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 á hnappa þegar þeir eru virkir með dekkri bakgrunni, dekkri ramma og, þegar skuggar eru virkir, innfelldum skugga. Þ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 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 á öllu pointer-eventsá akkerihnappum. Í vöfrum sem styðja þessa eiginleika muntu alls ekki sjá óvirka bendilinn.
• Óvirkir hnappar sem nota <a>ættu að innihalda aria-disabled="true"eigindina til að gefa til kynna stöðu þáttarins fyrir hjálpartækni.
• Óvirkir hnappar sem nota <a> ættu ekki að innihalda hrefeigindina.

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

Fyrirvari um tengivirkni

Til að ná yfir tilvik þar sem þú þarft að halda hrefeigindinni á óvirkum hlekk, .disablednotar flokkurinn pointer-events: nonetil að reyna að slökkva á tengivirkni <a>s. Athugaðu að þessi CSS eign er ekki enn staðlað fyrir HTML, en allir nútíma vafrar styðja það. 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, auk aria-disabled="true", einnig innihalda tabindex="-1"eiginleika á þessum hlekkjum 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 með öllu.

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

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