Botoiak

Erabili Bootstrap-en botoi-estilo pertsonalizatuak inprimakietan, elkarrizketa-koadroetan eta beste hainbat ekintzetarako, tamaina, egoera eta beste hainbat laguntzarekin.

Adibideak

Bootstrap-ek aurrez zehaztutako hainbat botoi-estilo biltzen ditu, bakoitzak bere helburu semantikoa betetzen du, gehigarri batzuk kontrol gehiago izateko.

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

Desgaitu testua biltzea

Botoiaren testua biltzea nahi ez baduzu, .text-nowrapklasea gehi diezaiokezu botoiari. $btn-white-space: nowrapSass-en, botoi bakoitzeko testu-biltzea desgaitzeko ezar dezakezu .

Botoien etiketak

Klaseak elementuarekin .btnerabiltzeko diseinatuta daude <button>. <a>Hala ere, klase hauek edo elementuetan ere erabil ditzakezu <input>(nabigatzaile batzuek errendatze apur bat desberdina aplika dezaketen arren).

Orri barruko funtzionalitateak abiarazteko erabiltzen diren elementuetan botoi-klaseak erabiltzen dituzunean <a>(esaterako, edukia tolestea), uneko orrialdeko orrialde edo atal berrietara estekatu beharrean, esteka hauek bat eman behar zaie role="button"haien helburua laguntza-teknologietara egoki helarazteko, esate baterako. pantaila-irakurgailuak.

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

Eskema botoiak

Botoi bat behar al duzu, baina ez ekartzen dituzten atzeko planoko kolore handiak? Ordeztu modifikatzaile-klase lehenetsiak .btn-outline-*edozein botoitako atzeko planoko irudi eta kolore guztiak kentzeko dituztenekin.

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

Tamainak

Botoi handiagoak edo txikiagoak nahi dituzu? Gehitu .btn-lgedo .btn-smtamaina gehigarrietarako.

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

Sortu bloke-mailako botoiak (guraso baten zabalera osoa hartzen dutenak) gehituz .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>

Egoera aktiboa

Botoiak sakatuta agertuko dira aktibo daudenean atzeko plano ilunarekin, ertz ilunarekin eta, itzalak gaituta daudenean, txertatutako itzal batekin. Ez dago klase bat gehitu behar <button>s-i sasi-klase bat erabiltzen baitute . Hala ere, itxura aktibo bera behartu dezakezu .active(eta aria-pressed=“true”atributua barne) egoera programatikoki errepikatu behar baduzu.

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

Ezindu egoera

Egin botoiek inaktibo itxura emanez edozein elementuri disabledatributu boolearra gehituta.<button>

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

Elementua erabiltzen duten desgaitutako botoiek <a>portaera pixka bat desberdina dute:

• <a>s ez dute disabledatributua onartzen, beraz, klasea gehitu behar duzu .disabledbisualki desgaituta ager dadin.
• Etorkizuneko estilo batzuk sartzen dira pointer-eventsaingura-botoietan guztiak desgaitzeko. Propietate hori onartzen duten arakatzaileetan, ez duzu desgaitutako kurtsorea batere ikusiko.
• Desgaitutako botoiek laguntza-teknologiei elementuaren egoera adierazteko atributua izan behar dute <a>.aria-disabled="true"
• Erabiltzen diren desgaitutako botoiek <a> ez dute hrefatributua sartu behar.

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

Estekaren funtzionalitatearen oharra

hrefAtributua esteka desgaitu batean gorde behar duzun kasuak estaltzeko , .disabledklaseak s-ren pointer-events: noneesteka funtzionaltasuna desgaitzen saiatzeko erabiltzen du <a>. Kontuan izan CSS propietate hau oraindik ez dagoela HTMLrako estandarizatuta, baina arakatzaile moderno guztiek onartzen dute. Gainera, onartzen duten arakatzaileetan ere pointer-events: none, teklatuaren nabigazioa ez da eragiten, hau da, ikusmeneko teklatuaren erabiltzaileek eta laguntza-teknologien erabiltzaileek esteka hauek aktibatu ahal izango dituzte. Beraz, seguru egoteko, gehigarriaz gain aria-disabled="true", esteka hauetan atributu bat ere sartu tabindex="-1"teklatuaren fokua jaso ez dadin, eta erabili JavaScript pertsonalizatua haien funtzionalitateak guztiz desgaitzeko.

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

Botoiaren plugina

Egin gehiago botoiekin. Kontrolatu botoien egoerak edo sortu botoi-taldeak tresna-barrak bezalako osagai gehiagotarako.

Aldatu estatuak

Gehitu data-toggle="button"botoi baten activeegoera aldatzeko. Botoi bat aldez aurretik txandakatzen ari bazara, eskuz gehitu behar dituzu .activeklasea eta .aria-pressed="true"<button>

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

Kontrol-laukia eta irrati-botoiak

Bootstrap-en .buttonestiloak beste elementu batzuei aplika dakizkieke, esate baterako, <label>s, kontrol-laukia edo irrati-estilo-botoiak aldatzeko. Gehitu aldatutako botoi horiek dituen data-toggle="buttons"bati .btn-groupJavaScript bidez aldatzeko portaera gaitzeko eta gehitu zure botoien barruan s -ak .btn-group-toggleestilotzeko . Kontuan izan sarrera-botoi bakarreko botoiak edo talde horiek sor ditzakezula.<input>

Botoi hauen markatutako egoera botoian gertaeraren bidez soilik eguneratzen da. clickSarrera eguneratzeko beste metodo bat erabiltzen baduzu (adibidez, sarreraren propietatearekin <input type="reset">edo eskuz aplikatuz ), eskuz aktibatu beharko duzu .checked.active<label>

Kontuan izan aldez aurretik egiaztatutako botoiek .activeklasea eskuz gehitzea sarreraren <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>

Metodoak