Source

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>
Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .sr-onlykilasy.

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.

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

Ny .disabledkilasy dia mampiasa pointer-events: noneny hanandrana hanaisotra ny fampandehanana rohy an'ny <a>s, saingy tsy mbola manara-penitra io fananana CSS io. 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. Mba ho azo antoka, ampio tabindex="-1"toetra amin'ireo rohy ireo (mba hisakanana azy ireo tsy hahazo fifantohana amin'ny fitendry) ary ampiasao ny JavaScript manokana hanakanana ny fampiasany.

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

FOMBA Description
$().button('toggle') Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.
$().button('dispose') Manimba ny bokotra singa iray.