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 hefty background colors 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

Buttons zijja kulabika nga zinyigiddwa (nga zirina background enzirugavu, ensalosalo enzirugavu, n'ekisiikirize ekiyingiziddwa) nga zikola. 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.
• Butaamu ezilema zirina okubeeramu aria-disabled="true"ekintu okulaga embeera y'ekintu eri tekinologiya ayamba.

<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 okuyita mu clickevent ku button yokka. 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