Source

Düwmeler

“Bootstrap” -yň ýörite düwme görnüşlerini formalarda, gepleşiklerde we başga-da köp ululyk, ştat we ş.m. goldaw bilen ulanyň.

Mysallar

“Bootstrap” birnäçe öňünden kesgitlenen düwme stilini öz içine alýar, hersiniň öz semantik maksadyna hyzmat edýär we has köp gözegçilik üçin birnäçe goşmaçalar goýulýar.

<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>
Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.

Düwme bellikleri

Sapaklar element .btnbilen ulanmak üçin niýetlenendir . <button>Şeýle-de bolsa, bu synplary <a>ýa -da <input>elementleri ulanyp bilersiňiz (käbir brauzerler birneme üýtgeşik terjime edip bilerler).

<a>Häzirki sahypadaky täze sahypalara ýa-da bölümlere baglanyşyk däl-de, sahypanyň işlemegine itergi berýän elementler boýunça düwme sapaklaryny ulananyňyzda (bu mazmunyň çökmegi ýaly), bu baglanyşyklara role="button"kömekçi tehnologiýalar ýaly maksatlaryna laýyk gelmek üçin berilmelidir. ekran okyjylary.

Baglanyşyk 
<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">

Çyzgy düwmeleri

Bir düwmä mätäç, ýöne getirýän uly fon reňkleri dälmi? .btn-outline-*Islendik düwmedäki ähli fon suratlaryny we reňklerini aýyrmak üçin deslapky üýtgediji synplary çalyşyň .

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

Ölçegler

Uly ýa-da kiçi düwmeler barmy? Goşmaça ululyklar üçin .btn-lggoşuň ..btn-sm

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

Goşup, ene-atanyň doly giňligini öz içine alýan blok derejeli düwmeleri dörediň .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>

Işjeň ýagdaý

Işledilende düwmeler basylýar (has garaňky fon, has garaňky araçäk we kölege kölegesi bilen). Seasama synp ulanýandyklary üçin s- a synp goşmagyň zerurlygy ýok<button> . Şeýle-de bolsa, döwleti programma taýdan köpeltmeli bolsaňyz , şol bir işjeň görnüşi .active(we atributyny goşuň) mejbur edip bilersiňiz.aria-pressed="true"

Esasy baglanyşyk Baglanyşyk 
<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>

Maýyp ýagdaý

disabledDüwmeleri islendik <button>elemente boolean atributyny goşup hereketsiz görüň .

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

Elementi ulanýan ýapyk düwmeler <a>birneme üýtgeşik hereket edýär:

  • <a>s atributy goldamaýar , şonuň üçin wizual görnüşde görünmek üçin synpy disabledgoşmaly ..disabled
  • Geljekdäki dostlukly stilleriň hemmesi pointer-eventslabyr düwmelerinde öçürilýär. Şol emlägi goldaýan brauzerlerde, ýapyk kursory asla görmersiňiz.
  • Öçürilen düwmeler aria-disabled="true", kömekçi tehnologiýalara elementiň ýagdaýyny görkezmek üçin atributy öz içine almalydyr.
Esasy baglanyşyk Baglanyşyk 
<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>

Synp s baglanyşyk funksiýasyny .disabledöçürmäge pointer-events: nonesynanyşýar <a>, ýöne CSS emlägi entek standartlaşdyrylanok. Mundan başga-da, goldaýan brauzerlerde-de pointer-events: noneklawiatura nawigasiýasy täsirsiz galýar, ýagny görýän klawiatura ulanyjylary we kömekçi tehnologiýalary ulanýanlar bu baglanyşyklary işjeňleşdirip bilerler. Howpsuz bolmak üçin tabindex="-1"bu baglanyşyklara bir aýratynlyk goşuň (klawiaturanyň ünsüni almazlygy üçin) we işlemegini ýapmak üçin ýörite JavaScript ulanyň.

Düwme plugin

Düwmeler bilen has köp iş ediň. Dolandyryş düwmesi gurallar paneli ýaly has köp komponentler üçin düwmeler toparyny görkezýär ýa-da döredýär.

Toggle aýdýar

data-toggle="button"Bir düwmäniň ýagdaýyny üýtgetmek üçin goşuň active. Bir düwmäni öňünden çalyşýan bolsaňyz, .activesynpy we .aria-pressed="true"<button>

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

Bellik gutusy we radio düwmeleri

“Bootstrap” -yň stilleri bellik gutusyny ýa-da radio stiliniň düwmesini üýtgetmek üçin s .buttonýaly beýleki elementlere ulanylyp bilner . JavaScript arkaly üýtgetmek häsiýetini üpjün etmek we düwmeleriňizdäki stilleri goşmak üçin <label>şol data-toggle="buttons"üýtgedilen düwmeleri öz içine alyň. Singleeke-täk giriş düwmeleri ýa-da olaryň toparlaryny döredip biljekdigiňize üns beriň..btn-group.btn-group-toggle<input>

Bu düwmeleriň barlanylan ýagdaýy diňe düwmedäki waka arkaly täzelenýärclick . Girişi täzelemek üçin başga bir usul ulansaňyz, meselem, <input type="reset">giriş emlägi bilen ýa-da el bilen ulanmak bilen, el bilen checkedaçmaly bolarsyňyz ..active<label>

Öňünden barlanan düwmeler .active, girişiň synpyny el bilen goşmagyňyzy talap edýär <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>

Usullar

Usul Düşündiriş
$().button('toggle') Toggles ýagdaýy basýar. Düwmä işjeňleşdirilen görnüşini berýär.
$().button('dispose') Bir elementiň düwmesini ýok edýär.