Swikomba-nkarhi

Tirhisa switayele swa swikomba-nkarhi swa Bootstrap swa ntolovelo eka swiendlo eka tifomo, ti-dialog, na swin’wana hi nseketelo wa vukulu byo tala, swiyimo, na swin’wana.

Swikombiso

Bootstrap yi katsa switayele swo hlayanyana swa swikomba-nkarhi leswi hlamuseriweke ka ha ri emahlweni, xin’wana ni xin’wana xi tirhela xikongomelo xa xona xa semantiki, na swin’wana swi nga ri swingani leswi engetelekeke leswi hoxiweke endzeni leswaku ku ta va ni vulawuri lebyi engetelekeke.

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

Tiyisisa ku phutsela matsalwa

Loko u nga lavi leswaku tsalwa ra buti ri phutsela, u nga engetela .text-nowraptlilasi eka buti. Eka Sass, u nga veka $btn-white-space: nowrapku tshikisa ku phutsela matsalwa eka buti yin’wana na yin’wana.

Tithegi ta swikomba-nkarhi

Titlilasi .btnti endleriwe ku tirhisiwa na <button>elemente. Kambe, u nga ha tlhela u tirhisa titlilasi leti eka <a>kumbe <input>swiaki (hambi leswi swihlamusela-marito swin’wana swi nga ha tirhisaka ku hundzuluxela loku hambaneke katsongo).

Loko u tirhisa titlilasi ta swikomba-nkarhi eka <a>swiaki leswi tirhisiwaka ku hlohlotela ntirho wa le ndzeni ka pheji (ku fana na ku pfotlosa swilo), ematshan’wini yo hlanganisa eka matluka lamantshwa kumbe swiyenge endzeni ka tluka ra sweswi, swihlanganisi leswi swi fanele ku nyikiwa a role="button"ku hundzisela xikongomelo xa swona hi ndlela leyi faneleke eka thekinoloji yo pfuneta ku fana na swihlaya swa xikirini.

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

Swikomba-nkarhi swa outline

U lava button, kambe ku nga ri mihlovo yo tika ya le ndzhaku leyi va yi tisaka? Cinca titlilasi ta swicinci swa ntolovelo hi leti nga .btn-outline-*ta susa swifaniso hinkwaswo swa le ndzhaku ni mihlovo eka buti yihi na yihi.

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

Tisayizi

Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Engetela .btn-lgkumbe .btn-smku kuma tisayizi leti engetelekeke.

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

Endla swikomba-nkarhi swa block level—leswi hlanganisaka ku anama hinkwako ka mutswari—hi ku engetela .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>

Xiyimo lexi tirhaka

Tiboto ti ta humelela ti tshikileriwile loko ti tirha hi ndzhaku ka ntima, ndzilakano wa ntima, naswona, loko mindzhuti yi tirhisiwile, ndzhuti lowu nghenisiweke. A ku na xilaveko xo engetela tlilasi eka <button>s tani hi leswi va tirhisaka pseudo-class . Kambe, wa ha nga sindzisa ku languteka loku fanaka loku tirhaka hi .active(naswona ku katsa aria-pressed=“true”xihlawulekisi) loko u lava ku phindha xiyimo hi phurogireme.

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

Xiyimo xa vulema

Endla leswaku swikomba-nkarhi swi languteka swi nga tirhi hi ku engetela disabledxihlawulekisi xa boolean eka <button>elemente yihi na yihi.

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

Tiboto leti nga tirhiki leti tirhisaka <a>elemente ti tikhoma hi ndlela leyi hambaneke nyana:

