Buttons

Формалардагы, диалогдордогу жана башкалардагы аракеттер үчүн 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класс s pointer-events: noneшилтемесинин функциясын өчүрүүгө аракет кылат . <a>Бул CSS касиети HTML үчүн азырынча стандартташтырылбаганын эске алыңыз, бирок бардык заманбап браузерлер аны колдойт. Кошумчалай кетсек, колдогон браузерлерде да pointer-events: none, клавиатуранын навигациясы эч кандай таасир этпейт, башкача айтканда, клавиатураны көрө албаган колдонуучулар жана жардамчы технологияларды колдонуучулар дагы эле бул шилтемелерди иштете алышат. Коопсуз болуу үчүн, андан тышкары, бул шилтемелерге клавиатуранын фокусун алуудан сактануу aria-disabled="true"үчүн атрибутун кошуңуз жана алардын функцияларын толугу менен өчүрүү үчүн ыңгайлаштырылган JavaScript колдонуңуз.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>

Button плагин

Баскычтар менен көбүрөөк кылыңыз. Башкаруу баскычынын абалы же куралдар панели сыяктуу башка компоненттер үчүн баскычтардын топторун түзүңүз.

Мамлекеттерди которуштуруу

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'тин стилдери белгилөө кутучасын же радио стилинин баскычын которуштурууну камсыз кылуу үчүн s .buttonсыяктуу башка элементтерге колдонулушу мүмкүн . JavaScript аркылуу алардын которуштуруу жүрүм-турумун иштетүү жана баскычтарыңыздын ичиндеги s стилин <label>кошуу data-toggle="buttons"үчүн ошол өзгөртүлгөн баскычтарды камтыганга кошуңуз. Сиз бир гана киргизүү менен иштеген баскычтарды же алардын топторун түзө аларыңызды эске алыңыз..btn-group.btn-group-toggle<input>

Бул баскычтардын текшерилген абалы баскычтагы окуя аркылуу гана жаңыртылат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>

Методдор