Heim > Artikel > Web-Frontend > Einführung einer Funktion der Bootstrap-Eingabefeldgruppe
Einführung einer Funktion der Bootstrap-Eingabefeldgruppe
- 零下一度Original
- 2017-07-17 14:38:071998Durchsuche
In diesem Kapitel wird eine weitere von Bootstrap unterstützte Funktion erläutert, die Eingabefeldgruppe. Die Eingabefeldgruppe erstreckt sich über das Formularsteuerelement. Mithilfe von Eingabefeldgruppen können Sie ganz einfach Text oder Schaltflächen als Präfixe und Suffixe zu textbasierten Eingabefeldern hinzufügen.
Sie können der Benutzereingabe gemeinsame Elemente hinzufügen, indem Sie dem Eingabefeld Präfix- und Suffixinhalte hinzufügen. Sie könnten beispielsweise ein Dollarzeichen oder @ vor Ihrem Twitter-Benutzernamen oder andere gemeinsame Elemente hinzufügen, die für die Anwendungsoberfläche erforderlich sind.
Die Schritte zum Hinzufügen eines Präfix- oder Suffixelements zu .form-control sind wie folgt:
Platzieren Sie das Präfix- oder Suffixelement in einem
Als nächstes platzieren Sie innerhalb desselben
Platzieren Sie das vor oder nach dem <input>
Um die browserübergreifende Kompatibilität aufrechtzuerhalten, vermeiden Sie die Verwendung von <select>-Elementen, da diese in WebKit-Browsern nicht vollständig gerendert werden. Wenden Sie die Klasse der Eingabefeldgruppe nicht direkt auf die Formulargruppe an. Die Eingabefeldgruppe ist eine isolierte Komponente.
Die vorherigen Wörter
Manchmal müssen wir ein Texteingabefeld (Eingabegruppe) mit einer Datei oder einem kleinen Symbol zur Anzeige kombinieren, das wir Add-on nennen. Das heißt, durch das Hinzufügen von Text oder Schaltflächen vor, hinter oder auf beiden Seiten des Texteingabefelds <input> kann die Formularsteuerung erweitert werden. In diesem Artikel wird die grundlegende Verwendung der Bootstrap-Eingabefeldgruppe ausführlich vorgestellt.
Fügen Sie auf beiden Seiten des Eingabefelds zusätzliche Elemente oder Schaltflächen hinzu. Sie können auch zusätzliche Elemente auf beiden Seiten des Eingabefelds hinzufügen
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span></div><div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span></div><div class="input-group"> <span class="input-group-addon" id="basic-addon3"></span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"></div>
【Hinweise】
1. Vermeiden Sie die Verwendung <select>-Element, da WebKit-Browser seine Stile nicht vollständig zeichnen können
2. Vermeiden Sie die Verwendung von <textarea>-Elementen, da deren rows-Attribut in einigen Fällen nicht unterstützt wird
3. Mischen Sie keine Formen Gruppen oder Rasterspaltenklassen (Spaltenklassen) direkt mit Eingabefeldgruppen. Stattdessen wird die Eingabefeldgruppe innerhalb der Formulargruppe oder gitterbezogenen Elementen verschachtelt
<h3>错误示范</h3><div class="input-group col-xs-4"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group col-xs-8"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><h3>正确示范</h3><div class="col-xs-4"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div><div class="col-xs-8"><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div>
4. kann mehrere hinzufügen ( .input-group-addon oder .input-group-btn)
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> <span class="input-group-addon" id="basic-addon1">@</span></div>
5. wird in einer einzelnen Eingabefeldgruppe nicht unterstützt. Hinzufügen mehrere Formularsteuerelemente
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
Größe
Hinzufügen für .input-group Für die Wenn Sie die entsprechende Größenklasse angeben, passen die darin enthaltenen Elemente ihre Größe automatisch an. Es ist nicht erforderlich, für jedes Element in der Eingabefeldgruppe wiederholt Größenklassen hinzuzufügen. .input-group-lg und .input-group-sm werden bereitgestellt, aber der ultrakleine Stil wird nicht bereitgestellt. Möglicherweise ist der Autor der Meinung, dass er nicht benötigt wird
<div class="input-group input-group-lg"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group input-group-sm"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div>
Zusätzliche Elemente
[Mehrere Auswahlfelder oder Optionsfelder]
Sie können dem mehrere Auswahlfelder oder Optionsfelder als zusätzliche Elemente hinzufügen Eingabefeldgruppe
<div class="input-group"> <span class="input-group-addon"><input type="checkbox" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."></div><div class="input-group"> <span class="input-group-addon"><input type="radio" aria-label="..."> </span> <input type="text" class="form-control" aria-label="..."></div>
[Schaltfläche]
Das Hinzufügen einer Schaltfläche zur Eingabefeldgruppe erfordert das Hinzufügen einer zusätzlichen Ebene von Verschachtelung, nicht .input-group-addon , sondern stattdessen .input-group-btn hinzufügen, um das Schaltflächenelement zu umschließen. Da der .btn-Schaltflächenstil verschiedene Stile definiert, kann er nicht wie Kontrollkästchen, Radio, Beschriftung usw. direkt im .input-group-addon-Stil platziert werden. Um Konflikte zu vermeiden, hat der Autor daher einen separaten .input-group-btn-Stil für den .btn-Stil eingerichtet, um .input-group-addon als neuen Add-on-Container zu ersetzen
<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" placeholder="Search for..."></div>
[Schaltflächen-Dropdown-Menü]
Wenn Sie Schaltflächen unterstützen können, können Sie natürlich auch Schaltflächen-Dropdown-Menüs unterstützen. Es gibt keine zusätzliche Stilunterstützung Sie müssen lediglich ein data-toggle="dropdown"-Attribut auf eine gewöhnliche .btn-Schaltfläche anwenden
<div class="input-group"> <div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul> </div> <input type="text" class="form-control" aria-label="..."></div>
[Split-Schaltfläche Dropdown-Menü]
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default" type="button">Action</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li></ul> </div> <input type="text" class="form-control" aria-label="..."></div>
Das obige ist der detaillierte Inhalt vonEinführung einer Funktion der Bootstrap-Eingabefeldgruppe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!