Кнопки в Bootstrap 4

Bootstrap 4 надає дев'ять стилів для кнопок, кожен з цих стилів служить різним семантичним цілям. Для стилізації кнопки використовуйте клас .btn, а потім стиль. Наприклад, class="btn btn-primary" призводить до головної кнопки.

От код, який використовується для всіх дев'яти стилів кнопок.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-primary">Головна</button> <button type="button" class="btn btn-secondary">Вторинна</button> <button type="button" class="btn btn-info">Інформація</button> <button type="button" class="btn btn-success">Успіх</button> <button type="button" class="btn btn-warning">Попередження</button> <button type="button" class="btn btn-danger">Небезпека</button> <button type="button" class="btn btn-light">Світла</button> <button type="button" class="btn btn-dark">Темна</button> <button type="button" class="btn btn-link">Посилання</button>

Елементи кнопок

Стилі кнопок Bootstrap 4 орієнтовані на використання з елементом <button>, але їх також можна застосовувати до елементів <input> та <a>. Ви також можете використовувати стилі кнопок до елемента <label> під час роботи з перемикачами та прапорцями (докладніше про це нижче).

< ;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <a class="btn btn-primary" href="#" role="button">Посилання</a> <button class="btn btn-primary" type="submit">Кнопка</button> <input class="btn btn-primary" type="button" value="Ввести"> <input class="btn btn-primary" type="submit" value="Надіслати">

При використанні елемента <a> як кнопка (наприклад, при роботі з клієнтським скриптом, а не для переходу на іншу адресу) використовуйте role="button".

Рекомендується використовувати елемент <button> при можливості, оскільки він найкраще узгоджений у всіх браузерах.

Контурні кнопки

Використовуйте класи .btn-outline-* для додавання семантичного кольору лише до контуру.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-outline-primary">Головна</button> <button type="button" class="btn btn-outline-secondary">Вторинна</button> <button type="button" class="btn btn-outline-info">Інформація</button> <button type="button" class="btn btn-outline-success">Успіх</button> <button type="button" class="btn btn-outline-warning">Попередження</button> <button type="button" class="btn btn-outline-danger">Небезпека</button> <button type="button" class="btn btn-outline-light">Світла</button> <button type="button" class="btn btn-outline-dark">Темна</button>

Для кнопок-посилань немає контуру (іншими словами, класу .btn-outline-link не існує).

Розмір кнопки

Ви можете вказати розмір кнопки через класи .btn-lg та .btn-sm. Додайте їх до інших класів кнопок, на кшталт цього.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-success btn-sm">Маленька</button> <button type="button" class="btn btn-success">За замовчуванням</button> <button type="button" class="btn btn-success btn-lg">Велика</button>

Блочні кнопки

Блочна кнопка займає всю ширину свого батька . Ви можете створити блокову кнопку, додавши клас .btn-block.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <button type="button" class="btn btn-danger btn-lg btn-block">Блочна кнопка</button>

Відключені кнопки

Bootstrap пропонує певні стилі для стану disabled (а також для інших станів, наприклад, active). Якщо потрібно вимкнути кнопку, яка використовує елемент <a>, ви можете додати клас .disabled.

Не потрібно робити це на кнопках, зроблених через елементи <button> та <input> ;. Щоб вимкнути такі кнопки, скористайтеся стандартним атрибутом disabled у HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p><a href="#" class="btn btn-primary btn-lg disabled" role="button">Елемент a</a></p> <p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">Елемент button</button></p> <p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="Елемент input"></p>

Bootstrap використовує pointer-events: none для відключення кнопок-посилань (таких кнопок , які створені за допомогою елемента <a>). Це працює здебільшого, але не у всіх. Отже, ви також повинні використовувати JavaScript, щоб відключити функціональність кнопок-посилань (або при можливості просто скористатися елементом <button>).

Перемикачі та прапорці

Ви можете застосувати стилі кнопок Bootstrap 4 до перемикачів та прапорців для створення можливості перемикання. Для цього покладіть перемикачі або прапорці в елемент <label>, до якого застосовується відповідний клас кнопок. Крім цього, покладіть <label> в елемент із класом .btn-group, до якого застосовується data-toggle="buttons".

Перемикачі

Натисніть на кнопки, щоб побачити ефект перемикання.

< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" name="options" id="option1" autocomplete="off" checked> Черевики
</label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="option2" autocomplete="off"> Взуття
</label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="option3" autocomplete="off"> Ноги
</label>
</div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Прапорки

Натисніть на кнопки, щоб побачити ефект перемикання.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Черевики
</label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Взуття
</label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Ноги
</label>
</div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>