Dagiti Buton

Usaren dagiti kostumbre nga estilo ti buton ti Bootstrap para kadagiti tignay kadagiti porma, dialogo, ken dadduma pay nga addaan iti suporta para kadagiti adu a kadakkel, estado, ken dadduma pay.

Dagiti pagarigan

Ti Bootstrap ket mangiraman kadagiti sumagmamano a nasakbay a naikeddeng nga estilo ti buton, tunggal maysa ket agserbi ti bukodna a semantiko a panggep, nga addaan kadagiti sumagmamano nga ekstra a naipuruak para iti ad-adu a panagtengngel.

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

Isardeng ti panagbalkot ti teksto

No dimo kayat a mabalkot ti teksto ti buton, mabalinmo nga inayon ti .text-nowrapklase iti buton. Iti Sass, mabalinmo nga ikeddeng $btn-white-space: nowrapa mangbaldado ti panagbalkot ti teksto para iti tunggal maysa a buton.

Dagiti etiketa ti buton

Nadisenio dagiti .btnklase a mausar a kadua ti <button>elemento. Nupay kasta, mabalinmo pay nga usaren dagitoy a klase iti <a>wenno <input>dagiti elemento (nupay dagiti dadduma a browser ket mabalinda nga iyaplikar ti naiduma bassit a panagiparang).

No agus-usar kadagiti klase ti buton kadagiti <a>elemento a maus-usar a mangtignay ti panagusar iti uneg ti panid (kas ti agruprupsa a linaon), imbes a mangisilpo kadagiti baro a panid wenno dagiti benneg iti uneg ti agdama a panid, dagitoy a silpo ket rumbeng a maited ti a role="button"tapno maitutop a mangidanon ti panggepda kadagiti makatulong a teknolohia a kas ti dagiti agbasbasa iti iskrin.

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

Dagiti buton ti balabala

Kasapulan ti maysa a buton, ngem saan a dagiti nadagsen a kolor ti likudan nga iyegda? Sukatan dagiti default a klase ti mangbalbaliw kadagiti .btn-outline-*mangikkat kadagiti amin a ladawan ti likudan ken dagiti kolor iti ania man a buton.

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

Dagiti Kadakkel

Magarbo a dakdakkel wenno basbassit a butones? Inayon .btn-lgwenno .btn-smpara kadagiti kanayonan a kadakkel.

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

Mangaramid kadagiti buton ti block level—dagidiay mangsaklaw iti naan-anay a kalawa ti maysa a nagannak—babaen ti pananginayon iti .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>

Aktibo nga estado

Agparang dagiti buton a naiprenta no aktibo nga addaan iti natayengteng a likudan, nasipnget a beddeng, ken, no dagiti anniniwan ket napalubosan, ti naikabil nga anniniwan. Saan a kasapulan ti manginayon ti klase iti <button>s bayat nga agus-usarda iti pseudo-klase . Nupay kasta, mabalinmo pay laeng a piliten ti isu met laeng nga aktibo a panagparang nga addaan .active(ken iraman ti aria-pressed=“true”attribute) no kasapulam a tuladen ti estado iti programatiko.

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

Kasasaad ti baldado

Pagbalinen dagiti buton a kasla saan nga aktibo babaen ti pananginayon ti disabledboolean a kababalin iti ania man <button>nga elemento.

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

Dagiti baldado a buton nga agus-usar ti <a>elemento ket agtigtignay a naiduma bassit:

• <a>s dida suportaran ti disabledattribute, isu a masapul nga inayonmo ti .disabledklase tapno agparang a biswal a baldado.
• Dadduma nga estilo a makaay-ayo iti masakbayan ti nairaman tapno mapasardeng amin pointer-eventskadagiti buton ti angkla. Kadagiti browser a mangsuporta iti dayta a tagikua, saanmo a makita ti baldado a kursor a pulos.
• Dagiti baldado a buton nga agus-usar <a>ket rumbeng a mangiraman ti aria-disabled="true"attribute tapno mangipakita ti kasasaad ti elemento kadagiti makatulong a teknolohia.
• Dagiti baldado a buton nga agus-usar <a> ket saan koma a mangiraman ti hrefattribute.

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

Pakdaar ti panagandar ti silpo

Tapno masakupan dagiti kaso a masapul a pagtalinaedem ti hrefattribute iti maysa a baldado a silpo, ti .disabledklase ket agus-usar pointer-events: nonea mangpadas a mangbaldado ti panagandar ti silpo ti <a>s. Imutektekanyo a daytoy a tagikua ti CSS ket saan pay a naistandard para iti HTML, ngem amin dagiti moderno a browser ket mangsuporta iti daytoy. Mainayon pay, uray kadagiti browser a mangsuporta pointer-events: none, agtalinaed a saan a maapektaran ti panaglayag iti teklado, kayatna a sawen a dagiti makakita nga agus-usar iti teklado ken dagiti agus-usar kadagiti makatulong a teknolohia ket mabalinda latta nga aktiboen dagitoy a silpo. Isu a tapno natalged, malaksid iti aria-disabled="true", iraman pay ti maysa nga tabindex="-1"attribute kadagitoy a silpo tapno malapdan ida nga umawat iti pokus ti teklado, ken agusar iti kostumbre a JavaScript tapno interamente a mangbaldado iti panagandar dagitoy.

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

Plugin ti buton

Aramiden ti ad-adu pay babaen kadagiti buton. Ibaga ti buton ti kontrol wenno mangpartuat kadagiti grupo dagiti buton para kadagiti ad-adu a paset a kas dagiti toolbar.

Toggle dagiti estado

Add data-toggle="button"to toggle ti activekasasaad ti maysa a buton. No pre-toggling-mo ti maysa a buton, masapul a manual nga inayonmo ti .activeklase ken aria-pressed="true" iti <button>.

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

Checkbox ken dagiti buton ti radio

Dagiti estilo ti Bootstrap ket .buttonmabalin a mayaplikar kadagiti sabali nga elemento, a kas ti <label>s, tapno mangipaay ti checkbox wenno panag-toggling ti buton ti estilo ti radio. Inayon data-toggle="buttons"iti a a .btn-groupnaglaon kadagita a nabaliwan a buton tapno mapalubosan ti panag-toggling a kababalinda babaen ti JavaScript ken inayon .btn-group-toggletapno estilo ti <input>s iti uneg dagiti butonmo. Imutektekanyo a mabalinmo ti mangpartuat kadagiti agmaymaysa nga input-powered a buton wenno dagiti grupo kadagitoy.

Ti nasukimaten nga estado para kadagitoy a buton ket ma-update laeng babaen ti clickpasamak iti buton. No agusarka ti sabali a pamay-an tapno mapabaro ti input—kas pagarigan, babaen <input type="reset">wenno babaen ti manual a panangipakat ti checkedtagikua ti input—kasapulam nga i-toggle .activeti <label>manual.

Imutektekanyo a dagiti nasakbay a nasukimaten a buton ket kasapulan a manual a manginayon ti .activeklase iti input'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>

Dagiti Pamay-an