Bootstrap Input Groups
Dieses Kapitel erklärt ein weiteres von Bootstrap unterstütztes Feature: Input Groups (Eingabegruppen). Input Groups erweitern dieFormularkontrollen. Mit Input Groups können Sie ganz einfach Text oder Schaltflächen als Präfixe oder Suffixe zu textbasierten Eingaben hinzufügen.
Durch das Hinzufügen von Präfix- und Suffix-Inhalten zu Eingabefeldern können Sie Benutzereingaben um häufige Elemente ergänzen. Sie können beispielsweise ein Dollarzeichen, ein @ vor einem Twitter-Benutzernamen oder andere von einer Anwendungsobenfläche benötigte Elemente hinzufügen.
zu.form-controlDie Schritte zum Hinzufügen von Präfix- oder Suffix-Elementen sind wie folgt:
- Platzieren Sie das Präfix- oder Suffix-Element in einem <div> mit der Klasse.input-groupinnerhalb des <div>.
- Platzieren Sie dann innerhalb desselben <div> in einem <span> mit der Klasse.input-group-addonden zusätzlichen Inhalt in diesem <span>.
- Platziere das <span> vor oder nach dem <input>-Element.
Verwende zur Browserkompatibilität keine <select>-Elemente, da diese in WebKit-Browsern nicht vollständig gerendert werden. Wende die Input-Group-Klasse außerdem nicht direkt auf Formulargruppen an; eine Input Group ist eine isolierte Komponente.
Grundlegende Input Group
Das folgende Beispiel zeigt eine grundlegende Input Group:
Beispiel
<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>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Größe von Eingabegruppen
Sie können die Größe einer Eingabegruppe ändern, indem Sie.input-groupform-relative Größenklassen (wie.input-group-lg, input-group-sm) hinzufügen. Der Inhalt des Eingabefelds passt sich automatisch in der Größe an.
Das folgende Beispiel demonstriert dies:
Beispiel
<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>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Checkbox- und Radio-Addons
Sie können Checkboxen und Radio-Buttons als Präfix- oder Suffix-Elemente einer Eingabegruppe verwenden, wie im folgenden Beispiel gezeigt:
Beispiel
<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>
</div>
<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>
</div>
</div>
</form>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Schaltflächen-Erweiterungen (Button Addons)
Sie können Schaltflächen auch als Präfix- oder Suffix-Elemente einer Eingabegruppe verwenden. In diesem Fall fügen Sie nicht die Klasse.input-group-addonhinzu; Sie müssen die Klasse.input-group-btnverwenden, um die Schaltfläche einzuhassen. Dies ist notwendig, da die Standard-Browserstile ansonsten nicht überschrieben werden. Das folgende Beispiel demonstriert dies:
Beispiel
<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>
</div>
<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>
</div>
</div>
</form>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Schaltflächen mit Dropdown-Menüs
Um einer Eingabegruppe Schaltflächen mit Dropdown-Menüs hinzuzufügen, umschließen Sie die Schaltfläche und das Dropdown-Menü einfach mit der Klasse.input-group-btn, wie im folgenden Beispiel gezeigt:
Beispiel
<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="#">Aktion</a>
</li>
<li>
<a href="#">Weitere Aktion</a>
</li>
<li>
<a href="#">Noch etwas anderes hier</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="col-lg-6">
<div class="input-group3input">
<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="#">Aktion</a>
</li>
<li>
<a href="#">Weitere Aktion</a>
</li>
<li>
<a href="#">Noch etwas anderes hier</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Geteilte Dropdown-Menü-Schaltflächen (Split Dropdown Menu Buttons)
Um einer Eingabegruppe geteilte Schaltflächen mit Dropdown-Menüs hinzuzufügen, verwenden Sie einen Stil ähnlich wie bei Dropdown-Menü-Schaltflächen, fügen Sie dem Dropdown-Menü jedoch eine primäre Aktion hinzu, wie im folgenden Beispiel gezeigt:
Beispiel
<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">Dropdown umschalten</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Noch etwas anderes hier</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<br>
<div class="col-lg-6">
<div class="input-group3input">
<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">Dropdown umschalten</span>
</button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Noch etwas anderes hier</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</div>
Ausprobieren »
Das Ergebnis wird unten angezeigt:
Andere Erweiterungen
