Source

Тугмаҳо

Услубҳои фармоишии тугмаҳои Bootstrap-ро барои амалҳо дар шаклҳо, муколамаҳо ва ғайра бо дастгирии андозаҳои гуногун, штатҳо ва ғайра истифода баред.

Мисолхо

Bootstrap якчанд услубҳои пешакӣ муайяншудаи тугмаҳоро дар бар мегирад, ки ҳар кадоме ба ҳадафҳои семантикии худ хизмат мекунанд ва барои назорати бештар чанд ҷузъҳои иловагӣ гузошта шудаанд.

<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>
Интиқоли маъно ба технологияҳои ёрирасон

Истифодаи ранг барои илова кардани маъно танҳо нишонаи визуалиро таъмин мекунад, ки он ба корбарони технологияҳои ёрирасон, ба монанди экрани хонандагон, интиқол дода намешавад. Боварӣ ҳосил кунед, ки иттилооте, ки бо ранг нишон дода шудааст, ё аз худи мундариҷа (масалан, матни намоён) равшан аст ё тавассути воситаҳои алтернативӣ, ба монанди матни иловагии бо .sr-onlyсинф пинҳоншуда дохил карда мешавад.

Тегҳои тугмаҳо

Дарсҳо .btnтарҳрезӣ шудаанд, ки бо <button>элемент истифода шаванд. Аммо, шумо инчунин метавонед ин синфҳоро дар <a>ё <input>унсурҳо истифода баред (гарчанде ки баъзе браузерҳо метавонанд намоиши каме дигарро истифода баранд).

Ҳангоми истифодаи синфҳои тугмаҳо дар <a>унсурҳое, ки барои фаъол кардани функсияҳои дохили саҳифа истифода мешаванд (масалан, мундариҷаи шикастан), ба ҷои истинод ба саҳифаҳо ё бахшҳои нав дар дохили саҳифаи ҷорӣ, ин истинодҳо бояд дода шаванд, role="button"то ҳадафи онҳо ба технологияҳои ёрирасон ба монанди хонандагони экран.

Пайванд
<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">

Тугмаҳои контур

Ба тугма лозим аст, аммо на рангҳои заминае, ки онҳо меоранд? Синфҳои тағирдиҳандаи пешфарзро бо синфҳо иваз кунед .btn-outline-*, то ҳама тасвирҳо ва рангҳои пасзаминаро дар ҳама гуна тугма нест кунед.

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

Андозаҳо

Тугмаҳои калонтар ё хурдтарро мехоҳед? Илова кунед .btn-lgё .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>

Тугмаҳои сатҳи блокро эҷод кунед - онҳое, ки паҳнои пурраи волидайнро дар бар мегиранд - тавассути илова кардани .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>

Ҳолати фаъол

Ҳангоми фаъол тугмаҳо пахш карда мешаванд (бо замина ториктар, сарҳади ториктар ва сояи дохилшуда). Ба s синф илова кардан лозим нест, <button>зеро онҳо синфи псевдо-синфро истифода мебаранд . Бо вуҷуди ин, шумо ба ҳар ҳол метавонед ҳамон намуди фаъолро маҷбур кунед .active(ва атрибутро дохил кунед 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>

Ҳолати ғайрифаъол

Бо илова кардани disabledатрибути логикӣ ба ягон <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>

Тугмаҳои ғайрифаъол бо истифода аз <a>элемент каме фарқ мекунанд:

  • <a>s атрибутро дастгирӣ намекунад disabled, аз ин рӯ шумо бояд .disabledсинфро илова кунед, то ки он ба таври визуалӣ ғайрифаъол шавад.
  • Баъзе услубҳои барои оянда дӯстона барои хомӯш кардани ҳама pointer-eventsтугмаҳои лангар дохил карда шудаанд. Дар браузерҳое, ки ин амволро дастгирӣ мекунанд, шумо курсори ғайрифаъолро тамоман намебинед.
  • Тугмаҳои ғайрифаъол бояд атрибутро дар бар гиранд, aria-disabled="true"ки ҳолати элементро ба технологияҳои ёрирасон нишон медиҳанд.
<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>

.disabledСинф pointer-events: noneбарои хомӯш кардани функсияи истиноди s истифода мебарад <a>, аммо он амволи CSS ҳанӯз стандартизатсия нашудааст. Илова бар ин, ҳатто дар браузерҳое, ки дастгирӣ мекунанд pointer-events: none, паймоиши клавиатура бетаъсир мемонад, яъне корбарони клавиатура ва корбарони технологияҳои ёрирасон метавонанд ин истинодҳоро фаъол созанд. Пас, барои бехатар будан, tabindex="-1"дар ин истинодҳо атрибут илова кунед (барои пешгирӣ кардани онҳо аз гирифтани фокуси клавиатура) ва JavaScript-и фармоиширо барои хомӯш кардани функсияи онҳо истифода баред.

Васлкунаки тугма

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Ҳолатҳоро иваз кунед

Илова data-toggle="button"барои иваз кардани ҳолати тугма active. Агар шумо тугмаро пешакӣ иваз кунед, шумо бояд .activeсинф ва aria-pressed="true" ба <button>.

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

Қуттии қайд ва тугмаҳои радио

Услубҳои Bootstrap-ро .buttonметавон ба дигар унсурҳо, ба монанди <label>s истифода бурд, то ивазкунии қуттии қайд ё тугмаи сабки радиоро таъмин кунад. Ба data-toggle="buttons"он .btn-groupтугмаҳои тағирёфта илова кунед, то рафтори ивазкунии онҳоро тавассути JavaScript фаъол созед ва .btn-group-toggleба услуби <input>s дар дохили тугмаҳои худ илова кунед. Дар хотир доред, ки шумо метавонед тугмаҳои ягонаи дорои вуруд ё гурӯҳҳои онҳоро эҷод кунед.

Ҳолати тафтишшудаи ин тугмаҳо танҳо тавассути clickрӯйдод дар тугма нав карда мешавад. Агар шумо усули дигарро барои навсозии вуруд истифода баред, масалан, бо <input type="reset">ё тавассути дастӣ татбиқ кардани checkedмоликияти вуруд - ба шумо лозим меояд, .activeки онро <label>дастӣ иваз кунед.

Дар хотир доред, ки тугмаҳои қаблан тафтишшуда аз шумо талаб мекунанд, ки .activeсинфро ба вуруди <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>

Усулҳо

Усул Тавсифи
$().button('toggle') Ҳолати фишорро иваз мекунад. Тугма намуди зоҳириро медиҳад, ки он фаъол шудааст.
$().button('dispose') Тугмаи элементро нест мекунад.