Bootstrap 4 Buttons - кнопки
Стили кнопок
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>
Размеры кнопок
Bootstrap 4 предоставляет различные размеры кнопок:
Пример
<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">Button 1</button>
Активные/отключенные кнопки
Кнопке может быть присвоено активное (отображаемое нажатие) или отключенное (неинтерактивное) состояние:
Класс .active делает нажатой кнопку, и disabled атрибут делает кнопку ненажатой. Обратите внимание, что элементы < a > не поддерживают отключенный атрибут и поэтому должны использовать .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>