Тугмаҳо

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

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

Дарсҳо .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>

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

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

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

Илова 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>

Усулҳо