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

Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap-Schaltflächen-Gruppe

Button-Gruppen erlauben es mehreren Buttons, auf einer Zeile übereinander zu stehen. Dies ist besonders nützlich, wenn Sie die Buttons ausrichten möchten. Sie können Bootstrap-Button-Plugin Fügen Sie optionale JavaScript-Single- und Mehrfachauswahloptionen hinzu.

Die folgende Tabelle gibt eine Zusammenfassung der wichtigen Klassen für die Verwendung von Button-Gruppen, die Bootstrap anbietet:

KlasseBeschreibungCode-Beispiel
.btn-groupDiese class wird verwendet, um grundlegende Button-Gruppen zu bilden. In .btn-group platziert eine Reihe von class .btn der Buttons.
<div>
　　<button　type="button">Button1</button>
　　　<button　type="button">Button2</button>
</div>
.btn-toolbarDiese class hilft, mehrere <div> in ein <div> zu kombinieren, was in der Regel komplexere Komponenten ergibt.
<div　role="toolbar">
　　<div>.../div>
　　<div>.../div>
</div>
.btn-group-lg, .btn-group-, .btn-group-xsDiese class kann auf die Größe der gesamten Button-Gruppe angewendet werden, ohne dass die Größe jedes Buttons angepasst werden muss.
<div>.../div>
<div>.../div>
<div>.../div>
.btn-group-verticalDiese class lässt eine Gruppe von Buttons vertikal anordnen, anstatt horizontal.
<div>
　　...
</div>

grundlegende　Button-Gruppe

Nachfolgender Beispiel zeigt die in der obigen Tabelle diskutierten class .btn-group Verwendung：

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Beispiel　-　grundlegende　Button-Gruppe</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">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<button　type="button"　class="btn　btn-default">Button　3</button>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Button-Werkzeugleiste

Nachfolgender Beispiel zeigt die in der obigen Tabelle diskutierten class .btn-toolbar Verwendung：

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Beispiel　-　Button-Werkzeugleiste</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">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">
		<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">
		<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>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Größe der Buttons

Nachfolgender Beispiel zeigt die in der obigen Tabelle diskutierten class .btn-group-* Verwendung：

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">　
	<title>Bootstrap　Beispiel　-　Größe der Button-Gruppe</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">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>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

eingebettet

Sie können eine Button-Gruppe in einer anderen Button-Gruppe einbetten, d.h. in einer .btn-group eingebettet .btn-group 。Wenn Sie eine Dropdown-Liste mit einer Reihe von Buttons kombinieren möchten, wird dies verwendet.

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
	<title>Bootstrap　Beispiel　-　eingebettete　Button-Gruppe</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">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Dropdown-Link　1</a></li>
			<li><a href="#">Dropdown-Link　2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

vertikale　Button-Gruppe

Nachfolgender Beispiel zeigt die in der obigen Tabelle diskutierten class .btn-group-vertical Verwendung：

Online-Beispiel

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">-8">
　　　<title>Bootstrap　Beispiel　-　vertikale　Button-Gruppe</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">Button　1</button>
	<button　type="button"　class="btn　btn-default">Button　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			Dropdown
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">Dropdown-Link　1</a></li>
			<li><a href="#">Dropdown-Link　2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt dargestellt:

Bootstrap-Schaltflächen-Dropdown-MenüBootstrap-Dropdown-Menü