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ý

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"

<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 synpy wizual görnüşde görkezmek üçin disabledgoşmaly ..disabled
• Geljekdäki dostlukly stilleriň hemmesini pointer-eventslabyr düwmelerinde öçürmek üçin girizilýä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.

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

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