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

Журналіст

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

Воркшоп "PR + AI: Рисерч, Креатив, Контент" від Skvot.

Навчіться адаптувати потенціал АІ під задачі піарника. Корисні тулзи, яким можна делегувати рутину, генерувати свіжі ідеї для контенту і піар-стратегій.

Дізнатись більше

<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

Онлайн-курс "Режисура та візуальний сторітелінг" від Skvot.

Перетворюй свої ідеї на сильні історії в рекламі, кліпах чи кіно Досвідом ділиться режисер, продюсер та власник продакшену, який 10+ років у професії.

Детальніше про курс

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

Онлайн-курс "Проджект-менеджер в ІТ" від Laba.

Навчіться запускати, контролювати й успішно реалізовувати ІТ-проєкти. Пройти весь шлях проєктного управління на реальному кейсі вам допоможе PMD із 19-річним досвідом в ІТ.

Детальніше про курс

Код для кнопки 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>

Курс UI/UX дизайну від Mate academy.

На курсі ви навчитесь створювати інтуїтивно зрозумілі та привабливі інтерфейси вебсайтів і застосунків. Ви також освоїте ключові принципи дизайну та дізнаєтесь як виділятися на ринку. А ми вас не лише навчимо, а й працевлаштуємо. Сертифікат теж буде!

Дізнатися більше про курс

Код для кнопки 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 — для небольшой.

Онлайн-інтенсив "Як створити рекомендаційну модель за 2 дні" від robot_dreams.

Ви пройдете етапи вибору, навчання, оцінки рекомендаційної моделі для електронної бібліотеки та отримаєте індивідуальний фідбек від лекторки.

Приєднатись до інтенсиву

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

Онлайн-курс "PR Basis" від Skvot.

Дізнайся нюанси різних сфер і обрери свою.Як результат — матимеш стратегію бренду у своєму портфоліо та зможеш стартувати в піарі. Інсайтами ділиться лекторка, яка має 9+ років досвіду.

Детальніше про курс

Главная > Веб-разработка > Как создавать кнопки в Bootstrap: гайд по настройке цветов и размеров

Bootstrap кнопка

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

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

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

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

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

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

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

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

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

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

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

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

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

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: