In diesem Artikel wird Ihnen hauptsächlich das Wissen über die Verwendung von Bootstrap -Formstilen vorgestellt. Es ist sehr gut, lass uns einen Blick zusammenschauen!
Bilden
<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 email Passwort "> </div> <label> <Eingabe type =" Kontrollkästchen "> Erinnere dich an dein Passwort </Label> </div> <Schaltfläche Typ =" Senden "> Geben Sie die E -Mail </button> </form> ein
Reproduktionsbild:
Klasse: Form-Kontroll
1. Die Breite ist zu 100%geworden, 2. Ein hellgrauer (#CCC) -Rand wird eingestellt, 3. Eine abgerundete Ecke mit 4px, 4. Ein Schatteneffekt wird festgelegt, und wenn sich das Element in den Mittelpunkt stellt, ändern sich die Schatten- und Randeffekte, 5. Die Farbe des Platzhalters ist auf #999 eingestellt.
2. Horizontale Form:
Die Standardform des Bootstrap -Frameworks ist vertikaler Anzeigestil, aber oft benötigen wir einen horizontalen Formstil (das Etikett befindet sich links und die Formsteuerung befindet sich rechts)
<Formrolle = "Formular"> <div> <Label für = "InputEMail3"> E -Mail </Label> <div> <Eingabe type = "E -Mail" id = "InputEmail3" Placeholder = "Bitte geben Sie Ihre E -Mail -Adresse ein. Passwort "> </div> </div> <div> <div> <label> <Eingabe type =" Kontrollkästchen "> MENKBEN Sie das Kennwort </label> </div> </div> </div> <div> <div> <button type =" Senden "> Die E -Mail </button> </div> </div> </Form> Geben
Reproduktionsbild:
Um einen horizontalen Formffekt im Bootstrap -Framework zu erzielen, müssen die folgenden zwei Bedingungen erfüllt sein:
1. Der Klassenname "Form-horizontal" wird im Element verwendet.
2. Mesh System entspricht dem Bootstrap -Framework.
Die Verwendung des Klassennamens "Form-horizontal" auf Elementen hat die folgenden Funktionen:
- Setzen Sie die Formularsteuerungspolster- und Randwerte.
- Ändern Sie den Ausdruck der "Formgruppe", ähnlich der "Zeile" des Gittersystems.
3.. Horizontale Form:
Das Implementieren solcher Form-Effekte im Bootstrap-Framework ist ein Kinderspiel. Sie müssen dem Element nur den Klassennamen "Form-Inline" hinzufügen.
Das Implementierungsprinzip der Inline -Form ist sehr einfach. Um das Formularsteuer für eine Zeile anzuzeigen, müssen Sie das Formularsteuerung auf ein Inline-Blockelement festlegen (Anzeige: Inline-Block).
<Formrolle = "Formular"> <div> <label for = "examplePUpputemail2"> E -Mail </label> <Eingabe type = "E -Mail" id = "examplePUPEMAIL2" PlaceHolder = "Bitte geben Sie Ihre E -Mail -Adresse ein. Passwort "> </div> <label> <Eingabe type =" Kontrollkästchen "> Erinnere dich an dein Passwort </Label> </div> <Schaltfläche Typ =" Senden "> Geben Sie die E -Mail </button> </form> ein
Reproduktionsbild:
4. Eingangsboxeingabe
Ein Eingangsfeld für Einzelzeilen, ein gemeinsames Texteingangsfeld, dh der Typ-Attributwert der Eingabe ist Text. Wenn Sie die Eingabe in Bootstrap verwenden, müssen Sie auch Typtyp hinzufügen. Wenn Sie den Typtyp nicht angeben, erhalten Sie nicht den richtigen Stil.
<Formrolle = "Formular"> <div> <Eingabe type = "E -Mail" Placeholder = "E -Mail eingeben"> </div> <div> <Eingabe type = "text" placeholder = "Bitte geben Sie den Benutzernamen ein"/> </div> </form>
Reproduktionsbild:
5. Auswahlfeld nach unten auswählen
Das Dropdown-Auswahlfeld im Bootstrap-Framework stimmt mit der ursprünglichen Verwendung überein, und die Multi-Line-Auswahl setzt den Wert des Mehrfachattributs auf mehrere. Das Bootstrap -Framework bietet einen einheitlichen Stil für diese Elemente.
<form role="form"><div><select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></div><div><select multiple> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
Reproduktionsbild:
6. 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> <textarea rows = "3"> </textarea> </div> </form>
Reproduktionsbild:
7. Kontrollkästchen Kontrollkästchen und Single -Select -Schaltflächen -Foesser
Kontrollkästchen und Radio im Bootstrap -Framework sind etwas Besonderes. Bootstrap hat einige besondere Behandlungen für sie vorgenommen. Der Hauptgrund ist, dass das CheckBox und das Radio bei Verwendung von Etikettenbezeichnungen geringfügige Probleme haben (die meisten Kopfschmerzen sind das Ausrichtungsproblem). Mit dem Bootstrap -Framework müssen Entwickler nicht zu viel nachdenken, sie müssen nur die folgende Methode befolgen.
<form role="form"><h3>Case 1</h3><div><label><input type="checkbox" value="">Remember the password</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>Like</label></div><label><input type="radio" name="optionsRadios" id = "optionsRadios2" value = "hate"> mag </label> </div> </form> nicht
Reproduktionsbild:
8. Kontrollkästchen und Optionsfelder horizontal
Manchmal müssen für Layoutzwecke Kontrollkästchen und Optionszüge horizontal angeordnet werden. Das Bootstrap -Framework machte diesbezüglich auch Überlegungen vor:
1. Wenn das Kontrollkästchen horizontal angeordnet werden muss, müssen Sie nur den Klassennamen "CheckBox-Inline" zum Etikettsetikett hinzufügen.
2. Wenn das Radio horizontal arrangiert werden muss, müssen Sie nur den Klassennamen "Radio-Inline" zum Etikettetikett hinzufügen.
<Formrolle = "Form"> <div> <label> <Eingabe type = "CheckBox" value = "Option1"> Spiel </Label> <Label> <Eingabe type = "Checkbox" value = "Option2"> Fotografie </Label> <Label> <Eingabetyp "Eingabe type" checkbox "value =" option3 "> tourism </label> <div> <Label> <Eingabe -Typ> < -Label> < -Label> < -Label> </fodry =" funk = "funk" -Aption "option" option "name" name "name" name "name" name "name" name "name" name "name" name "name" name "text type = "radio" value = "option2" name = "sex"> weiblich </label> <label> <Eingabe type = "radio" value = "option3" name = "sex"> neutral </label> </div> </Form>
Reproduktionsbild:
9. Knopf
Die Tasten im Bootstrap -Framework sind alle implementiert
<table> <Thead> <tr> <Th> Taste </th> <th> class = "" </th> <th> Beschreibung </th> </tr> </tbody> <tr> <td> <button href = "#"> Standard </td> </td> <Td> <Code> btn </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> gradient</td></tr><td><td><button href="#">Primary</button></td><td><code>btn btn-primary</code></td><td>Provides extra visual weight and identifies the primary action in a set of buttons</td></tr><td><button href = "#"> info </button> </td> <td> <code> btn btn-info </code> </td> <td> verwendet als alternative zu den Standardstilen </td> </tr> <td> <td> <code Btn-success </code> </td> <td> zeigt eine erfolgreiche oder positive Aktion an </td> </tr> <tr> <td> <button href = "#"> WARNUNG </button> </td> <td> <code> btn btn-warning </code> </td> <td> <td> Die Wäsche ist aufpasst, dass dies mit diesem Code </td> <td> verwendet werden sollte. Aktion </td> </tr> <td> <td> <button href = "#"> danger </button> </td> <td> <code> Btn Btn-Danger </code> </td> <td> Zeigt eine gefährliche oder potenzielle negative Aktion an </td> </tr> <td> <Taste an. href = "#"> inverse </button> </td> <td> <code> btn </verse </button> </td> <td> <code> btn btn-invers </code> </td> <td> Alternative Dark Grey-Taste, nicht an eine semantische Aktion gebunden oder </td> </trodbody> </tbody> </tbody> </tbody> </tbody> </tbody> </tbody> </tbody
Reproduktionsbild:
10. Form Steuergröße
Die zuvor gesehenen Formkontrollen haben normale Größe. Sie können die Höhe des Steuerelements einstellen, indem Sie die Höhe der Steuerung, Linienhöhe, Polster- und Schriftgröße einstellen. Das Bootstrap -Framework bietet jedoch auch zwei verschiedene Klassennamen, um die Höhe der Formularsteuerungen zu steuern. Diese beiden Klassennamen sind:
1. Eingabe-SM: Machen Sie die Steuerung kleiner als die normale Größe
2. Eingabe-LG: Machen Sie die Steuerung größer als die normale Größe
Diese beiden Klassen sind für Eingaben, TextArea und Auswahlsteuerungen in Formularen geeignet.
<Formrolle = "Form"> <div> <label> Die Steuerung wird größer </label> <Eingabe type = "text" placeholder = "add.input-lg, die Kontrolle wird größer"> </div> <div> <label> Normale Größe </label> <Eingabetyp = "text" placeholder = "Normalgröße"> </div> <divput> contrver wird kleiner </markiert. kleiner "> </div> </form>
Reproduktionsbild:
11. Formularsteuerstatus (deaktivierter Status)
Der deaktivierte Status der Formularsteuerung im Bootstrap -Framework entspricht der Methode zur Implementierungsmethode des normalen Formularformulars und addiert das Attribut "deaktiviert" zum entsprechenden Formularregel. Weitere Informationen finden Sie im folgenden Code
Deaktivieren Sie ein einzelnes Formular -Tag, fügen Sie einfach den Attributen des Tags deaktiviert hinzu.
<Formrolle = "Form"> <div> <div> <input id = "deaktiviertInput" type = "text" placeholder = "wurde deaktiviert und kann nicht eingegeben werden" deaktiviert> </div> </div> </form>
Reproduktionsbild:
Wenn der Felderset im Bootstrap -Framework deaktiviert ist, wird die gesamte Domäne deaktiviert.
<form role="form"><fieldset disabled><div><label for="disabledTextInput">Disabled input box</label><input type="text" id="disabledTextInput" placeholder="disabled input"></div><div><label for="disabledSelect">Disabled drop-down box</label><select id="disabledSelect"><option>Not Auswahlbar </option> </select> </div> <div> <label> <Eingabe type = "Kontrollkästchen"> Kann </label> </div> <schaltflächen -Typs = "Senden"> Senden </button> </fieldset> </Form> nicht auswählen
Reproduktionsbild:
Es wird gesagt, dass dieses Eingabefeld für das gesamte Feld deaktiviert wird, wenn ein Eingabefeld in der Legende vorhanden ist.
Formrolle = "Form"> <fieldset deaktiviert> <legend> <Eingabe type = "text" placeholder = "Offensichtlich ist meine Farbe grau geworden, aber ich bin nicht deaktiviert. Glauben Sie es nicht? Klicken Sie, um es zu versuchen. input "> </div> <div> <label for =" deaktiviertSelect "> Deaktiviertes Dropdown-Feld </label> <select id =" disabledSelect "> <option> Nicht auswählen </option> </select> </div> <div> <div> <label> <Eingabe type =" Kontrollkästchen "> Nicht auswählen </label> </div> <Taste" Subjekt ">" Subjekt ">" Subjekt ">" Subjekt ">" arrang "> </button> </button> </</button> </</tector> </</ubly> </</</</</</</<-
Reproduktionsbild:
Formularüberprüfungsstatus
Wenn Sie ein Formular erstellen, müssen Sie eine Form zur Verifizierung von Formular durchführen. Es ist auch notwendig, Überprüfungsstatusstile bereitzustellen, und diese Effekte sind auch im Bootstrap -Framework bereitgestellt.
1. Has-Warning: Warnstatus (gelb)
2. Has-Fehler: Fehlerstatus (rot)
3..
Bei der Überprüfung des Formulars liefern verschiedene Zustände unterschiedliche Symbole, z. B. Erfolg ist ein Scheckszeichen (√), Fehler ist ein Kreuzzeichen (×) usw. Dieser Effekt wird auch in der Bootstrap -Box angegeben. Wenn das Formular im entsprechenden Status das Symbol angezeigt werden soll, müssen Sie nur den Klassennamen "Has-Feedback" im entsprechenden Zustand hinzufügen. Beachten Sie, dass solche Namen mit "has-fehler", "has-warning" und "has-success" zusammen sein sollen:
<Formrolle = "Form"> <div> <Label für = "InputSuccess1"> Erfolgsstatus </Label> <Eingabe type = "text" id = "InputSuccess1" placeholder = "Erfolg"> </div> <div> <div> <div> <div> <Darly "InputWarning1"> Warnstatus. für = "inpuNError1"> Fehlerstatus </label> <Eingabe type = "text" id = "inpuseRror1" placeholder = "Fehlerstatus"> </div> </form> <br> <br> <Formrolle = "Form"> <div> <label for = "InputSuccess1"> Erfolgsstatus </label> <input type = "text Status "> <span> </span> </div> <div> <label für =" inputWarning1 "> Warnstatus </Label> <Eingabe type =" text "id =" inputWarning1 "Placeholder =" Warnstatus "> <span> </span> </div> <div> <Label für =" InputError1 "> Fehlerstatus. Status "> <span> </span> </div> </form>
Reproduktionsbild:
Eingabeaufforderungsinformationen bilden
Normalerweise sollten bei der Überprüfung des Formulars unterschiedliche Eingabeauffordern zur Verfügung gestellt werden. Dieser Effekt ist auch im Bootstrap -Framework bereitgestellt. Ein "Help-Block" -Stil wird verwendet, und die Eingabeaufforderung wird in Blöcken angezeigt und am unteren Rand des Steuerelements angezeigt.
<Formrolle = "Form"> <div> <label für = "inputSuccess1"> Erfolgsstatus </Label> <Eingabe type = "text" id = "InputSuccess1" Placeholder = "Erfolg"> <span> Die Informationen, die Sie eingegeben haben, sind korrekt </span> </span> </</div> <div> <div> <div> id "Inputwarning1". Placeholder = "Warnstatus"> <span> Bitte geben Sie die richtigen Informationen ein </span> <span> </span> </div> <div> <Label für = "InputError1"> Fehlerstatus.
Reproduktionsbild:
Die oben genannte Verwendung von Bootstrap -Formularstilen, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!