• <a>s a va seketeli disabledxihlawulekisi, kutani u fanele ku engetela .disabledtlilasi ku endla leswaku hi ku vona yi vonaka yi nga tirhi.
• Switayili swin’wana leswi nga ni xinghana eka nkarhi lowu taka swi katsiwile ku tshikisa hinkwaswo pointer-eventseka swikomba-nkarhi swa anchor. Eka swihlamusela-marito leswi seketelaka nhundzu yoleyo, a wu nge voni xikombiso lexi nga tirhiki nikatsongo.
• Tiboto leti nga tirhiki leti tirhisaka ti <a>fanele ku katsa aria-disabled="true"xihlawulekisi ku kombisa xiyimo xa elemente eka thekinoloji yo pfuneta.
• Tiboto leti nga tirhiki leti tirhisaka a ti <a> fanelanga ti katsa hrefxihlawulekisi.

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

Xitsundzuxo xa ntirho wa link

Ku hlanganisa timhaka laha u faneleke ku hlayisa hrefxihlawulekisi eka xihlanganisi lexi nga tirhiki, .disabledtlilasi yi tirhisa pointer-events: noneku ringeta ku tshikisa ntirho wa xihlanganisi wa <a>s. Xiya leswaku nhundzu leyi ya CSS a yi si ringanisiwa eka HTML, kambe swihlamusela-marito hinkwaswo swa manguva lawa swi yi seketela. Ku engetela kwalaho, hambi ku ri eka swihlamusela-marito leswi endlaka nseketelo pointer-events: none, ku famba-famba ka khibhodi a ku khumbekanga, leswi vulaka leswaku vatirhisi va khibhodi lava vonaka ni vatirhisi va thekinoloji leyi pfunaka va ha ta kota ku tirhisa swihlanganisi leswi. Kutani ku va u hlayisekile, ku engetela eka aria-disabled="true", tlhela u katsa tabindex="-1"xihlawulekisi eka swihlanganisi leswi ku swi sivela ku amukela ku kongomisa ka khibhodi, naswona tirhisa JavaScript ya ntolovelo ku tshikisa ntirho wa swona hi ku helela.

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

Xitirhisiwa xa buti

Endla swo tala hi swikomba-nkarhi. Vulawuri bya swikomba-nkarhi kumbe ku tumbuluxa mintlawa ya swikomba-nkarhi swa swiphemu swo tala swo fana na tibarhi ta switirhisiwa.

Toggle swifundzha

Engetela data-toggle="button"ku cinca-cinca xiyimo xa buti active. Loko u ri karhi u cinca-cinca buti ka ha ri emahlweni, u fanele u engetela .activetlilasi hi voko ni aria-pressed="true" le ka <button>.

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

Bokisi ro kambela na swikomba-nkarhi swa xiya-ni-moya

Switayili swa Bootstrap .buttonswi nga tirhisiwa eka swiaki swin’wana, swo tanihi <label>s, ku nyika bokisi ro kambela kumbe ku cinca-cinca ka buti ya xitayili xa radio. Engetela data-toggle="buttons"eka a .btn-groupleyi nga na swikomba-nkarhi sweswo leswi cinciweke ku endla leswaku mahanyelo ya swona yo cinca-cinca ma tirha hi ku tirhisa JavaScript naswona u engetela .btn-group-toggleku xitayili xa <input>s endzeni ka swikomba-nkarhi swa wena. Xiya leswaku u nga endla swikomba-nkarhi swin’we leswi tirhisaka ku nghenisa kumbe mintlawa ya swona.

Xiyimo lexi kamberiweke xa swikomba-ndlela leswi xi pfuxetiwa ntsena hi ku tirhisa clickxiendlakalo eka xikomba-nkarhi. Loko u tirhisa ndlela yin’wana ku pfuxeta input—xikombiso, hi <input type="reset">kumbe hi ku tirhisa hi voko nhundzu ya input checked—u ta lava ku cinca-cinca .activehi <label>voko.

Xiya leswaku swikomba-nkarhi leswi kamberiweke ka ha ri emahlweni swi lava leswaku u engetela .activetlilasi hi voko eka leswi nghenisiweke <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>

Maendlelo