Основы Bootstrap4

Группы кнопок Bootstrap4

　　 В предыдущей главе вы узнали, как создавать различные типы отдельных кнопок и как их изменять с помощью предварительно определенных классов. Однако, Bootstrap также позволяет комбинировать вместе несколько кнопок в одной строке с помощью компонента группы кнопок.

Bootstrap 4 позволяет нам размещать кнопки в одной строке, добавляя класс .btn-group к элементу <div>, чтобы создать группу кнопок.

Чтобы создать группу кнопок, достаточно обернуть ряд кнопок с классом .btn в элемент и применить класс .btn-group, как показано в следующем примере:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Группа кнопок</h2>
　　<p>Класс .btn-group используется для создания группы кнопок:</p>
　　<div class="btn-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">Sony</button>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Совет: Мы можем использовать классы .btn-group-lg|sm для настройки размера группы кнопок.

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Размер группы кнопок</h2>
　　<p>Мы можем использовать классы .btn-group-lg|sm|xs для настройки размера группы кнопок.</p>
　　<h2>Большие кнопки:</h2>
　　<div class="btn-group btn-group-lg">
　　　　<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">Sony</button>
　　</div>
　　<h2>Default кнопки:</h2>
　　<div class="btn-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">Sony</button>
　　</div>
　　<h2>Маленькие кнопки:</h2>
　　<div class="btn-group btn-group-sm">
　　　　<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">Sony</button>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Вы можете использовать класс .btn-group-vertical для создания вертикальной группы кнопок:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Вертикальная группа кнопок</h2>
　　<p>Вы можете использовать класс .btn-group-vertical для создания вертикальной группы кнопок:</p>
　　<div class="btn-group-vertical">
　　　　<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">Sony</button>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

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

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Встроенная группа кнопок</h2>
　　<p>Настройка выпадающего меню в группе кнопок:</p>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　Sony
　　　　　　</button>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Tablet</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Smartphone</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Раздельные кнопки с выпадающим меню

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Раздельные кнопки с выпадающим меню</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Sony</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="#">Tablet</a>
　　　　　　<a　class="dropdown-item"　href="#">Smartphone</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Вертикальная группа кнопок и выпадающее меню</h2>
　　<div class="btn-group-vertical">
　　　　<button type="button" class="btn btn-primary">Apple</button>
　　　　<button type="button" class="btn btn-primary">Samsung</button>
　　　　<div class="btn-group">
　　　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　　　Sony
　　　　　　</button>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Tablet</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Smartphone</a>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Создание кнопочной панели

Вы также можете комбинировать наборы кнопок, чтобы создать более сложные компоненты, такие как кнопочная панель. Чтобы создать кнопку панели, просто упакуйте набор кнопок в

элементах, затем.btn-toolbar applies classes to it, as shown in the following example:

Пример

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　　　<link　rel="stylesheet"　href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="bs-example">
　　　　<div class="btn-group mr-2">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-font"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-bold"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-italic"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div class="btn-group mr-2">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-left"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-center"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-right"></i>
　　　　　　　　</button>
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-align-justify"></i>
　　　　　　　　</button>
　　　　</div>
　　　　<div class="btn-group">
　　　　　　　　<button type="button" class="btn btn-primary">
　　　　　　　　　　　　<i class="fa fa-undo"></i>
　　　　　　　　</button>
　　　　</div>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

Результаты такие:

Бadge Bootstrap4 Кнопки Bootstrap4