Bootstrap Eingabefeld Gruppe
Ein weiteres Merkmal dieses Kapitel wird Bootstrap-Unterstützung, Eingabefeld Gruppe erklären. Das Eingabefeld für die Gruppenerweiterung seit Formular - Steuerelemente . Verwenden Sie die Eingabefeld-Gruppe, können Sie ganz einfach ein Präfix und Suffix Texteingabefeld oder eine Schaltfläche auf der textbasierten hinzuzufügen.
Durch die Zugabe von Präfixen und Suffixen auf den Inhalt des Eingabefeldes können Sie Elemente mit dem gemeinsamen Benutzereingabe hinzufügen. Zum Beispiel können Sie ein Dollar-Zeichen, oder vor dem Twitter-Benutzernamen mit @ oder Anwendungsprogrammierschnittstellen hinzufügen, für andere gemeinsame Elemente erforderlich.
So fügen Sie den Präfix oder Suffix.form-Bedienelemente sind wie folgt:
- Die Elemente in einem Präfix oder Suffix mit einerKlasse .input Gruppe der <div> in.
- Als nächstes wird in der gleichen <div> innen, Platzierung zusätzliche Inhalte in der Klasse von.input-group-Addon von <span> innen.
- Zum <span> vor oder hinter dem <input> Element platziert.
Um Cross-Browser-Kompatibilität zu erhalten, vermeiden Sie mit <select> -Element, weil sie nicht vollständig Effekte WebKit-Browser machen. Nicht direkt in die Klassengruppe Formulareingabefeld gesetzt, Eingabefeld Gruppe anwenden ist eine isolierte Komponente.
Das Basic Input Box-Set
Das folgende Beispiel veranschaulicht die grundlegenden Eingabefelder Gruppen:
Beispiele
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-Beispiel BS- Beispiel-Form" role = "Form">
<Div class = "input-Gruppe">
<span class = "input-group-Addon "> @ </ span>
<Input type = "text" class = "Form-control" Platzhalter = "twitterhandle">
</ Div>
<Br>
<Div class = "input-Gruppe">
<Input type = "text" class = "Form-control">
<span class = "input-group-Addon "> 0,00 </ span>
</ Div>
<Br>
<Div class = "input-Gruppe">
<span class = "input-group-Addon "> $ </ span>
<Input type = "text" class = "Form-control">
<span class = "input-group-Addon "> 0,00 </ span>
</ Div>
</ Form>
</ Div>
Die Ergebnisse sind wie folgt:
Die Größe des Eingabefeldes Gruppe
Sie können ein Formular in Bezug auf die Größe der Klasse.input-Gruppe (zB .input-group-lg, Input-hinzufügen Gruppe-sm, Input-Gruppe-xs) die Größe des Eingabefeldes Gruppe zu ändern. Der Inhalt des Eingabefeldes wird automatisch der Größe verändert werden.
Das folgende Beispiel veranschaulicht diesen Punkt:
Beispiele
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-Beispiel BS- Beispiel-Form" role = "Form">
<Div class = "input-Gruppe Input- Gruppe-lg">
<span class = "input-group-Addon "> @ </ span>
<Input type = "text" class = "Form-control" Platzhalter = "Twitterhandle">
</ Div>
<Br>
<Div class = "input-Gruppe">
<span class = "input-group-Addon "> @ </ span>
<Input type = "text" class = "Form-control" Platzhalter = "Twitterhandle">
</ Div>
<Br>
<Div class = "input-Gruppe Input- Gruppe-sm">
<span class = "input-group-Addon "> @ </ span>
<Input type = "text" class = "Form-control" Platzhalter = "Twitterhandle">
</ Div>
</ Form>
</ Div>
Die Ergebnisse sind wie folgt:
Kontrollkästchen und Radio-Stecker
Sie können die Kontrollkästchen und Radio Plug-in als Präfix oder Suffix Elementgruppe Eingabefeld, wie im folgenden Beispiel gezeigt:
Beispiele
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-Beispiel BS- Beispiel-Form" role = "Form">
<Div class = "Zeile">
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<span class = "input-group-Addon ">
<Input type = "checkbox"> </ span>
<Input type = "text" class = "Form-control">
Eingabe-Gruppe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<span class = "input-group-Addon ">
<Input type = "radio"> </ span>
<Input type = "text" class = "Form-control">
Eingabe-Gruppe ->
->
->
</ Form>
</ Div>
Die Ergebnisse sind wie folgt:
Button-Widget
Sie können auch auf die Schaltfläche als Präfix oder Suffix Element der Eingabefeld Gruppe setzen, diesmal nicht.input-group-Addon Klasse hinzufügen, müssen Sie Klasse.input-Gruppe-btn zu verwenden Taste zu wickeln. Dies ist notwendig, weil der Standard-Browser-Stil nicht neu geschrieben werden. Das folgende Beispiel veranschaulicht diesen Punkt:
Beispiele
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-Beispiel BS- Beispiel-Form" role = "Form">
<Div class = "Zeile">
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<span class = "input-Gruppe-btn ">
<Taste class = "btn btn-default" type = "button"> GO </ button>
</ Span>
<Input type = "text" class = "Form-control">
Eingabe-Gruppe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<Input type = "text" class = "Form-control">
<span class = "input-Gruppe-btn ">
<Taste class = "btn btn-default" type = "button"> GO </ button>
</ Span>
Eingabe-Gruppe ->
->
->
</ Form>
</ Div>
Die Ergebnisse sind wie folgt:
Button mit Drop-Down-Menü
In - Taste mit einem Drop-Down - Menü in das Eingabefeld Gruppe, einfach in einer.input-Gruppe-btn Klasse von Tasten und Drop-Down - Menüs können gewickelt werden, wie in den folgenden Beispielen gezeigt:
Beispiele
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-Beispiel BS- Beispiel-Form" role = "Form">
<Div class = "Zeile">
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<Div class = "input-Gruppe-btn ">
<Taste type = "button" class = "btn btn-default Dropdown Toggle" Daten-Toggle = "Dropdown"> Dropdown-Menü <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
Btn-Gruppe ->
<Input type = "text" class = "Form-control">
Eingabe-Gruppe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<Input type = "text" class = "Form-control">
<Div class = "input-Gruppe-btn ">
<Taste type = "button" class = "btn btn-default Dropdown Toggle" Daten-Toggle = "Dropdown"> Dropdown-Menü <span class = "Caret"> </ span>
</ Button>
<Ul class = "Drop - Down-Menü Pull- right">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
Btn-Gruppe ->
Eingabe-Gruppe ->
->
->
</ Form>
</ Div>
Die Ergebnisse sind wie folgt:
Segmentation Dropdown-Menü-Taste
In Split-Taste mit einem Drop-Down-Menü in das Eingabefeld Gruppe, wählen Sie im Drop-Down-Menü-Taste und etwa den gleichen Stil, aber das Dropdown-Menü, um die Hauptfunktion hinzuzufügen, wie im folgenden Beispiel gezeigt:
Beispiele
<Div style = "padding: 100px 100px 10px ;">
<Form class = "bs-Beispiel BS- Beispiel-Form" role = "Form">
<Div class = "Zeile">
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<Div class = "input-Gruppe-btn ">
<Taste type = "button" class = "btn btn-default" tabindex = "-1"> Dropdown-Menü </ button>
<Taste type = "button" class = "btn btn-default Dropdown Toggle" Daten-Toggle = "Dropdown" tabindex = "-1">
<span class = "Caret"> </ span>
<span class = "sr-only"> Schalter Dropdown-Menü </ span>
</ Button>
<Ul class = "Drop - Down-Menü">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
Btn-Gruppe ->
<Input type = "text" class = "Form-control">
Eingabe-Gruppe ->
->
<Br>
<Div class = "col-lg-6 ">
<Div class = "input-Gruppe">
<Input type = "text" class = "Form-control">
<Div class = "input-Gruppe-btn ">
<Taste type = "button" class = "btn btn-default" tabindex = "-1"> Dropdown-Menü </ button>
<Taste type = "button" class = "btn btn-default Dropdown Toggle" Daten-Toggle = "Dropdown" tabindex = "-1">
<span class = "Caret"> </ span>
<span class = "sr-only"> Schalter Dropdown-Menü </ span>
</ Button>
<Ul class = "Drop - Down-Menü Pull- right">
<Li>
<A href = "#"> Funktion </ a>
</ Li>
<Li>
<A href = "#"> Ein weiteres Merkmal </ a>
</ Li>
<Li>
<A href = "#"> Andere </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
</ Ul>
Btn-Gruppe ->
Eingabe-Gruppe ->
->
->
</ Form>
</ Div>
Die Ergebnisse sind wie folgt:
