So erstellen Sie ein Suchfeld in Bootstrap

Während des Projektentwicklungsprozesses werden wir die Suchoption mehr oder weniger verwenden Wie erstellt man also ein standardmäßiges und gut aussehendes Suchfeld? Hier empfehlen wir die Eingabegruppe, ein Steuerelement, das mit Bootstrap geliefert wird.

Empfohlenes Handbuch: Bootstrap Chinese Manual

Werfen Sie zunächst einen kurzen Blick auf die offizielle Beschreibung dieser Steuerung

Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.
Contents
    Basic example
    Sizing
    Checkboxes and radio addons
    Button addons
    Buttons with dropdowns
    Segmented buttons
    Accessibility

It bedeutet, dass für die Formularübermittlungsfunktion, die wir normalerweise verwenden, Schaltflächen und Text auf beiden Seiten des Eingabefelds hinzugefügt werden können.

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“

Die folgenden sieben Inhalte sind die Grundfunktionen, die es erreichen kann. Hier konzentrieren wir uns auf die vierte Schaltfläche, die Add-ons sind genug, wenn Sie interessiert sind, können Sie den Rest selbst lernen.

Button addons
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .
input-group-addon, 
you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser 
styles that cannot 
be overridden.

Der obige Absatz bedeutet, dass sich Schaltflächen in Eingabegruppen von gewöhnlichen unterscheiden und eine andere Verschachtelungsebene erfordern. Um es einfach auszudrücken: Wir verwenden nicht mehr Input-Group-Addon, sondern Input-Group-BTN, um Schaltflächen zu verwalten. Der Democode, den ich gegeben habe, lautet wie folgt:

<div class="input-group col-md-3" style="margin-top:0px positon:relative">
       <input type="text" class="form-control"placeholder="请输入字段名" / >
            <span class="input-group-btn">
               <button class="btn btn-info btn-search">查找</button>
               <button class="btn btn-info btn-search" style="margin-left:3px">添加</button>
            </span>
 </div>

Der endgültige Effekt ist wie folgt folgt Anzeige

Dadurch werden die Suchleistenoptionen perfekt angezeigt und der Stil bleibt konsistent.

Empfohlene verwandte Artikel:
1.Detaillierte Erläuterung des Suchfelds und der Abfragefunktion von Bootstrap Table
2.Verwendung von bootStrap-table serverseitigem Hintergrund-Paging und benutzerdefinierter Suchfeldimplementierung
Ähnliche Videoempfehlungen:
1.Dugu Jiujian (7)_Bootstrap-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Suchfeld in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!