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-only
fasalka dhexdiisa ku qarsoon.
Dami duubista qoraalka
Haddii aadan rabin in qoraalka badhanku duubo, waxaad ku dari kartaa .text-nowrap
fasalka badhanka. Gudaha Sass, waxaad dejin kartaa $btn-white-space: nowrap
inaad joojiso duubista qoraalka badhan kasta.
badhanka tags
Fasallada .btn
waxaa 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.
<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>
Cabbirrada
Ma jeceshahay badhamada waaweyn ama ka yar? Ku dar .btn-lg
ama .btn-sm
cabbiro 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 disabled
sifada 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 taageeraandisabled
sifada, markaa waa inaad ku darto.disabled
fasalka si aad muuqaal ahaan ugu ekaato mid naafo ah.- Hababka mustaqbalka-saaxiibtinimo qaarkood ayaa lagu soo daray si loo joojiyo dhammaan
pointer-events
badhamada barroosinka. browser-yada taageera hantidaas, kuma arki doontid cursorka naafada ah gabi ahaanba. - Badhamada naafada ah ee la isticmaalayaa
<a>
waa inay ku jiraanaria-disabled="true"
sifada tilmaamaysa xaalada curiyaha tignoolajiyada caawinta. - Badhamada naafada isticmaalaya
<a>
waa in aanay ku jirin sifadahref
.
<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>
Tilmaamaha shaqeynta isku xirka
Si loo daboolo kiisaska ay tahay inaad ku hayso href
sifada isku xidhka naafada, .disabled
fasalku wuxuu isticmaalaa pointer-events: none
inuu 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 active
Haddi aad hore u rogrogayso badhanka, waa in aad gacanta ku darto .active
fasalka 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 .button
waxaa 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 click
dhacdada 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 .active
ku <label>
shido.
Ogsoonow in badhamada horay loo hubiyay ay uga baahan yihiin inaad gacanta ku darto .active
fasalka 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. |