Bootstrap4 Base Tutorial

Bootstrap4 Groupe de boutons

　　 Dans le chapitre précédent, vous avez appris à créer différents types de boutons individuels et à les modifier à l'aide de classes prédéfinies. Cependant, Bootstrap permet également de regrouper une série de boutons sur une ligne en utilisant le composant de groupe de boutons.

Bootstrap 4 Permet de placer les boutons sur une même ligne, on peut ajouter .btn sur l'élément <div>-La classe group pour créer un groupe de boutons.

Pour créer un groupe de boutons, il suffit de regrouper une série de boutons avec la classe .btn dans un élément, puis d'appliquer .btn-La classe group, comme dans les exemples suivants :

示例

<!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>Groupe de boutons</h2>
　　<p> .btn-La classe group est utilisée pour créer un groupe de boutons :/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>

Test and see ‹/›

Avis : On peut utiliser .btn-group-lg|sm classes pour définir la taille du groupe de boutons.

示例

<!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>Taille du groupe de boutons</h2>
　　<p>On peut utiliser .btn-group-lg|sm|xs classes pour définir la taille du groupe de boutons.</p>
　　<h2>Bouton grand :</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>Bouton par défaut :</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>Petit bouton :</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>

Test and see ‹/›

垂直按钮组

可以使用 .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>U可以使用　.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>

Test and see ‹/›

内嵌按钮组及下拉菜单

我们可以在按钮组内设置下拉菜单：

示例

<!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>

Test and see ‹/›

拆分按钮下拉菜单

示例

<!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>

Test and see ‹/›

垂直按钮组及下拉菜单

示例

<!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>

Test and see ‹/›

创建按钮工具栏

您还可以将按钮组的集合组合在一起，以创建更复杂的组件，例如按钮工具栏。要创建按钮工具栏，只需将按钮组的集合包装在一个

元素中，然后.btn-toolbar在其上应用类，如以下示例所示：

示例

<!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>

Test and see ‹/›

The effect is as follows:

Bootstrap4 Badge Bootstrap4 Button