Тугмаҳо

Услубҳои фармоишии тугмаҳои 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>

Печондани матнро ғайрифаъол кунед

Агар шумо нахоҳед, ки матни тугма печонида шавад, шумо метавонед .text-nowrapсинфро ба тугма илова кунед. Дар Sass, шумо метавонед танзим кунед, ки $btn-white-space: nowrapпечонидани матнро барои ҳар як тугма хомӯш кунед.

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

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

Огоҳӣ дар бораи функсияи пайванд

Барои фаро гирифтани ҳолатҳое, ки шумо бояд hrefатрибутро дар истиноди ғайрифаъол нигоҳ доред, .disabledсинф pointer-events: noneбарои ғайрифаъол кардани функсияи истиноди <a>s истифода мебарад. Дар хотир доред, ки ин амволи CSS ҳанӯз барои HTML стандартизатсия нашудааст, аммо ҳама браузерҳои муосир онро дастгирӣ мекунанд. Илова бар ин, ҳатто дар браузерҳое, ки дастгирӣ мекунанд pointer-events: none, паймоиши клавиатура бетаъсир мемонад, яъне корбарони клавиатура ва корбарони технологияҳои ёрирасон метавонанд ин истинодҳоро фаъол созанд. Ҳамин тавр, барои бехатар будан, ба ғайр аз aria-disabled="true", инчунин tabindex="-1"дар ин истинодҳо атрибутро дохил кунед, то онҳо аз гирифтани фокуси клавиатура пешгирӣ кунанд ва JavaScript-и фармоиширо барои хомӯш кардани функсияҳои онҳо комилан истифода баред.

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

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

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

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

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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> 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>

Усулҳо