Bouton
Sèvi ak estil bouton koutim Bootstrap pou aksyon nan fòm, dyalòg, ak plis ankò ak sipò pou plizyè gwosè, eta, ak plis ankò.
Egzanp yo
Bootstrap gen ladan plizyè estil bouton predefini, chak sèvi pwòp objektif semantik li yo, ak kèk siplemantè jete nan pou plis kontwòl.
<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>
Transmèt siyifikasyon nan teknoloji asistans
Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .sr-only
klas la.
Enfim anbalaj tèks
Si ou pa vle tèks bouton an vlope, ou ka ajoute .text-nowrap
klas la nan bouton an. Nan Sass, ou ka mete $btn-white-space: nowrap
enfim anbalaj tèks pou chak bouton.
Tag bouton
Klas .btn
yo fèt pou itilize ak <button>
eleman an. Sepandan, ou ka itilize tou klas sa yo sou <a>
oswa <input>
eleman (menm si kèk navigatè ka aplike yon rann yon ti kras diferan).
Lè w ap itilize klas bouton sou <a>
eleman ki itilize pou deklanche fonksyonalite nan paj la (tankou kontni efondre), olye ke lyen ak nouvo paj oswa seksyon nan paj aktyèl la, yo ta dwe bay lyen sa yo yon role="button"
fason apwopriye transmèt objektif yo nan teknoloji asistans tankou lektè ekran yo.
<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">
Bouton deskripsyon yo
Nan bezwen yon bouton, men se pa koulè background for yo pote? Ranplase klas modifye default yo ak sa .btn-outline-*
yo pou retire tout imaj background ak koulè sou nenpòt bouton.
<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>
Gwosè
Anpenpan bouton ki pi gwo oswa pi piti? Ajoute .btn-lg
oswa .btn-sm
pou gwosè adisyonèl.
<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>
Kreye bouton nivo blòk-sa yo ki kouvri tout lajè yon paran-pa ajoute .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>
Eta aktif
Bouton yo ap parèt peze lè yo aktif ak yon background ki pi fonse, yon fwontyè ki pi fonse, epi, lè lonbraj yo aktive, yon lonbraj insert. Pa gen okenn nesesite pou ajoute yon klas nan <button>
s paske yo itilize yon pseudo-klas . Sepandan, ou ka toujou fòse menm aparans aktif ak .active
(epi enkli aria-pressed=“true”
atribi a) si ou bezwen repwodui eta a pwogramasyon.
<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>
Eta andikape
Fè bouton parèt inaktif lè w ajoute disabled
atribi boolean an nan nenpòt <button>
eleman.
<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>
Bouton andikape lè l sèvi avèk <a>
eleman an konpòte yon ti jan diferan:
<a>
s pa sipòtedisabled
atribi a, kidonk ou dwe ajoute.disabled
klas la pou fè li vizyèlman parèt enfim.- Gen kèk estil zanmitay nan lavni yo enkli pou enfim tout
pointer-events
sou bouton jete lank. Nan navigatè ki sipòte pwopriyete sa a, ou p ap wè kurseur ki enfim nan ditou. - Lè l sèvi avèk bouton ki andikape yo
<a>
ta dwe gen ladanaria-disabled="true"
atribi a pou endike eta a nan eleman nan teknoloji asistans. - Bouton andikape lè l sèvi avèk
<a>
pa ta dwe gen ladanhref
atribi a.
<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>
Lyen fonksyonalite opozisyon
Pou kouvri ka kote ou dwe kenbe href
atribi a sou yon lyen ki andikape, .disabled
klas la itilize pointer-events: none
pou eseye enfim fonksyonalite lyen nan <a>
s. Remake byen ke pwopriyete CSS sa a poko estanda pou HTML, men tout navigatè modèn yo sipòte li. Anplis de sa, menm nan navigatè ki sipòte pointer-events: none
, navigasyon klavye rete pa afekte, sa vle di ke itilizatè klavye ki wè ak itilizatè teknoloji asistans yo ap toujou kapab aktive lyen sa yo. Se konsa, yo dwe an sekirite, anplis de aria-disabled="true"
, enkli tou yon tabindex="-1"
atribi sou lyen sa yo pou anpeche yo resevwa konsantre klavye, epi sèvi ak JavaScript koutim pou enfim fonksyonalite yo nèt.
<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>
Plugin bouton
Fè plis ak bouton. Kontwole eta bouton oswa kreye gwoup bouton pou plis konpozan tankou ba zouti.
Chanje eta yo
Ajoute data-toggle="button"
pou chanje eta bouton an active
. Si w ap chanje yon bouton davans, ou dwe ajoute .active
klas la manyèlman ak aria-pressed="true"
nan <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
Single toggle
</button>
Case ak bouton radyo
Styles Bootstrap .button
yo ka aplike nan lòt eleman, tankou <label>
s, pou bay kaz oswa bouton radyo style baskil. Ajoute data-toggle="buttons"
nan yon .btn-group
ki gen bouton modifye sa yo pou pèmèt konpòtman baskile yo atravè JavaScript epi ajoute .btn-group-toggle
nan style <input>
yo nan bouton ou yo. Remake byen ke ou ka kreye yon sèl bouton opinyon ki mache ak pisans oswa gwoup nan yo.
Eta a tcheke pou bouton sa yo sèlman mete ajou atravè click
evènman sou bouton an. Si w itilize yon lòt metòd pou mete ajou opinyon an—egzanp, avèk <input type="reset">
oswa lè w ap aplike manyèlman checked
pwopriyete opinyon an—w ap bezwen aktive .active
sou la <label>
manyèlman.
Remake byen ke bouton pre-tcheke mande pou ou manyèlman ajoute .active
klas la nan opinyon an <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>
Metòd
Metòd | Deskripsyon |
---|---|
$().button('toggle') |
Baskile pouse eta a. Bay bouton an aparans ke li te aktive. |
$().button('dispose') |
Detwi bouton yon eleman. |