In diesem Artikel wird hauptsächlich die Fähigkeiten der Verwendung von Bootstrap -Formularen vorgestellt.
1.Brootstrap Grundform
Gemeinsame Elemente in Formularen enthalten hauptsächlich: Texteingangsfelder, Dropdown-Auswahlfelsen, Optionszahlen, Schalttasten, Textfelder und Schaltflächen usw.
Schauen wir uns zuerst eine grundlegende Form an:
<! DocType html> <html lang = "en"> <pead> <meta charset = "utf-8"> <title> Grundfuhre </title> <link rel = "styleSheet" href = "http://netdna.bootStrapcdn.com/bootstrap/3.1.1/1/1/1/1/1/1/1/1/1/1/1/1/1/1/CSSS/BootsStrap.Min.Min.min.min.> phl. <form role="form"> <div> <label for="exampleInputEmail1">Email:</label> <input type="email" id="exampleInputEmail1" placeholder="Please enter your email address"> </div> <div> <label for="exampleInputPassword1">Password: </label> <input type="password" id="exampleInputPassword1" placeholder="Please enter your password"> </div> <Div> <label> <Eingabe type = "puCectbox"> Denken Sie an das Kennwort </label> </div> <button type
Die Renderings sind wie folgt:
Wir können auch unterschiedliche Effekte erzielen, indem wir unterschiedliche Klassennamen zur Bildung hinzufügen. Die spezifischen Formregeln sind in der folgenden Tabelle angezeigt:
Zum Beispiel:
<form rollen = "form"> ... </form>
2. Steuerung der Stiefelstrap
1) Eingangsboxeingabe
<Formrolle = "Form"> <div> <!-Der Typtyp muss hinzugefügt werden. Wenn der Typtyp nicht angegeben ist, wird der richtige Stil nicht erhalten -> <Eingabe typ
2) Auswahlfeld nach unten auswählen
<form role="form"> <div> <!--Single-line drop-down selection box--> <select> <option>1</option> <option>2</option> </select> </div> <div> <!--Multi-line selection box--> <select multiple> <option>1</option> <option>2</option> </select> </div></form>
3) Textfeld Textbereich
Das Textfeld entspricht der ursprünglichen Verwendungsmethode, das Einstellen von Zeilen kann seine Höhe definieren und das Einstellen von Cols kann die Breite festlegen. Wenn der Klassenname "Form-Control" zum Textbereichselement hinzugefügt wird, müssen das COLS-Attribut nicht festgelegt werden. Weil die Form der Form der "Form-Kontroll" -Scharform im Bootstrap-Framework 100% oder automatisch ist.
<Formrolle = "Form"> <div> <!-rows = "3" Setzen Sie die Höhe Drei Zeilen-> <textarea rows = "3"> </textarea> </div> </form>
4) Kontrollkästchen
Vertikale Anordnung:
<Formrolle = "Formular"> <div> <label> <Eingabe type = "CheckBox" value = ""> Kontrollkästchen </label> </div> </form>
Horizontale Anordnung:
<form rollen = "form"> <div> <label> <Eingabe type = "postbox" value = "option1"> checkbox1 </label> <label> <Eingabe type = "postbox" value = "option2"> checkbox2 </label> </div> </form>
5) Einwahlschaltflächenfunkgeräte
Vertikale Anordnung:
<Formrolle = "Form"> <div> <label> <Eingabe type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "love" geprüft> a </label> </div> <div> <!-ob es ist, ob es sich </div> </form>
Horizontale Anordnung:
<Formrolle = "Form"> <div> <label> <Eingabe type = "radio" value = "option1" name = "sex"> a </label> <label> <Eingabe type = "radio" value = "option2" name = "sex"> b </label> </div> </form>
HINWEIS: Kontrollkästchen und Etikett werden in einem Container namens ". Checkbox" platziert. Radio und Etikett werden in einem Container namens ".Radio" platziert.
3.. Bootstrap -Formularsteuerstatus
1) Fokusstatus
Der Fokuszustand wird erreicht, indem die Eingabe der Klassennamenform hinzugefügt wird. Der Fokuszustand der Formsteuerung im Bootstrap -Framework löscht den Standardstil des Umrisss und fügt den Schatteneffekt erneut hinzu.
<!-Form-horizontal erreicht den horizontalen Formffekt-> <Formrolle = "Form"> <div> <div> <Eingabe typ
2) Status deaktivieren
Fügen Sie einfach "deaktiviert" der Formularsteuerung hinzu, die deaktiviert werden muss:
<Eingabe type = "text" placeholder = "ist deaktiviert, kann nicht eingegeben werden" deaktiviert>
3) Überprüfungsstatus
Zur Verifizierung der Formular müssen Sie auch einen Überprüfungsstatusstil bereitstellen. Diese Effekte sind auch in Bootstrap bereitgestellt:
Bei der Verwendung müssen Sie den Statusklassennamen nur hinzufügen, der dem Container der Formgruppe entspricht.
<Formrolle = "Form"> <div> <label für = "inputWarning1"> Warnstatus </Label> <Eingabe type = "text" id = "inputWarning1" placeholder = "Warnstatus"> </div> <div> <div> <label für = "InputError1"> Fehlerstatus </label> <Eingabe type = "divInror1" placeholder for = "inputSuccess1"> Erfolgsstatus </label> <Eingabe typ
Die Renderings sind wie folgt:
Wenn Sie möchten, dass das Formular das Symbol im entsprechenden Zustand anzeigt, müssen Sie nur den Klassennamen "Has-Feedback" im entsprechenden Zustand hinzufügen (dieser Klassenname sollte von "Has-Fehler", "Has-Warning" und "Has-Success" begleitet werden).
4.Bootstrap Form-Button
1) Buttons im benutzerdefinierten Stil
<Schaltfläche type = "Button"> Basic -Taste </button> <Schaltfläche Typ = "Button"> Standard -Taste </button> <button type = "button"> Haupttaste </button> <button type = "button"> Erfolgstaste </button> <button type "button"> Informationstaste </button> </button ".
Die Renderings sind wie folgt:
2) Die Bootstrap -Taste unterstützt mehrere Etiketten, und die von anderen Etiketten hergestellten Tasten sind wie folgt:
<Schaltfläche type = "Schaltfläche"> Taste Tag -Schaltfläche </Schaltfläche> <Eingabe type = "value =" Eingabe -Tag -Schaltfläche "/> <span> Span -Tag -Schaltfläche </span> <div> Div -Tag </div> <a href =" ## "> A -Tag -Schaltfläche </a>
3) Knopfgröße
Steuern Sie die Größe der Schaltfläche, indem Sie den Klassennamen an die Basis -Schaltfläche anhängen ".BTN".
<Schaltfläche type = "Schaltfläche"> Normale Schaltfläche </button> <Schaltfläche Typ = "Schaltfläche"> Große Schaltfläche </button> <Taste type = "Taste"> Kleine Schaltfläche </button>
4) Blocktaste (mehr für mobile Klemmen verwendet)
Blocktaste: Die Tastebreite füllt den gesamten übergeordneten Container (Breite: 100%) und hat keine Polster- und Margenwerte.
Bootstrap bietet einen Klassennamen "Btn-Block". Die Schaltfläche kann diesen Klassennamen verwenden, um eine Block -Schaltfläche zu implementieren (Einzelheiten finden Sie in der Dateizeile 2340 von Bootstrap.CSS. Zeile 2353).
<Schaltfläche type = "Schaltfläche"> Große Schaltfläche </button> <Schaltfläche Typ = "Schaltfläche"> Normale Schaltfläche </schaltet> <Taste type = "Taste"> Kleine Schaltfläche </button>
Die Renderings sind wie folgt:
5. Stiefelstatus-Form-Button-Status
In Bootstrap sind die Statusffekte von Schaltflächen hauptsächlich in zwei Typen unterteilt: aktiver Zustand und Behindertenzustand.
1) Active Status: Enthält hauptsächlich verschiedene Arten von Schaltflächensuspensionsstatus (: Hover), klicken Sie auf Status (: aktiv) und Focus -Status (: Fokus).
2) Status deaktivieren
Es gibt zwei Möglichkeiten, die Taste zu deaktivieren:
Methode 1: Hinzufügen von deaktiviertem Attribut im Tag
Methode 2: Klassenname "deaktiviert" zum Elementetikett hinzufügen
Die Hauptunterschiede zwischen den beiden sind:
Der Stil ".Disabled" verbietet das Standardverhalten der Taste nicht. Die Methode zum Hinzufügen des Attributs "deaktiviert" zur Element -Beschriftung kann das Standardverhalten des Elements verbieten.
6. Bootstrap -Bild
In Bootstrap werden die folgenden Stile für den Stilstil zur Verfügung gestellt:
Verwendung
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2016072615143225"> <img src = "http://img.blog.csdn.net/20160726151432225">
Der laufende Effekt ist wie folgt oder anzeigen das Ergebnisfenster rechts:
7. Bootstrap -Symbol
Bootstrap bietet 200 verschiedene Symbole wie folgt:
Verwendung
<span> </span>
<span> </span>
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Artikelserie:
Das erste Mal, als ich mit dem magischen Bootstrap -Grundlayout in Kontakt kam //www.vevb.com/article/89278.htm
Das erste Mal, als ich mit dem magischen Bootstrap -Gittersystem in Kontakt kam //www.vevb.com/article/893333.htm
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.