Groupe de boutons Bootstrap


Les groupes de boutons permettent d'empiler plusieurs boutons sur la même ligne. Ceci est utile lorsque vous souhaitez aligner les boutons ensemble. Vous pouvez ajouter des comportements de style radio JavaScript et case à cocher facultatifs via le plugin Bootstrap Button.

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

Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbar该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
.btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。
<div class="btn-group-vertical">
  ...
</div>

Groupe de boutons de base

L'exemple suivant démontre l'utilisation de la classe .btn-group discutée dans le tableau ci-dessus :

< !DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Groupe de boutons de base</title>
<link href="http: //libs. baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/ 2.0.0/ jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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=" bouton" class= "btn btn-default">Bouton 3</button>
</div>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 基本的按钮组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Barre d'outils de boutons

L'exemple suivant montre l'utilisation de la classe .btn-toolbar discutée dans le tableau ci-dessus :

<!DOCTYPE html>
<html>
<head>
<title>Exemple de Bootstrap - Barre d'outils de boutons</title>
<link href="http://libs.baidu .com/bootstrap /3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery .min.js "></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/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>
<button type="bouton" class="btn btn-default">Bouton 3</bouton>
</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>
< 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>

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮工具栏</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Taille du bouton

L'exemple suivant montre l'utilisation de la classe .btn-group-* discutée dans le tableau ci-dessus :

< html>
<html>
<head>
<title>Exemple de bootstrap - Taille du groupe de boutons</title>
<link href="http:// libs.baidu. com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0 0/jquery. min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script> ;</head>
<body>

<div class="btn-group 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-group btn-group-sm">
< bouton type="bouton" class="btn btn-default"> Bouton 4</bouton>
<bouton type="bouton" class="btn btn-default"> Bouton 5< 🎜> <button type="button" class="btn btn-default">Bouton 6</button>
</div>
<div class="btn-group btn-group- xs">
<button type="button" class="btn btn-default">Bouton 7</button>
<button type="button" class="btn btn-default" >Bouton 8</bouton>
<bouton type="bouton" class="btn btn-default">Bouton 9</bouton>
</div>

< ;/body>
</html>
Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮组的大小</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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">Button 1</button>
	<button type="button" class="btn btn-default">Button 2</button>
	<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Button 4</button>
	<button type="button" class="btn btn-default">Button 5</button>
	<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Button 7</button>
	<button type="button" class="btn btn-default">Button 8</button>
	<button type="button" class="btn btn-default">Button 9</button>
</div>

</body>
</html>

Instance en cours d'exécution» Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Imbrication

Vous pouvez imbriquer un groupe de boutons dans un autre groupe de boutons, c'est-à-dire imbriquer un .btn-group dans un autre .btn-group . Ceci est utilisé lorsque vous souhaitez combiner un menu déroulant avec une série de boutons.

<!DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Groupe de boutons imbriqués</title>
< ;link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http: //libs .baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0 3/js. /bootstrap.min.js"></script></head>
<body>

<div class="btn-group">
<bouton type="bouton" class="btn btn-default">Bouton 1</bouton>
<bouton type="bouton" class="btn btn-default">Bouton 2</bouton> ;

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown ">
Ce qui suit
>         <li><a href="#">Lien déroulant 1</a></li>
                                       <</ li>
</ul>
</div>
</div>

</body>
</html>


Instance
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 嵌套的按钮组</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Groupe de boutons verticaux

L'exemple suivant démontre l'utilisation de la classe .btn-group-vertical discutée dans le tableau ci-dessus :

< ;! DOCTYPE html>
<html>
<head>
<title>Exemple de bootstrap - Groupe de boutons verticaux</title>
<link href="http:/ /libs.baidu .com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0 .0/jquery .min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"> ;</ script></head>
<body>

<div class="btn-group-vertical">
<button type="button" class ="btn btn -default">Bouton 1</bouton>
<button type="bouton" class="btn btn-default">Bouton 2</bouton>

< div class=" btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Liste déroulante
                                                                                                              a href="#">Lien déroulant 1</a></li>
  <li><a href="#">Lien déroulant 2</a></ li>
</ul>
</div>
</div>

</body>
</html>


Instance
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
   <title>Bootstrap 实例 - 垂直的按钮组</title>
   <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

←
→