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

Tutoriel de base de Bootstrap

Extension de Bootstrap

Bootstrap 按钮组教程

Les groupes de boutons permettent à plusieurs boutons d'être empilés sur une même ligne. Cela est très utile lorsque vous souhaitez aligner les boutons. Vous pouvez Extension de boutons (Button) de Bootstrap Ajouter des styles de comportement optionnels pour les cases à cocher et les cases à choisir en JavaScript.

Le tableau suivant résume certaines classes importantes fournies par Bootstrap pour l'utilisation des groupes de boutons :

Classedescriptionexemple de code
.btn-groupCette classe est utilisée pour former un groupe de boutons de base dans .btn-group placer une série de class .btn des boutons.
<div>
　　<button　type="button">Bouton1</button>
　　　<button　type="button">Bouton2</button>
</div>
.btn-toolbarCette classe aide à combiner plusieurs groupes <div> dans un <div>, généralement pour obtenir des composants plus complexes.
<div　role="toolbar">
　　<div>.../div>
　　<div>.../div>
</div>
.btn-group-, .btn-group-, .btn-group-xsCes classes peuvent être appliquées à l'ajustement de la taille de tout le groupe de boutons, sans avoir à ajuster la taille de chaque bouton.
<div>.../div>
<div>.../div>
<div>.../div>
.btn-group-verticalCette classe permet à un groupe de boutons d'être affiché verticalement plutôt que horizontalement.
<div>
　　...
</div>

groupe de boutons de base

Les exemples ci-dessous montrent les classes .btn-group l'utilisation：

exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　groupe de boutons de base</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">bouton　1</button>
	<button　type="button"　class="btn　btn-default">bouton　2</button>
	<button　type="button"　class="btn　btn-default">bouton　3</button>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

barre d'outils de boutons

Les exemples ci-dessous montrent les classes .btn-toolbar l'utilisation：

exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　barre d'outils de boutons</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">bouton　1</button>
		<button　type="button"　class="btn　btn-default">bouton　2</button>
		<button　type="button"　class="btn　btn-default">bouton　3</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">bouton　4</button>
		<button　type="button"　class="btn　btn-default">bouton　5</button>
		<button　type="button"　class="btn　btn-default">bouton　6</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">bouton　7</button>
		<button　type="button"　class="btn　btn-default">bouton　8</button>
		<button　type="button"　class="btn　btn-default">bouton　9</button>
	</div>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

taille des boutons

Les exemples ci-dessous montrent les classes .btn-group-* l'utilisation：

exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemple Bootstrap　-　taille du groupe de boutons</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-groupe　btn-group-lg">
	<button　type="button"　class="btn　btn-default">Bouton　1</button>
	<button　type="button"　class="btn　btn-default">Bouton　2</button>
	<button　type="button"　class="btn　btn-default">Bouton　3</button>
</div>
<div　class="btn-groupe　btn-group-sm">
	<button　type="button"　class="btn　btn-default">Bouton　4</button>
	<button　type="button"　class="btn　btn-default">Bouton　5</button>
	<button　type="button"　class="btn　btn-default">Bouton　6</button>
</div>
<div　class="btn-groupe　btn-group-xs">
	<button　type="button"　class="btn　btn-default">Bouton　7</button>
	<button　type="button"　class="btn　btn-default">Bouton　8</button>
	<button　type="button"　class="btn　btn-default">Bouton　9</button>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

imbriqué

Vous pouvez imbriquer un bouton groupe dans un autre bouton groupe, c'est-à-dire, dans un .btn-group imbriqué .btn-group 。Quand vous souhaitez combiner un menu déroulant avec une série de boutons, utilisez cette fonctionnalité.

exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Exemple Bootstrap　-　bouton groupe imbriqué</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">bouton　1</button>
	<button　type="button"　class="btn　btn-default">bouton　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>
测试看看 ‹/›

结果如下所示：

bouton groupe vertical

Les exemples ci-dessous montrent les classes .btn-group-vertical l'utilisation：

exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　<title>Exemple Bootstrap　-　vertical　bouton　groupe</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">bouton　1</button>
	<button　type="button"　class="btn　btn-default">bouton　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 下拉菜单教程