-Klasse.
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>
Nach dem Login kopieren
【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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
[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>
Nach dem Login kopieren
[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>
Nach dem Login kopieren
[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>
Nach dem Login kopieren
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!
