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

View more Tutorials:

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

View more Tutorials: