bokotra

Mampiasà fomba bokotra mahazatra an'ny Bootstrap ho an'ny hetsika amin'ny endrika, fifanakalozan-kevitra, ary maro hafa miaraka amin'ny fanohanana ny habe, fanjakana ary maro hafa.

OHATRA

Ny Bootstrap dia misy karazana bokotra maromaro efa voafaritra mialoha, samy manana ny tanjony manokana, miaraka amin'ny fanampiny vitsivitsy natsipy mba hifehezana bebe kokoa.

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

Atsaharo ny famonosana lahatsoratra

Raha tsy tianao ny bokotra soratra dia azonao atao ny manampy ny .text-nowrapkilasy amin'ny bokotra. Ao amin'ny Sass, azonao atao $btn-white-space: nowrapny manafoana ny famonosana lahatsoratra ho an'ny bokotra tsirairay.

Tags bokotra

Ny .btnkilasy dia natao hampiasaina amin'ny <button>singa. Na izany aza, azonao atao koa ny mampiasa ireo kilasy <a>na <input>singa ireo (na dia mety hampihatra fandikana hafa kely aza ny navigateur sasany).

Rehefa mampiasa kilasin'ny bokotra amin'ny <a>singa ampiasaina hanesorana ny fampiasa ao anaty pejy (toy ny votoaty mirodana), fa tsy mampifandray amin'ny pejy na fizarana vaovao ao anatin'ny pejy ankehitriny, dia tokony omena ireto rohy ireto role="button"mba hampita ny tanjony amin'ny teknolojia manampy toy ny mpamaky efijery.

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

Bokotra misongadina

Mila bokotra, fa tsy ny lokon'ny lamosina mahery vaika entin'izy ireo? Soloy amin'ireo kilasy fanovàna .btn-outline-*mahazatra ireo mba hanesorana ny sary sy loko rehetra amin'ny bokotra rehetra.

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

habe

Mitady bokotra lehibe kokoa na kely kokoa? Ampio .btn-lgna .btn-smhabe fanampiny.

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

Mamorona bokotra haavon'ny sakana—ireo izay mivelatra amin'ny sakan'ny ray aman-dreny iray manontolo—amin'ny fanampiana .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>

Fanjakana mavitrika

Ny bokotra dia hiseho voatsindry rehefa mavitrika miaraka amin'ny fiaviana maizina kokoa, sisintany maizina, ary, rehefa alefa ny aloka, aloka miditra. Tsy ilaina ny manampy kilasy amin'ny <button>s satria mampiasa pseudo-class izy ireo . Na izany aza, mbola azonao atao ny manery ny endrika mavitrika mitovy amin'ny .active(ary ampidiro ny aria-pressed=“true”toetra) raha mila mamerina ny fanjakana amin'ny programa ianao.

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

Fanjakana kilemaina

Ataovy toy ny tsy mavitrika ny bokotra amin'ny fampidirana ny disabledtoetra boolean amin'ny <button>singa rehetra.

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

Ny bokotra kilemaina mampiasa ilay <a>singa dia somary hafa ihany ny fitondrantena:

• <a>s tsy manohana ny disabledtoetra, noho izany dia tsy maintsy ampidirinao ny .disabledkilasy mba hahatonga azy ho kilemaina.
• Misy endrika sariaka amin'ny ho avy ampidirina mba hanesorana ny pointer-eventsbokotra vatofantsika rehetra. Ao amin'ny mpitety tranonkala manohana an'io fananana io dia tsy ho hitanao mihitsy ny cursor kilemaina.
• Ny bokotra kilemaina ampiasaina <a>dia tokony ahitana ny aria-disabled="true"toetra hanondro ny toetran'ilay singa amin'ny teknolojia manampy.
• Ny bokotra kilemaina ampiasaina <a> dia tsy tokony ahitana ny hreftoetra.

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

Fampitandremana momba ny fiasa rohy

Mba handrakofana ireo tranga izay tsy maintsy itazonanao ny hreftoetra amin'ny rohy kilemaina, ny .disabledkilasy dia mampiasa pointer-events: noneny hanandrana manafoana ny fiasan'ny rohy an'ny <a>s. Mariho fa ity fananana CSS ity dia tsy mbola manara-penitra ho an'ny HTML, fa ny navigateur maoderina rehetra dia manohana azy. Fanampin'izany, na dia ao amin'ny mpitety tranonkala manohana aza pointer-events: none, dia mbola tsy misy fiantraikany ny fitetezana kitendry, izany hoe mbola afaka manetsika ireo rohy ireo ny mpampiasa klavier sy ny mpampiasa ny teknolojia mpanampy. Noho izany, mba ho azo antoka, ankoatra ny aria-disabled="true", dia ampidiro ihany koa ny tabindex="-1"toetra iray ao amin'ireo rohy ireo mba hisakanana azy ireo tsy hahazo fifantohana amin'ny fitendry, ary ampiasao ny JavaScript manokana mba hanesorana tanteraka ny fampiasany.

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

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

Toggle fanjakana

Ampio data-toggle="button"mba hanova ny toetry ny bokotra active. Raha toa ianao ka manodina bokotra mialoha dia tsy maintsy ampidirinao tanana ny .activekilasy sy aria-pressed="true" ny <button>.

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

Checkbox sy bokotra radio

Ny fomban'ny Bootstrap .buttondia azo ampiharina amin'ny singa hafa, toy ny <label>s, mba hanomezana ny bokotra checkbox na radio style. Ampio data-toggle="buttons"amin'ny .btn-groupmisy ireo bokotra novaina ireo mba hahafahan'izy ireo mivadika amin'ny alàlan'ny JavaScript ary ampio .btn-group-toggleny <input>s ao anatin'ny bokotrao. Mariho fa afaka mamorona bokotra tokana na vondrona misy azy ireo ianao.

Ny toetra voamarika ho an'ireo bokotra ireo dia havaozina amin'ny alàlan'ny clickhetsika eo amin'ny bokotra. Raha mampiasa fomba hafa hanavaozana ny fampidirana ianao—ohatra, miaraka <input type="reset">na amin'ny fampiharana amin'ny tanana ny checkedfananan'ny fampidirana—dia mila mifindra .activeamin'ny <label>tanana ianao.

Mariho fa ny bokotra voamarika mialoha dia mitaky anao hampiditra tanana ny .activekilasy amin'ny fampidirana <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>

fomba