Ebikondo ebiyitibwa Buttons

Kozesa emisono gya button egya bulijjo egya Bootstrap ku bikolwa mu foomu, enjogera, n'ebirala nga olina obuwagizi bwa sayizi eziwera, embeera, n'ebirala.

Eby’okulabirako

Bootstrap erimu emisono gya button egiwerako egyategekebwa edda, nga buli emu ekola ekigendererwa kyayo eky’amakulu, nga waliwo ebirala ebitonotono ebisuuliddwamu okusobola okufuga ennyo.

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

Lemesa okuzinga ebiwandiiko

Bw’oba ​​toyagala biwandiiko bya bbaatuuni kuzinga, osobola okwongera .text-nowrapekibiina ku bbaatuuni. Mu Sass, osobola okuteekawo $btn-white-space: nowrapokulemesa okuzinga ebiwandiiko ku buli bbaatuuni.

Ebiwandiiko ebiraga obutambi

Ebika .btnbikoleddwa okukozesebwa ne <button>elementi. Naye, osobola n’okukozesa kiraasi zino ku <a>oba <input>elementi (wadde nga browser ezimu ziyinza okukozesa rendering eyawukana katono).

Nga okozesa ebika bya button ku <a>elementi ezikozesebwa okutandikawo emirimu mu lupapula (nga okugwa ebirimu), okusinga okuyunga ku mpapula empya oba ebitundu munda mu lupapula oluliwo kati, enkolagana zino zirina okuweebwa a role="button"okutuusa obulungi ekigendererwa kyazo eri tekinologiya ayamba nga ebisoma ku ssirini.

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

Ebiwandiiko ebiraga ensengeka

Mu kwetaaga button, naye si langi za background ezizitowa ze baleeta? Kikyuse kiraasi z'omukyusa ezisookerwako .btn-outline-*n'ezo eziggyawo ebifaananyi byonna eby'emabega ne langi ku bbaatuuni yonna.

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

Sayizi ezitali zimu

Fancy buttons ennene oba entono? Okwongerako .btn-lgoba .btn-smokufuna sayizi endala.

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

Tonda buttons za block level —ezo ezibuna obugazi bwonna obw’omuzadde —ng’ogattako .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>

Embeera ekola

Butaamu zijja kulabika nga zinyigiddwa nga zikola nga zirina ennyuma enzirugavu, ensalosalo enzirugavu, era, ebisiikirize bwe bikozesebwa, ekisiikirize ekiyingiziddwa. Tekyetaagisa kwongera kiraasi ku <button>s nga bwe bakozesa pseudo-class . Naye, okyayinza okukaka endabika y'emu ekola ne .active(n'okussaamu aria-pressed=“true”ekintu) singa oba weetaaga okukoppa embeera mu pulogulaamu.

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

Embeera ebalema

Fuula buttons okulabika nga ezitakola nga ossaako disabledboolean attribute ku <button>element yonna.

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

Butaamu ezilema nga zikozesa <a>elementi zeeyisa mu ngeri ya njawulo katono:

• <a>s teziwagira disabledattribute, kale olina okwongerako .disabledclass okugifuula visually okulabika nga eremeddwa.
• Emisono egimu egy’omukwano mu biseera eby’omu maaso giteekeddwamu okulemesa byonna pointer-eventsku buttons za anchor. Mu browser eziwagira eky'obugagga ekyo, tojja kulaba cursor eremeddwa n'akatono.
• Buttons ezilema nga zikozesa <a>zirina okubeeramu aria-disabled="true"attribute okulaga embeera ya element eri tekinologiya ayamba.
• Buttons ezilemeseddwa nga zikozesa <a> tezirina kubaamu 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>

Okulabula ku nkola y’okuyunga

Okubikka ku mbeera nga olina okukuuma hrefekintu ku link eremeddwa, .disabledekibiina ekozesa pointer-events: noneokugezaako okulemesa enkola y'enkolagana eya <a>s. Weetegereze nti ekintu kino ekya CSS tekinnatuuka ku mutindo gwa HTML, naye browser zonna ez'omulembe zikiwagira. Okugatta ku ekyo, ne mu browser ezikola obuwagizi pointer-events: none, okutambulira ku kibboodi kusigala nga tekukoseddwa, ekitegeeza nti abakozesa kiiboodi abalaba n’abakozesa tekinologiya ayamba bajja kuba bakyasobola okukola enkolagana zino. Kale okubeera obukuumi, nga kwotadde ne aria-disabled="true", era teekamu tabindex="-1"attribute ku links zino okuziremesa okufuna keyboard focus, era kozesa custom JavaScript okulemesa ddala emirimu gyazo.

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

Ekintu ekiyitibwa button plugin

Kola ebisingawo ne buttons. Control button states oba tonda ebibinja bya buttons ku bitundu ebisingawo nga toolbars.

Toggle amawanga

Okwongerako data-toggle="button"okukyusakyusa embeera ya button active. Bw’oba ​​nga tonnaba kukyusa bbaatuuni, olina okwongerako .activeekibiina mu ngalo ne aria-pressed="true" ku <button>.

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

Checkbox ne buttons za leediyo

Emisono gya Bootstrap .buttongisobola okukozesebwa ku bintu ebirala, nga <label>s, okuwa checkbox oba radio style button toggling. Yongera data-toggle="buttons"ku a .btn-grouperimu buttons ezo ezikyusiddwa okusobozesa enneeyisa yaabwe ey'okukyusakyusa nga oyita mu JavaScript era osseeko .btn-group-togglesitayiro ya <input>s munda mu buttons zo. Weetegereze nti osobola okukola buttons emu ezikozesa input-powered oba ebibinja byazo.

Embeera ekebereddwa ku buttons zino etereezebwa yokka okuyita mu clickevent ku button. Bw’oba ​​okozesa enkola endala okutereeza okuyingiza —okugeza, ng’okozesa <input type="reset">oba ng’okozesa mu ngalo checkedeky’obugagga ky’okuyingiza —ojja kwetaaga okukyusakyusa .activemu <label>ngalo.

Weetegereze nti buttons ezikebereddwa nga tezinnabaawo zeetaaga okwongera .activekiraasi mu ngalo ku 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>

Enkola