Начальная загрузка 4 кнопки
Стили кнопок
Bootstrap 4 предоставляет различные стили кнопок:
Пример
<button type="button" class="btn">Basic</button>
<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-info">Info</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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
Классы кнопок можно использовать на элементах <a>, <button>, или
:<input>
Пример
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Почему мы ставим # в атрибуте href ссылки?
Поскольку у нас нет страницы, на которую можно было бы связать его, и мы не хотим получать сообщение «404», мы ставим # в качестве ссылки. В реальной жизни это, конечно, должен быть настоящий URL-адрес страницы «Поиск».
Контур кнопки
Bootstrap 4 предоставляет восемь кнопок контура/границы:
Пример
<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-info">Info</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-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
Размеры кнопок
Используйте .btn-lgкласс для больших кнопок или .btn-smкласс для маленьких кнопок:
Пример
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Кнопки уровня блока
Добавьте класс .btn-block, чтобы создать кнопку уровня блока, которая охватывает всю ширину родительского элемента.
Пример
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Активные/деактивированные кнопки
Кнопка может быть установлена в активное (кажется нажатым) или отключенное (недоступное для нажатия) состояние:
Класс .activeзаставляет кнопку казаться нажатой, а disabledатрибут делает кнопку ненажимаемой. Обратите внимание, что элементы <a> не поддерживают атрибут disabled и поэтому должны использовать .disabledкласс, чтобы он визуально казался отключенным.
Пример
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Кнопки спиннера
Вы также можете добавить «спиннеры» к кнопке, о чем вы узнаете больше в нашем учебном пособии по BS4 Spinners :
Пример
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>