Руководство Bootstrap Button Group
1- Bootstrap Button Group
Обернуть список Bootstrap Button (.btn) в один .btn-group, чтобы создать Button Group. Класс .btn-group сделает так, чтобы кнопки располагались близко друг к другу на одной строке.<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Для <div class="btn-group"> вам стоит использовать атрибуты role, aria-label, несмотря на то, что это необязательно, но этот код используется такими устройствам, как Screen Reader.
Полный пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Button Group</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h4 class="mb-4">Wrap series of .btn(s) in .btn-group</h4>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
<h4 class="mt-5 mb-4">Serials of .btn(s)</h4>
<div>
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
2- Вертикальный Button Group
Используйте класс .btn-group-vertical, чтобы создать вертикальный Button Group.<div class="btn-group btn-group-vertical" role="group" aria-label="Vertical Button Group">
<button type="button" class="btn btn-secondary">Top</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Bottom</button>
</div>
{banner_google}3- Button Group с Dropdown
Dropdown Menu так же могут участвовать в одном Button Group.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Button Group</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h4 class="mb-4">Button Group with Dropdown Menu</h4>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Sony
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smart Phone</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
4- Bootstrap Button Toolbar
Обернуть список .btn-group в одном .btn-toolbar и вы получите сложную панель инструментов. Пример на изображении ниже:<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="Clipboard group">
<button type="button" class="btn btn-primary">Copy</button>
<button type="button" class="btn btn-primary">Paste</button>
<button type="button" class="btn btn-primary">Cut</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Styles group">
<button type="button" class="btn btn-secondary">Font</button>
<button type="button" class="btn btn-secondary">Size</button>
</div>
<div class="btn-group" role="group" aria-label="Source group">
<button type="button" class="btn btn-success">Source</button>
</div>
</div>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
За что отвечает атрибут dir в HTML