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>

Kashe rubutun rubutu

Idan ba ka son rubutun maɓallin ya naɗe, za ka iya ƙara .text-nowrapajin zuwa maɓallin. A cikin Sass, zaku iya saita $btn-white-space: nowrapdon musaki rubutun rubutu don kowane maɓalli.

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.

<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 lokacin da suke aiki tare da bango mai duhu, iyaka mai duhu, kuma, lokacin da aka kunna inuwa, inuwar saiti. Babu buƙatar ƙara aji zuwa <button>s yayin da suke amfani da ajin ƙididdiga . Koyaya, har yanzu kuna iya tilasta fitowar mai aiki iri ɗaya tare da .active(kuma haɗa aria-pressed=“true”sifa) idan kuna buƙatar kwafin jihar ta tsari.

<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ɓallin da aka kashe da aka yi amfani da <a>su ya kamata ya haɗa da aria-disabled="true"sifa don nuna yanayin abubuwan fasaha masu taimako.
• Maɓallan da aka kashe da ake amfani da <a> su bai kamata su haɗa da hrefsifa ba.

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

Haɗin aikin haɗin gwiwa

Don rufe shari'o'in da dole ne ka kiyaye hrefsifa akan hanyar haɗin da ba ta da kyau, .disabledajin yana amfani pointer-events: noneda shi don ƙoƙarin kashe aikin haɗin <a>s. Lura cewa har yanzu ba a daidaita wannan kadarorin CSS don HTML ba, amma duk masu bincike na zamani suna goyan bayansa. Bugu da kari, har ma a cikin masu binciken da ke goyan bayan pointer-events: none, kewayawar madannai ya kasance ba shi da tasiri, ma'ana cewa masu amfani da madannai masu gani da masu amfani da fasahar taimako har yanzu za su iya kunna waɗannan hanyoyin haɗin. Don haka don zama lafiya, ban da aria-disabled="true", kuma sun haɗa da tabindex="-1"sifa akan waɗannan hanyoyin haɗin don hana su karɓar mayar da hankali kan madannai, da amfani da JavaScript na al'ada don kashe ayyukansu gaba ɗaya.

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

Maballin plugin

Yi ƙari tare da maɓalli. Maɓallin sarrafawa ko ƙirƙiri ƙungiyoyin maɓalli don ƙarin abubuwan haɗin gwiwa kamar sandunan kayan aiki.

Juyawa jihohi

Ƙara data-toggle="button"don kunna yanayin maɓalli active. Idan kana riga-kafin maɓalli, dole ne ka ƙara .activeajin da hannu da aria-pressed="true" zuwa <button>.

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

Akwatin dubawa da maɓallan rediyo

Za a iya amfani da salon Bootstrap .buttonzuwa wasu abubuwa, kamar <label>s, don samar da akwatin rajistan shiga ko maɓallin maɓallin rediyo. Ƙara data-toggle="buttons"zuwa abubuwan da .btn-groupke ɗauke da waɗannan maɓallan da aka gyara don ba da damar haɓaka halayensu ta JavaScript kuma ƙara .btn-group-togglezuwa salon <input>s ɗin da ke cikin maɓallan ku. Lura cewa zaku iya ƙirƙirar maɓallan shigarwa guda ɗaya ko ƙungiyoyinsu.

Yanayin da aka bincika don waɗannan maɓallan ana sabunta su ne kawai ta hanyar abin da clickya faru akan maɓallin. Idan kun yi amfani da wata hanya don sabunta shigarwar-misali, tare da <input type="reset">ko ta amfani da kayan shigar da hannu da hannu checked-zaku buƙaci kunnawa .activeda <label>hannu.

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

Hanyoyin