Руководство Bootstrap Buttons
View more Tutorials:
Bootstrap построил некоторые классы Css, чтобы создать Button, с некоторыми стилями (style) для разных целей контекста. При этом главным классом является .btn, и некоторые дополнительные классы для настройки цвета, размера, статуса...
Simple Button
<button class="btn">Simple Button</button>
Есть некоторые дополнительные классы Css для настройки цвета Button, или сделать чтобы Button отображался как Link. Вы можете использовать его в разных контекстах.
- btn-primary
- btn-secondary
- btn-success
- btn-danger
- btn-warning
- btn-info
- btn-light
- btn-dark
- btn-link
button-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Button Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Классы .btn, .btn-* смоделированы для тегов (tag) <button>, но вы можете использовать их для тегов <a>, <input>, <div>, <span>. Несмотря на то, что они могут быть отображены по разному на разныз браузерах.
Примечание: Если вы хотите создать Button с другими тегами помимо <button>, вам стоит использовать еще один атрибут role="button", данный атрибут (attribute) является полезной подсказкой для таких устройств как Screen Reader (Устройство чтения экрана для людей с ограниченными возможностями зрения).
<a class="btn btn-primary m-1" href="#" role="button">Button (A tag)</a> <button class="btn btn-primary m-1" type="submit">Button (Button tag)</button> <div class="btn btn-primary m-1" role="button">Button (Div tag)</div> <span class="btn btn-primary m-1" role="button">Button (Span tag)</span>
В Bootstrap, по умолчанию Button все имеют фоновый цвет. Если вы хотите иметь простой Button, без фонового цвета, исопьзуйте классы .btn-outline-*.
outline buttons
<button class="btn btn-outline-primary">Primary</button> <button class="btn btn-outline-secondary">Secondary</button> <button class="btn btn-outline-success">Success</button> <button class="btn btn-outline-danger">Danger</button> <button class="btn btn-outline-warning">Warning</button> <button class="btn btn-outline-info">Info</button> <button class="btn btn-outline-light">Light</button> <button class="btn btn-outline-dark">Dark</button>
По умолчанию Button в Bootstrap имеют средний размер (Medium). Используйте класс .btn-sm если вы хотите получить Button с меньшим размером, используйте класс .btn-lg если вы хотите получить Button с большим размером.
<button class="btn btn-sm">Small Size .btn-sm</button> <button class="btn btn-md">Medium Size .btn-md (Default)</button> <button class="btn">(Default)</button> <button class="btn btn-lg">Large Size .btn-lg</button>
Класс .btn-block помогает ширине Button заполнять (fill) ширину родительского элемента.
<button class="btn btn-primary btn-block">.btn-block</button> <button class="btn btn-block btn-warning">.btn-block</button>
.active
Используйте класс .active чтобы Button имел статус, как будто он активен (active). Для Bootstrap один Button в статусе "active" будет иметь цвет темнее, по сравнению с самим собой в нормальном статусе.
Вы можете смотреть изображение ниже, чтобы увидеть разницу между Button в активном статусе и им же в нормальном статусе:
.active
<button class="btn btn-primary active">.btn-primary .active</button> <button class="btn btn-primary">.btn-primary</button> <br> <button class="btn btn-outline-primary active">.btn-outline-primary .active</button> <button class="btn btn-outline-primary">.btn-outline-primary</button> <br> <button class="btn btn-success active">.btn-succes .active</button> <button class="btn btn-success">.btn-succes</button> <br> <button class="btn btn-outline-success active">.btn-outline-success .active</button> <button class="btn btn-outline-success">.btn-outline-success</button>
.disabled
Использовать класс .disabled чтобы отключить Button, пользователь не сможеть взаимодействовать с данным Button.
.disabled
<button class="btn btn-primary disabled">.btn-primary .disabled</button> <button class="btn btn-primary">.btn-primary</button> <br> <button class="btn btn-outline-primary disabled">.btn-outline-primary .disabled</button> <button class="btn btn-outline-primary">.btn-outline-primary</button> <br> <button class="btn btn-success disabled">.btn-succes .disabled</button> <button class="btn btn-success">.btn-succes</button> <br> <button class="btn btn-outline-success disabled">.btn-outline-success .disabled</button> <button class="btn btn-outline-success">.btn-outline-success</button>
