Как создавать кнопки в Bootstrap: гайд по настройке цветов и размеров

Сергій Бондаренко

06.09.2021 14:24

Bootstrap — это фреймворк, набор инструментов для разработки сайтов, включая HTML- и CSS-шаблоны. В этой статье мы расскажем, как создавать всевозможные кнопки. Начнем!

Содержание статьи:

1. Стили кнопок: использование классов

2. Кнопки с рамкой

3. Как настроить размер кнопок

4. Широкая кнопка

4.1 Размер широкой кнопки

5. Состояние кнопок: активная и неактивная

6. Кнопка с эффектом загрузки

7. Как добавить группу кнопок

7.1 Размер кнопочной группы

8. Вертикальная группировка кнопок

9. Кнопки с выпадающим списком

10. Выпадающее меню

Стили кнопок: использование классов

Для использования разных стилей кнопок применяются такие классы:

.btn

<button type="button" class="btn">Basic</button>

.btn-default

<button type="button" class="btn btn-default">Default</button>

.btn-primary

<button type="button" class="btn btn-primary">Primary</button>

.btn-success

<button type="button" class="btn btn-success">Success</button>

.btn-info

<button type="button" class="btn btn-info">Info</button>

.btn-warning

<button type="button" class="btn btn-warning">Warning</button>

.btn-danger

<button type="button" class="btn btn-danger">Danger</button>

.btn-link

<button type="button" class="btn btn-link">Link</button>

В коде страницы эти кнопки будут встроены следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Стили Кнопок</h2>
  <button type="button" class="btn">Basic</button>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</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-link">Link</button>      
</div>

</body>
</html>

Классы кнопок могут использоваться c элементами типа <a>, <button> или <input>:

<body>

<div class="container">
  <h2>Варианты кнопок</h2>
  <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">
</div>

</body>

Разумеется, атрибут #, который используется для гипертекстовой ссылки, должен быть заменен на реальную ссылку.

Кнопки с рамкой

Bootstrap позволяет отобразить восемь вариантов кнопок с обводкой/рамкой.

Код для кнопки Primary:

<button type="button" class="btn btn-outline-primary">Primary</button>

Код для кнопки Secondary:

<button type="button" class="btn btn-outline-secondary">Secondary</button>

Код для кнопки Success:

<button type="button" class="btn btn-outline-success">Success</button>

Код для кнопки Info:

<button type="button" class="btn btn-outline-info">Info</button>

Код для кнопки Warning:

<button type="button" class="btn btn-outline-warning">Warning</button>

Код для кнопки Danger:

<button type="button" class="btn btn-outline-danger">Danger</button>

Код для кнопки Dark:

<button type="button" class="btn btn-outline-dark">Dark</button>

Код для кнопки Light:

<button type="button" class="btn btn-outline-light text-dark">Light</button>

Давайте посмотрим, как все варианты кнопок встроены в страницу:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Кнопки с обводкой</h2>
  <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>
</div>

</body>
</html>

Как настроить размер кнопок

Размер кнопок настраивается при помощи класса .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-lg btn-block">Широченная кнопка</button>

Размер широкой кнопки

У широких кнопок тоже можно регулировать размер с помощью класса .btn-lg для больших и .btn-sm — для маленьких.

<body>

<div class="container">
  <h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-block">Button 2</button>
  <br>
  
  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-lg btn-block">Button 2</button>
  <br>
  
  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-success btn-sm btn-block">Button 2</button>
</div>

</body>

Состояния кнопок: активная и неактивная

Кнопка может быть установлена в активное состояние (выглядит нажатой), а также может быть неактивной, то есть запрещенной для нажатия.

Класс .active заставляет кнопку казаться нажатой, а атрибут disabled делает кнопку неактивной. Обратите внимание, что элементы <a> не поддерживают атрибут disabled.

Чтобы кнопка выглядела запрещенной к нажатию нужно использовать класс .disabled.

<body>

<div class="container">
  <h2>Состояния кнопок</h2>
  <button type="button" class="btn btn-primary active">Активная кнопка</button>
  <button type="button" class="btn btn-primary" disabled>Запрещенная кнопка</button>
</div>

</body>

Кнопка с эффектом загрузки

Для отображения эффекта загрузки на кнопки помещаются анимированные изображения — так называемые спиннеры.

<body>

<div class="container">
  <h2>Кнопки со спиннером</h2>
  <p>Варианты оформления:</p>
                                        
  <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>
    Старт..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Загрузка..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Запуск..
  </button>
</div>

</body>

Как добавить группу кнопок

Несколько кнопок для удобства объединяются в группу. Для ее создания используйте элемент <div> с классом .btn-group.

<body>

<div class="container">
  <h2>Кнопочная группа</h2>
  <p>Класс .btn-group создает кнопочную группу:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Книги</button>
    <button type="button" class="btn btn-primary">Статьи</button>
    <button type="button" class="btn btn-primary">Истории</button>
  </div>
</div>

</body>

Размер кнопочной группы

Вместо применения размеров к каждой кнопке в группе используйте класс .btn-group-lg для большой группы кнопок или .btn-group-sm — для небольшой.

<body>

<div class="container">
  <h2>Размеры кнопочных групп</h2>
  <p>Добавьте класс .btn-group- *, чтобы задать размер всех кнопок в группе кнопок.</p>
  <h3>Большие кнопки:</h3>
  <div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Книги</button>
    <button type="button" class="btn btn-primary">Статьи</button>
    <button type="button" class="btn btn-primary">Истории</button>
  </div>
  <h3>Обычные кнопки:</h3>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Книги</button>
    <button type="button" class="btn btn-primary">Статьи</button>
    <button type="button" class="btn btn-primary">Истории</button>
  </div>
  <h3>Маленькие кнопки:</h3>
  <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Книги</button>
    <button type="button" class="btn btn-primary">Статьи</button>
    <button type="button" class="btn btn-primary">Истории</button>
  </div>
</div>

</body>

Вертикальная группировка кнопок

Класс .btn-group-vertical группирует кнопки вертикально.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Книги</button>
  <button type="button" class="btn btn-primary">Статьи</button>
  <button type="button" class="btn btn-primary">Истории</button>
</div>

Кнопки с выпадающим списком

Вариант группы кнопок с выпадающим списком:

<body>

<div class="container">
  <h2>Вложенные группы кнопок</h2>
 
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Книги</button>
    <button type="button" class="btn btn-primary">Статьи</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Истории
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Смешные</a>
        <a class="dropdown-item" href="#">Грустные</a>
      </div>
    </div>
  </div>
</div>

</body>

Выпадающее меню

Отдельное выпадающее меню:

<body>

<div class="btn-group">
  <button type="button" class="btn btn-primary">Истории</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Истории</a>
    <a class="dropdown-item" href="#">Грустные</a>
  </div>
</div>

</body>

Вертикальная группа кнопок с выпадающим списком:

<body>

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Камеры</button>
  <button type="button" class="btn btn-primary">Наушники</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Гаджеты
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Планшеты</a>
      <a class="dropdown-item" href="#">Смартфоны</a>
    </div>
  </div>
</div>

</body>