Bootstrap4 Grundlehrwerk

Bootstrap4 Abzeichen Bootstrap4 Schaltfläche

Bootstrap4 Schaltflächengruppe

　　 In Kapitel 1 haben Sie gelernt, wie man verschiedene Arten von Einzelschaltern erstellt und diese mit vorgegebenen Klassen bearbeitet. Aber Bootstrap ermöglicht es Ihnen auch, eine Reihe von Schaltern in einer Zeile zusammenzuführen, indem Sie die Komponente Schaltflächengruppe verwenden.

Bootstrap 4 durch .btn-group - Klasse anwenden, um eine Schaltflächengruppe zu erstellen.

Um eine Schaltflächengruppe zu erstellen, müssen Sie eine Reihe von Schaltflächen mit der .btn-Klasse in einem Element verpacken und darauf .btn-group - Klasse, wie im folgenden Beispiel gezeigt:

示例

<!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>Schaltflächengruppe</h2>
　　<p>　.btn-group - Klasse zum Erstellen von Schaltflächengruppen:</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>

Testen Sie heraus ‹/›

Hinweis: Wir können .btn-group-lg|sm - Klassen zur Einstellung der Größe der Schaltflächengruppe.

示例

<!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>Größe der Schaltflächengruppe</h2>
　　<p>Wir können .btn-group-lg|sm|xs - Klassen zur Einstellung der Größe der Schaltflächengruppe.</p>
　　<h2>Großer Button:</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>Standard-Button:</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>Kleiner Button:</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>

Testen Sie heraus ‹/›

垂直按钮组

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

Testen Sie heraus ‹/›

内嵌按钮组及下拉菜单

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

示例

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

Testen Sie heraus ‹/›

拆分按钮下拉菜单

示例

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

Testen Sie heraus ‹/›

垂直按钮组及下拉菜单

示例

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

Testen Sie heraus ‹/›

创建按钮工具栏

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

元素中，然后.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>

Testen Sie heraus ‹/›

Die Wirkung ist wie folgt:

Bootstrap4 Abzeichen Bootstrap4 Schaltfläche