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>

Активний стан

Коли кнопки активні, вони виглядатимуть натиснутими (з темнішим фоном, темнішою рамкою та вставною тінню). Немає необхідності додавати клас до <button>s, оскільки вони використовують псевдоклас . Однак ви все ще можете примусово створити такий самий активний вигляд за допомогою .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, щоб спробувати вимкнути функцію посилання <a>s, але ця властивість 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') Знищує кнопку елемента.