Руководство Bootstrap Buttons

Bootstrap Button
Outline buttons
Размер Button
Статусi active & disabled

1. Bootstrap Button

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>

2. Outline buttons

В 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>

3. Размер 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>

4. Статусi active & disabled

.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.