Bootstrap - Группы кнопок: руковод для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в奇妙ный мир групп кнопок Bootstrap. Как ваш добрый сосед по компьютеру, я с радостью проведу вас через это путешествие. Не волнуйтесь, если вы еще ни разу не писали строчки кода – мы начнем с основ и постепенно перейдем к более сложному. Поехали!

Что такое группы кнопок?

Прежде чем мы углубимся в код, давайте поймем, что такое группы кнопок. Представьте, что вы создаете пульт дистанционного управления для телевизора. Вместо того чтобы разбрасывать все кнопки по сторонам, вы grouping аналогичные кнопки вместе. Именно это мы делаем в веб-дизайне с помощью групп кнопок!

Группы кнопок в Bootstrap позволяют нам cluster аналогичные кнопки вместе, создавая более организованный и визуально привлекательный интерфейс. Это как дать вашим кнопкам уютный маленький дом, где они могут жить вместе в гармонии.

Пример

Давайте начнем с простого примера, чтобы размяться:

<div class="btn-group" role="group" aria-label="Basic example">
<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>

Этот код создает группу из трех кнопок с подписями "Слева", "Посередине" и "Справа". Давайте разберем его:

1. Мы оборачиваем наши кнопки в <div> с классом btn-group.
2. Атрибут role="group" помогает экранным readerам понять, что эти кнопки связаны между собой.
3. aria-label предоставляет описание для группы кнопок.
4. Каждый <button> имеет классы btn и btn-primary, которыедают им стилизацию按钮ов Bootstrap.

Когда вы запустите этот код, вы увидите три синие кнопки, тесно сложенные друг с другом, как горох в стручке!

Смешанные стили

Теперь давайте добавим немного остроты. В реальном мире не все кнопки созданы равными. Some более важны, чем другие, и мы можем это показать визуально:

<div class="btn-group" role="group" aria-label="Mixed styles">
<button type="button" class="btn btn-danger">Удалить</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-success">Одобрить</button>
</div>

В этом примере мы используем разные классы цветов Bootstrap:

• btn-danger для красной кнопки "Удалить"
• btn-warning для желтой кнопки "Предупреждение"
• btn-success для зеленой кнопки "Одобрить"

Это создает визуально эффектную группу кнопок, каждая из которых закодирована по цвету для своей функции. Это как светофор для вашего веб-страницы!

Обведенные стили

Иногда вы хотите, чтобы ваши кнопки были немного более сдержанными. Вот где на помощь приходят обведенные стили:

<div class="btn-group" role="group" aria-label="Outlined styles">
<button type="button" class="btn btn-outline-primary">Основной</button>
<button type="button" class="btn btn-outline-secondary">Второстепенный</button>
<button type="button" class="btn btn-outline-info">Инфо</button>
</div>

Используя btn-outline-* вместо btn-*, мы получаем кнопки с закрашенными границами и текстом, но с прозрачным фоном. Они идеальны для тех случаев, когда вы хотите сделать более легкий акцент в вашем дизайне.

Группы флажков и радиокнопок

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

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Флажок 1</label>

<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Флажок 2</label>

<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Флажок 3</label>
</div>

Этот код создает группу из трех кнопок, которые действуют как флажки. Вы можете кликнуть по нескольким кнопкам, и они останутся "нажатыми", пока вы не кликните по ним снова. Это как список дел прямо в вашей группе кнопок!

Панель инструментов

Иногда вам нужно сгруппировать ваши группы кнопок. Вот где на помощь приходит панель инструментов:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">4</button>
<button type="button" class="btn btn-secondary">5</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">6</button>
</div>
</div>

Этот код создает панель инструментов с тремя группами кнопок. Это как организовать ваши кухонные принадлежности – вилки в одном ящике, ложки в другом, и эту одну奇怪的 штуку, которую ваша тетя вам дала, в своем особом месте.

Размеры

Как и люди, кнопки бывают разных размеров. Bootstrap делает легко изменить размер вашей целой группы кнопок:

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-outline-dark">Слева</button>
<button type="button" class="btn btn-outline-dark">Посередине</button>
<button type="button" class="btn btn-outline-dark">Справа</button>
</div>

Добавляя btn-group-lg к контейнеру, мы делаем все кнопки больше. Вы также можете использовать btn-group-sm для smaller кнопок. Это как Золушка – вы можете найти размер, который идеально подходит!

Вложение

Иногда вам нужно группа按钮 внутри группы按钮. Bootstrap вас covered:

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>

<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Выпадающее меню
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Ссылка выпадающего меню</a></li>
<li><a class="dropdown-item" href="#">Ссылка выпадающего меню</a></li>
</ul>
</div>
</div>

Этот код создает группу按钮 с двумя обычными кнопками и кнопкой с выпадающим меню. Это как российские матрешки, но с按钮ами!

Вертикальная variatio

Last but not least, let's turn things on their side with vertical button groups:

<div class="btn-group-vertical" role="group" aria-label="Vertical button 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>
<button type="button" class="btn btn-primary">Кнопка</button>
<button type="button" class="btn btn-primary">Кнопка</button>
</div>

Используя btn-group-vertical вместо btn-group, мы ставим наши按钮ы вертикально. Это идеально подходит для тех случаев, когда вы хотите, чтобы ваши按钮ы образовывали башню вместо линии!

Заключение

И вот мы и добрались до конца, друзья! Мы прошли через страну групп按钮ов Bootstrap, от простых примеров до вертикальных variatio. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими примерами. Смешивайте и сочетайте разные стили, размеры и макеты, чтобы создать группы按钮ов, которые идеально подойдут для ваших проектов.

Веб-разработка – это все о creativit и решении проблем, и группы按钮ов – это только один из многих инструментов, которые у вас есть. Продолжайте учиться, продолжайте программировать и, самое главное, получайте удовольствие! До свидания, счастливого кодирования!

Credits: Image by storyset