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>

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 (miaraka amin'ny fiaviana maizina, sisintany maizina, ary aloka miditra) rehefa mavitrika. 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 dia tokony ahitana ny aria-disabled="true"toetra hanondro ny toetry ny singa amin'ny teknolojia manampy.

<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" autocomplete="off">
  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 autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

fomba