Source

Buttons

Yi amfani da salon maɓalli na al'ada na Bootstrap don ayyuka a cikin tsari, maganganu, da ƙari tare da goyan baya don girma dabam, jihohi, da ƙari.

Misalai

Bootstrap ya ƙunshi nau'ikan maɓalli da aka ƙirƙira, kowannensu yana hidimar maƙasudin nasa, tare da wasu ƙarin abubuwan da aka jefa don ƙarin sarrafawa.

<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>
Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .sr-onlyajin.

Maballin tags

An .btntsara azuzuwan don a yi amfani da su tare da <button>kashi. Koyaya, zaku iya amfani da waɗannan azuzuwan akan <a>ko <input>abubuwa (ko da yake wasu masu bincike na iya amfani da ma'anar ta ɗan bambanta).

Lokacin amfani da azuzuwan maɓalli akan <a>abubuwan da ake amfani da su don haifar da ayyuka na cikin shafi (kamar abun ciki mai rugujewa), maimakon haɗawa zuwa sabbin shafuka ko sassan cikin shafin na yanzu, waɗannan hanyoyin haɗin yakamata a ba role="button"su don isar da manufar su daidai ga fasahar taimako kamar su. masu karanta allo.

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

Maɓallin fayyace

Kuna buƙatar maɓalli, amma ba manyan launukan bangon da suke kawowa ba? Maye gurbin tsoffin azuzuwan gyare-gyare tare da .btn-outline-*waɗanda don cire duk hotunan bango da launuka akan kowane maɓalli.

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

Girman girma

Kuna son manyan maɓalli ko ƙarami? Ƙara .btn-lgko .btn-smdon ƙarin girma.

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

Ƙirƙirar maɓallan matakin toshe-waɗanda ke faɗin faɗin iyaye-ta ƙara .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>

Jihar mai aiki

Maɓallai za su bayyana a danna (tare da bango mai duhu, iyakar duhu, da inuwar saiti) lokacin aiki. Babu buƙatar ƙara aji zuwa <button>s yayin da suke amfani da ajin ƙididdiga . Koyaya, har yanzu kuna iya tilasta bayyanar mai aiki iri ɗaya tare da .active(kuma haɗa aria-pressed="true"sifa) idan kuna buƙatar kwafin jihar ta hanyar shirye-shirye.

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

Jihar naƙasassu

Sanya maɓallan su zama marasa aiki ta ƙara disabledsifa ta boolean zuwa kowane <button>abu.

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

Maɓallan da aka kashe ta amfani da <a>kashi sun ɗan bambanta:

  • <a>s ba sa goyan bayan disabledsifa, don haka dole ne ka ƙara .disabledajin don ganin ya zama naƙasasshe.
  • Wasu salon abokantaka na gaba an haɗa su don kashe duk pointer-eventsakan maɓallan anga. A cikin masu bincike waɗanda ke goyan bayan wannan kadara, ba za ku ga siginar nakasa ba kwata-kwata.
  • Maɓallan da aka kashe yakamata su haɗa da aria-disabled="true"sifa don nuna yanayin abubuwan fasahar taimako.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add a tabindex="-1" attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.

Button plugin

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Toggle states

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the <button>.

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

Checkbox and radio buttons

Bootstrap’s .button styles can be applied to other elements, such as <label>s, to provide checkbox or radio style button toggling. Add data-toggle="buttons" to a .btn-group containing those modified buttons to enable their toggling behavior via JavaScript and add .btn-group-toggle to style the <input>s within your buttons. Note that you can create single input-powered buttons or groups of them.

The checked state for these buttons is only updated via click event on the button. If you use another method to update the input—e.g., with <input type="reset"> or by manually applying the input’s checked property—you’ll need to toggle .active on the <label> manually.

Lura cewa maɓallan da aka riga aka bincika suna buƙatar ka ƙara .activeajin da hannu zuwa shigarwar <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Hanyoyin

Hanya Bayani
$().button('toggle') Canza yanayin turawa. Yana ba da maɓallin kamannin cewa an kunna shi.
$().button('dispose') Yana lalata maɓalli na wani abu.