Как создавать кнопки в Bootstrap: гайд по настройке цветов и размеров
Bootstrap — это фреймворк, набор инструментов для разработки сайтов, включая HTML- и CSS-шаблоны. В этой статье мы расскажем, как создавать всевозможные кнопки. Начнем!
Содержание статьи:
1. Стили кнопок: использование классов
3. Как настроить размер кнопок
5. Состояние кнопок: активная и неактивная
8. Вертикальная группировка кнопок
9. Кнопки с выпадающим списком
Для использования разных стилей кнопок применяются такие классы:
<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>
В коде страницы эти кнопки будут встроены следующим образом:
<!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>
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…
Дедлайн (от англ. deadline — «крайний срок») — это конечная дата стачи проекта или задачи…