English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник Bootstrap

Плагины Bootstrap

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

Группы кнопок позволяют нескольким кнопкам быть выстроенными в один ряд. Это очень полезно, когда нужно выровнять кнопки. Вы можете использовать Плагин кнопок Bootstrap Добавление опциональных стилей поведения JavaScript для радио и чекбоксов.

Ниже в таблице总结了 некоторые важные классы, предоставляемые Bootstrap для использования с группами кнопок:

КлассОписаниеПример кода
.btn-groupЭтот класс используется для создания базовых групп кнопок. В .btn-group в которой放置一系列带有 class .btn кнопок.
<div>
　　<button type="button">Кнопка1</button>
　　　<button type="button">Кнопка2</button>
</div>
.btn-toolbarЭтот класс помогает объединить несколько div в один div, обычно получая более сложные компоненты.
<div role="toolbar">
　　<div>...</div>
　　<div>...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsЭти классы можно применить к размеру всей группы кнопок, не needing to adjust the size of each button.
<div>...</div>
<div>...</div>
<div>...</div>
.btn-group-verticalЭтот класс позволяет группам кнопок отображаться вертикально, а не горизонтально.
<div>
　　...
</div>

Основные группы кнопок

Ниже приведен пример класса, обсуждаемого в таблице выше .btn-group Использование:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Основные группы кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-default">Кнопка　1</button>
	<button　type="button"　class="btn　btn-default">Кнопка　2</button>
	<button type="button" class="btn btn-default">Кнопка 3</button>
</div>
</body>
</html>
Проверьте, посмотрите <‹/›>

Результаты будут представлены следующим образом:

Панель кнопок

Ниже приведен пример класса, обсуждаемого в таблице выше .btn-toolbar Использование:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - Панель кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-toolbar" role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">Кнопка　1</button>
		<button　type="button"　class="btn　btn-default">Кнопка　2</button>
		<button type="button" class="btn btn-default">Кнопка 3</button>
	</div>
	<div　class="btn-group">
		<button type="button" class="btn btn-default">Кнопка 4</button>
		<button type="button" class="btn btn-default">Кнопка 5</button>
		<button type="button" class="btn btn-default">Кнопка 6</button>
	</div>
	<div　class="btn-group">
		<button type="button" class="btn btn-default">Кнопка 7</button>
		<button type="button" class="btn btn-default">Кнопка 8</button>
		<button type="button" class="btn btn-default">Кнопка 9</button>
	</div>
</div>
</body>
</html>
Проверьте, посмотрите <‹/›>

Результаты будут представлены следующим образом:

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

Ниже приведен пример класса, обсуждаемого в таблице выше .btn-group-* Использование:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Пример Bootstrap - размер группы кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Кнопка 1</button>
	<button type="button" class="btn btn-default">Кнопка 2</button>
	<button type="button" class="btn btn-default">Кнопка 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Кнопка 4</button>
	<button type="button" class="btn btn-default">Кнопка 5</button>
	<button type="button" class="btn btn-default">Кнопка 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Кнопка 7</button>
	<button type="button" class="btn btn-default">Кнопка 8</button>
	<button　type="button"　class="btn　btn-default">Кнопка　9</button>
</div>
</body>
</html>
Проверьте, посмотрите <‹/›>

Результаты будут представлены следующим образом:

вложение

Вы можете вложить одну кнопку в другую кнопку в группе, то есть в одной .btn-group внутри другой .btn-group Этот класс используется, когда нужно комбинировать выпадающий список с рядом кнопок.

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Пример Bootstrap　-　Вложенная группа кнопок</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="btn-group">
	<button　type="button"　class="btn　btn-default">Кнопка　1</button>
	<button　type="button"　class="btn　btn-default">Кнопка　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Выпадающий список
			<span　class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Ссылка спуска 1</a></li>
			<li><a href="#">Ссылка спуска 2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
Проверьте, посмотрите <‹/›>

Результаты будут представлены следующим образом:

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

Ниже приведен пример класса, обсуждаемого в таблице выше .btn-group-vertical Использование:

Онлайн пример

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　<title>Пример Bootstrap　-　Вертикальная группа кнопок</title>
　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="btn-group-vertical">
	<button　type="button"　class="btn　btn-default">Кнопка　1</button>
	<button　type="button"　class="btn　btn-default">Кнопка　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Выпадающий список
			<span　class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Ссылка спуска 1</a></li>
			<li><a href="#">Ссылка спуска 2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
Проверьте, посмотрите <‹/›>

Результаты будут представлены следующим образом:

Выпадающее меню кнопок BootstrapВыпадающее меню Bootstrap