Qabduulee

Akkaataawwan qaree amala Bootstrap gochoota unkaalee, qaaqawwanii fi kkf keessatti deeggarsa hammangaa, haalataalee fi kkf hedduu waliin fayyadami.

Fakkeenyaaf

Bootstrap akkaataa qaree durtii ibsame hedduu of keessaa qaba, tokkoon tokkoon isaanii kaayyoo hiika mataa isaanii tajaajila, dabalataa muraasa to'annoo dabalataaf darbataman waliin.

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

Marfama barruu hanqisi

Yoo barruun qaree akka marfamu hin barbaanne, .text-nowrapgita gara qareetti dabaluu dandeessa. $btn-white-space: nowrapSass keessatti, tokkoon tokkoo qareedhaaf marfata barruu hanqisuuf saaguu dandeessa .

Mallattoolee buttooni

Gitoota elementii .btnwaliin akka fayyadamaniif qophaa'aniiru . Haa ta'u malee, gitaalee kana irratti ykn elementoota <button>irrattis fayyadamuu dandeessa (biraazaroonni tokko tokko agarsiisa xiqqoo adda ta'e hojiirra oolchuu danda'us).<a><input>

Yeroo kutaalee buttooni <a>elementoota hojii fuula keessaa kakaasuuf fayyadaman irratti fayyadamnu (akka qabiyyee kuffisuu), fuula haaraa ykn kutaalee fuula ammaa keessa jiran waliin walqabsiisuu irra, hidhamtoonni kun role="button"kaayyoo isaanii haala sirrii ta'een teknooloojiiwwan gargaaraa kanneen akka dubbistoota iskiriinii.

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

Qabduulee sarara

Button barbaachisa, garuu halluu duubbee hefty isaan fidan miti? Gitoota fooyyessaa durtii .btn-outline-*kanneen fakkiiwwanii fi halluuwwan duubbee hunda qaree kamiyyuu irratti haquuf bakka buusi.

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

Saayiziiwwan

Buttons gurguddoo moo xixiqqoo ta'an barbaadduu? Dabalaa .btn-lgykn .btn-smsafara dabalataaf.

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

Qabduu sadarkaa ugguraa uumi—kanneen bal'ina guutuu warraa diriiran—ida'uudhaan .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>

Haala sochii qabu

Qabduuwwan yeroo socho'an duubbee dukkanaa'aa, daangaa dukkanaa'aa, fi, yeroo gaaddidduuwwan dandeessifaman, gaaddidduu galtee waliin dhiibamanii ni mul'atu. s irratti gita dabaluu hin barbaachisu <button>sababiin isaas isaan gita sobaa fayyadaman . Haa ta'u malee, ammallee mul'ata sochii walfakkaataa dirqisiisuu dandeessa .active(fi amallicha hammachuu aria-pressed=“true”) yoo haalata sagantaadhaan fakkaasuu barbaadde.

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

Haala hanqifame

disabledAmala boolii qaama kamiyyuutti dabaluudhaan qareewwan sochii hin qabne akka fakkaatan godhi <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>

Qabduulee hanqifaman <a>elementii fayyadamuun xiqqoo adda ta'ee amala qabu:

• <a>s amallicha hin deeggaran , kanaafuu mul'ataan akka hanqifame mul'atu gochuuf gita disableddabaluu qabda ..disabled
• Akkaataawwan gara fuula duraatti mijatoo ta'an tokko tokko hunda pointer-eventsqaree anchor irratti hanqisuuf hammatamaniiru. Biraawwaroota qabeentaa sana deeggaran keessatti, qaree hanqifame tasumaa hin argitu.
• Qabduulee hanqifaman fayyadaman haalata elementii gara teeknooloojiiwwan gargaaraatti agarsiisuuf amalli <a>of keessatti qabachuu qabu .aria-disabled="true"
• Qabduulee hanqifaman fayyadaman amaloota hammachuu <a> hin qaban .href

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

Of eeggannoo dalagaa walqabsiisaa

hrefHaalawwan amaloota hidhaa hanqifame irratti qabachuu qabdu uwwisuuf , .disabledgitaan dalagaa hidhaa s pointer-events: nonehanqisuuf yaaluuf fayyadama. <a>Hubadhu qabeentiin CSS kun ammallee HTML'f istaandaardii hin taane, garuu biraawzaroota ammayyaa hundi ni deeggaru. Dabalataanis, browsers that do support keessattillee pointer-events: none, keyboard navigation hin tuqamne, jechuunis fayyadamtoonni keyboard ijaan qabaniifi fayyadamtoonni teknooloojii gargaarsaa ammallee hidhannoowwan kana hojiirra oolchuu ni danda'u jechuudha. Kanaafuu nageenya qabaachuuf, dabalataan aria-disabled="true", akkasumas tabindex="-1"xiyyeeffannoo kiiboordii akka hin fudhanne gochuuf amaloota hidhannoowwan kana irratti dabali, fi JaavaScript amala fayyadamii dalagaa isaanii guutummaatti hanqisuuf.

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

Ijaarsa buttooni

Buttons waliin caalaatti hojjedhu. Qabduu too'annoo haalata ykn gareewwan qaree qaamolee dabalataa akka barruulee uumi.

Toggle mootummoota

data-toggle="button"Haalata qaree tokkoo jijjiiruuf dabali active. Yoo qaree durtii jijjiiraa jirta ta'e, harkaan .activegitaa fi aria-pressed="true" gara <button>.

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

Sanduuqa filannoo fi qaree raadiyoo

Akkaataawwan Bootstrap .buttonqaamolee biroo irratti hojii irra oolchuun ni danda'ama, kan akka <label>s, sanduuqa filannoo ykn qaree akkaataa raadiyoo jijjiiruu kennuudhaaf. Amala jijjiirraa isaanii karaa JaavaScript dandeessisuuf qaree fooyya'an sana of keessaa qabutti dabali fi data-toggle="buttons"s qaree kee keessaa akkaataa itti dabali. Hubadhu, qaree tokko kan galtee-humna qabu ykn gareewwan isaanii uumuu dandeessa..btn-group.btn-group-toggle<input>

Haalli qaree kanaaf sakatta'ame karaa taatee qaree irratti qofa fooyya'a . clickYoo galtee haaromsuuf mala biraa fayyadamte-fkn, qabeentaa <input type="reset">galtee harkaan ykn harkaan hojiirra oolchuudhaan - harkaan jijjiiruu si barbaachisa .checked.active<label>

Hubadhu, qaree durtii sakatta'aman .activegita harkaan gara galtee'tti dabaluu si gaafatu <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>

Malawwan