Для стилизации кнопки в Bootstrap используйте класс .btn и через пробел необходимый стиль кнопки. Например, class="btn btn-primary" применяется для основных кнопок.
Ниже показан пример использования различных стилей кнопок в 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-info">Info</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</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>
Элементы кнопок в Bootstrap
Стили кнопок Bootstrap 4 предназначены для использования с элементом <button>, но их также можно применять к элементам <input> и <a>. Внешне они будут выглядеть одинаково.
Вы также можете применять стили кнопок к элементу <label> при работе с флажками и переключателями (подробнее об этом далее).
<a class="btn btn-primary" href="#" role="button">Anchor</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">
Прозрачные кнопки с границей (бордером)
Для того, чтобы создать прозрачную кнопку с бордером в 1 пиксель соответствующего цвета, используйте класс .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-info">Info</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>
Размер кнопок в Bootstrap
Вы можете указать размер кнопки классами .btn-lg и .btn-sm. Первый сделает кнопку больше, второй меньше. Разместите их в дополнение к другим классам кнопок. Например:
<button type="button" class="btn btn-success btn-sm">Small</button> <button type="button" class="btn btn-success">Default</button> <button type="button" class="btn btn-success btn-lg">Large</button>
Блочные кнопки (кнопки на всю ширину)
Блочная кнопка охватывает всю ширину своего родительского блока. Вы можете создать блочную кнопку, добавив класс .btn-block.
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
Отключенные кнопки
Bootstrap предоставляет определенные стили для отключенного состояния disabled (а также для других состояний, например, активных).
Если вам нужно отключить кнопку, которая использует элемент <a>, вы так же можете использовать класс .disabled.
<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a></p> <p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button></p> <p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element"></p>
Флажки (чекбоксы) и радио кнопки
Вы можете применить стили кнопок Bootstrap к радио кнопкам и флажкам, чтобы обеспечить возможность переключения между ними.
Для этого вложите флажки или переключатели в элемент <label>, к которому применен соответствующий класс кнопок.
Кроме того, вложите элементы в элемент .btn-group, к которому также применены data-toggle="buttons".
Флажки
Пример использования стиля button с флажками:
<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> Кнопка 1 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="option2" autocomplete="off"> Кнопка 2 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="option3" autocomplete="off"> Кнопка 3 </label> </div>
Радио кнопки
Так же, это работает и для переключателей (радио кнопок):
<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> Переключатель 1 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off"> Переключатель 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off"> Переключатель 3 </label> </div>
Оставить комментарий