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

Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap-Eingabegruppe

Dieses Kapitel wird eine weitere Funktion von Bootstrap erläutern, das Eingabefeld-Gruppenelement. Eingabefeldgruppen erweitern sich von FormularelementeMit dem Eingabefeld-Gruppenelement können Sie leicht Text oder Schaltflächen als Präfix und Suffix zu textbasierten Eingabefeldern hinzufügen.

Durch Hinzufügen von Präfix- und Suffix-Inhalten zu den Eingabefeldern können Sie gemeinsame Elemente zu den Benutzereingaben hinzufügen. Zum Beispiel können Sie das Dollarzeichen hinzufügen oder @ vor einem Twitter-Namen oder andere gemeinsame Elemente, die von der Anwendungsschnittstelle benötigt werden, hinzufügen.

Zu .form-control Schritte zum Hinzufügen von Präfix- oder Suffix-Elementen:

  • Platzieren Sie das Präfix- oder Suffix-Element in einem mit der Klasse .input-group im <div>.

  • Innerhalb desselben <div>, im <div> mit der Klasse .input-group-addon Fügen Sie zusätzliche Inhalte in den <span> ein.

  • Platzieren Sie diesen <span> vorne oder hinten am <input>-Element.

Um die Kompatibilität mit verschiedenen Browsern zu gewährleisten, vermeiden Sie die Verwendung des <select>-Elements, da sie in WebKit-Browsern nicht vollständig gerendert werden können. Verwenden Sie auch nicht direkt die Klasse der Eingabegruppe auf das Formularset, da die Eingabegruppe ein isolierter Komponente ist.

Grundlegende Eingabegruppe

Ein Beispiel zeigt die grundlegende Eingabegruppe:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Bootstrap Beispiel　-　Grundlegende Eingabegruppe</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 style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Die Größe der Eingabegruppe

Sie können durch Hinzufügen .input-group Fügen Sie relative Klasse zur Formulargröße hinzu (z.B. .input-group-lg、input-group-sm）um die Größe der Eingabegruppe zu ändern. Der Inhalt der Eingabebox wird automatisch angepasst.

Ein Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>
	<title>Bootstrap Beispiel　-　Die Größe der Eingabegruppe</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 style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group input-group-lg">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group input-group-sm">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Checkbox und Radio-Plugin

Sie können die Checkbox und das Radio-Plugin als Präfix- oder Suffix-Element der Eingabegruppe verwenden, wie im folgenden Beispiel gezeigt:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Beispiel　-　Eingabegruppe-Checkbox- und Radio-Plugin</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 style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<span class="input-group-addon">
						<input type="checkbox">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Button-Plugin

Sie können auch die Schaltfläche als Präfix- oder Suffix-Element der Eingabegruppe verwenden, in diesem Fall fügen Sie nicht .input-group-addon class, Sie müssen class .input-group-btn um die Schaltfläche zu umschließen. Dies ist obligatorisch, da die Standard-Stil des Browsers nicht überschrieben wird. Ein Beispiel zeigt dies:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Beispiel　-　Eingabegruppe-Button-Plugin</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 style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Go!
						</button>
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<input type="text" class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Go!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Schaltfläche mit Dropdown-Menü

In der Eingabegruppe können Sie Schaltflächen mit einem Dropdown-Menü hinzufügen, was einfach ist, indem man in einem .input-group-btn class " um den Button und das Dropdown-Menü zu umgeben, wie im folgenden Beispiel gezeigt:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Beispiel　-　Dropdown-Button für die Eingabegruppe</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 style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							Dropdown-Menü　
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Funktion</a></li>
							<li><a href="#">Eine andere Funktion</a></li>
							<li><a href="#">Andere</a></li>
							<li class="divider"></li>
							<li><a href="#">Getrennte Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							Dropdown-Menü　
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Funktion</a></li>
							<li><a href="#">Eine andere Funktion</a></li>
							<li><a href="#">Andere</a></li>
							<li class="divider"></li>
							<li><a href="#">Getrennte Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

Trennbutton mit Dropdown-Menü

Fügen Sie einen Trennbutton mit Dropdown-Menü in die Eingabegruppe ein, verwenden Sie eine ähnliche Stil wie der Dropdown-Button, aber fügen Sie die Hauptfunktion des Dropdown-Menüs hinzu, wie im folgenden Beispiel gezeigt:

Online-Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8>　
	<title>Bootstrap Beispiel　-　<title>Dropdown-Button für die Eingabegruppe</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 style="padding:　100px　100px　10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6>
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Dropdown-Menü
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-only">Wechseln Sie zum Dropdown-Menü</span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Funktion</a></li>
							<li><a href="#">Eine andere Funktion</a></li>
							<li><a href="#">Andere</a></li>
							<li class="divider"></li>
							<li><a href="#">Getrennte Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　--><br>
			<div class="col-lg-6>
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Dropdown-Menü
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1>
							<span class="caret"></span>
							<span class="sr-only">Wechseln Sie zum Dropdown-Menü</span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Funktion</a></li>
							<li><a href="#">Eine andere Funktion</a></li>
							<li><a href="#">Andere</a></li>
							<li class="divider"></li>
							<li><a href="#">Getrennte Links</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Die Ergebnisse sind wie folgt gezeigt:

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