in English

Badhamada

U adeegso qaababka badhanka gaarka ah ee Bootstrap ee ficilada foomamka, wada-hadallada, iyo in ka badan oo leh taageerada cabbirro badan, gobollo, iyo in ka badan.

Tusaalooyinka

Bootstrap waxa ku jira dhawr nooc oo badhan hore loo sii qeexay, mid walbana u adeegaya ujeedadiisa semantic, oo leh dhawr waxyaalood oo dheeri ah oo lagu tuuray si loo xakameeyo.

<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>
U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .sr-onlyfasalka dhexdiisa ku qarsoon.

Dami duubista qoraalka

Haddii aadan rabin in qoraalka badhanku duubo, waxaad ku dari kartaa .text-nowrapfasalka badhanka. Gudaha Sass, waxaad dejin kartaa $btn-white-space: nowrapinaad joojiso duubista qoraalka badhan kasta.

badhanka tags

Fasallada .btnwaxaa loogu talagalay in lagu isticmaalo <button>curiyaha. Si kastaba ha ahaatee, waxa kale oo aad isticmaali kartaa fasaladan on <a>ama <input>curiyeyaasha (inkasta oo daalacashada qaarkood laga yaabo in ay adeegsadaan waxyar ka duwan).

Markaad isticmaalayso casharrada badhanka ee <a>walxaha loo isticmaalo kicinta shaqaynta bogga (sida macluumaadka burburaya), halkii lagu xidhi lahaa bogag ama qaybo cusub oo ku dhex jira bogga hadda jira, xidhiidhadan waa in la siiyaa role="button"si ay si habboon ugu gudbiyaan ujeedadooda teknoolajiyada caawinta sida akhristayaasha shaashadda.

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

Badhamada dulucda

Ma u baahan tahay badhan, laakiin maaha midabada asalka ah ee culus ee ay keenaan? Ku beddel fasalada wax ka beddelka caadiga ah .btn-outline-*kuwa si aad uga saarto dhammaan sawirada asalka iyo midabada badhan kasta.

<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>
Qaar ka mid ah qaababka badhanka waxay isticmaalaan midab hore oo khafiif ah, waana in loo isticmaalo kaliya asalka mugdiga ah si loo helo isbarbardhig ku filan.

Cabbirrada

Ma jeceshahay badhamada waaweyn ama ka yar? Ku dar .btn-lgama .btn-smcabbiro dheeraad ah.

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

Abuur badhamada heerka xannibaadda—kuwa ballaca buuxa ee waalidka—adigoo ku daraya .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>

Xaalad firfircoon

Badhamada waxay u muuqan doonaan la riixo marka ay firfircoon yihiin asal madow, soohdin madow, iyo, marka hooska la furo, hooska gasha. Looma baahna in lagu daro fasal <button>s marka ay isticmaalaan fasalka been abuurka ah . Si kastaba ha ahaatee, waxaad weli ku qasbi kartaa isla muuqaalka firfircoon .active(oo ku dar aria-pressed=“true”sifada) haddii aad u baahan tahay inaad si barnaamij ah gobolka ugu soo celiso.

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

Gobolka naafada

Ka dhig badhamada kuwo aan shaqayn adiga oo ku daraya disabledsifada booleenka shay kasta <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>

Badhamada naafada ah ee isticmaalaya <a>curiyaha ayaa u dhaqma xoogaa ka duwan:

  • <a>s ma taageeraan disabledsifada, markaa waa inaad ku darto .disabledfasalka si aad muuqaal ahaan ugu ekaato mid naafo ah.
  • Hababka mustaqbalka-saaxiibtinimo qaarkood ayaa lagu soo daray si loo joojiyo dhammaan pointer-eventsbadhamada barroosinka. browser-yada taageera hantidaas, kuma arki doontid cursorka naafada ah gabi ahaanba.
  • Badhamada naafada ah ee la isticmaalayaa <a>waa inay ku jiraan aria-disabled="true"sifada tilmaamaysa xaalada curiyaha tignoolajiyada caawinta.
  • Badhamada naafada isticmaalaya <a> waa in aanay ku jirin sifada 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>

Si loo daboolo kiisaska ay tahay inaad ku hayso hrefsifada isku xidhka naafada, .disabledfasalku wuxuu isticmaalaa pointer-events: noneinuu isku dayo inuu joojiyo shaqada isku xidhka ee <a>s. Ogsoonow in hantida CSS-da aan wali loo habayn HTML, laakiin dhammaan daalacashada casriga ahi way taageeraan. Intaa waxaa dheer, xitaa daalacashada caawiya pointer-events: none, navigation kiiboodhka ayaa weli ah mid aan saameyn ku yeelan, taasoo la macno ah in isticmaalayaasha kiiboodhka ee arka iyo isticmaalayaasha tignoolajiyada caawinta ay wali awood u yeelan doonaan in ay dhaqaajiyaan xiriiriyeyaashan. Si aad u noqoto mid badbaado leh, marka lagu daro aria-disabled="true", sidoo kale ku dar tabindex="-1"sifo xiriiriyeyaashan si aad uga ilaaliso inay helaan diiradda kiiboodhka, oo isticmaal JavaScript-ka caadiga ah si aad u baabi'iso hawshooda gebi ahaanba.

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

Button plugin

Wax badan ku samee badhamada. Xakamaynta badhanka ayaa sheegaysa ama samee kooxo badhamada qaybo badan sida qalabyada.

Beddel gobolada

Ku dar si aad u beddesho xaaladda data-toggle="button"badhanka activeHaddi aad hore u rogrogayso badhanka, waa in aad gacanta ku darto .activefasalka iyo .aria-pressed="true"<button>

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

Sanduuqa hubinta iyo badhamada raadiyaha

Qaababka Bootstrap .buttonwaxaa lagu dabaqi karaa walxaha kale, sida <label>s, si loo bixiyo sanduuqa hubinta ama qaabka raadiyaha ee badhanka beddelka. Ku dar badhamadaas wax laga beddelay si aad awood ugu yeelatid dhaqankooda qallafsan ee JavaScript oo ku dar data-toggle="buttons"qaabka s ku dhex jira badhamadaada. Ogsoonow in aad samayn karto badhammo ku shaqeeya hal-gelin ama kooxo iyaga ka mid ah..btn-group.btn-group-toggle<input>

Xaaladda la hubiyay ee badhamadan waxa kaliya oo lagu cusboonaysiiyaa clickdhacdada badhanka. Haddii aad isticmaasho hab kale si aad u cusboonaysiiso gelinta—tusaale, la <input type="reset">ama adiga oo gacanta ku dabaqaya hantida gelinta checked—waxa aad u baahan doontaa in aad gacanta .activeku <label>shido.

Ogsoonow in badhamada horay loo hubiyay ay uga baahan yihiin inaad gacanta ku darto .activefasalka gelinta <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>

Hababka

Habka Sharaxaada
$().button('toggle') Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.
$().button('dispose') Wuxuu baabi'iyaa badhanka curiyaha.