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>

Tekstiň örtügini öçüriň

Düwme tekstiniň örtülmegini islemeýän bolsaňyz, düwmä .text-nowrapsynpy goşup bilersiňiz. Sass-da, $btn-white-space: nowrapher düwme üçin tekst örtügini öçürip bilersiňiz.

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.

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

Düwmeler has garaňky fon, has garaňky araçäk bilen işjeň bolanda we kölegeler açyk bolsa, içerki kölege basylanda peýda bolar. 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”

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

Islendik elemente disabledboolean atributyny goşup, düwmeleri hereketsiz görüň .<button>

<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 synpy wizual görnüşde görkezmek üçin 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.
• Ulanylýan ýapyk düwmeler , kömekçi tehnologiýalara elementiň ýagdaýyny görkezmek üçin atributy <a>öz içine almalydyr .aria-disabled="true"
• Ulanylan ýapyk düwmeler atributy öz içine <a> almaly däldir .href

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

Baglanyşyk funksiýasy

hrefAýratynlygy ýapyk baglanyşykda saklamaly bolýan ýagdaýlary ýapmak üçin .disabledsynp pointer-events: none, baglanyşyk funksiýalaryny öçürmäge synanyşýar <a>. Bu CSS häsiýetiniň entek HTML üçin standartlaşdyrylmandygyny, ýöne häzirki zaman brauzerleriň hemmesiniň muny goldaýandygyny ýadyňyzdan çykarmaň. 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 , bu baglanyşyklara klawiatura fokusyny almazlyk üçin aria-disabled="true"bir aýratynlyk goşuň we işleýşini düýbünden ýapmak üçin ýörite JavaScript ulanyň.tabindex="-1"

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

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

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

Usullar