Häufige Elemente von Formularen umfassen hauptsächlich: Texteingangsfelder, Dropdown-Auswahlfelsen, Radiofelder, Kontrollkästchen, Textfelder, Schaltflächen usw. Hier finden Sie die verschiedenen Bootstrap-Versionen:
Weniger: forms.less
Sass: _Forms.scss
Bootstrap passt nur die Fieldset-, Legend- und Etiketten -Tags im Formular an
Fieldset {Minwidth: 0; Polster: 0; Rand: 0; Rand: 0;} Legende {Anzeige: Block; Breite: 100%; Padding: 0; Inline-Block; Margin-Bottom: 5px; Schriftgewicht: BOLD;}Zusätzlich zu diesen Elementen gibt es auch Eingaben, Auswahl, Textbereich und andere Elemente. Im Bootstrap-Framework wird der Effekt erreicht, indem ein Klassenname.Form-Control angepasst wird.
1. Die Breite wird zu 100%;
2. Stellen Sie einen hellgrauen (#CCC) Rand ein
3. Runde Ecken mit 4px
4. Stellen Sie den Schatteneffekt fest und das Element wird in den Fokus gesetzt, die Schatten- und Randeffekte ändern sich.
5. Stellen Sie die Farbe des Palceholders auf #999 ein
Inline -Form
Wenn Sie vor der Eingabe ein Etikett -Tag hinzufügen möchten, wird der Eingangsleitungsumbruch angezeigt. Wenn Sie ein solches Etikett-Tag hinzufügen müssen und den Eingabestricht nicht möchten, müssen Sie das Etikett-Tag in die Container-Form-Gruppe einfügen, z. B.:
<div> <label> E -Mail -Adresse </Label> </div> <div> <Eingabe type = "E -Mail" platzehalter = "Bitte geben Sie Ihre E -Mail -Nummer ein"> </div>
Die Effekte sind wie folgt:
Um den Effekt von Verbindungsformularen zu erreichen, fügen Sie einfach den Klassennamen hinzu. Form-Inline dem Formularelement. Das Implementierungsprinzip ist:
Stellen Sie das Formularsteuerung auf ein Inline-Blockelement (Anzeige: Inline-Block) ein, um die Formularsteuerung auf einer Zeile anzuzeigen.
Beispiel:
<form> <Viv> <Label> E -Mail </Label> <Eingabe type = "E -Mail" platzhalter = "Bitte geben Sie die E -Mail -Nummer ein"> </div> <div> <Label> Kennwort </Label> <Eingabe type = "Passwort" Placeholder = "Bitte geben Sie das Passwort ein.
Die Effekte sind wie folgt:
Haben Sie festgestellt, dass der Code eindeutig über ein Etikett-Tag verfügt und nicht im Container-Form-Gruppen platziert ist, und die Eingabe wird nicht verpackt. Noch seltsamer ist, dass der Inhalt des Label -Tags nicht angezeigt wird! Wenn Sie sorgfältig nachsehen, hat das Etikett-Tag den Klassennamen nur sr hinzugefügt, was bedeutet, dass es das Etikett verbirgt. Schauen wir uns den Quellcode an:
.sr nur {Position: absolut; Breite: 1px; Höhe: 1px; Padding: 0; Rand: -1px; Überlauf: versteckt; Clip: Rect (0, 0, 0, 0); Rand: 0;}Ist es nicht unnötig? ? ? Dies ist jedoch genau einer der Vorteile des Bootstrap -Frameworks. Wenn das Etikett nicht für die Eingabesteuerung festgelegt ist, wird der Bildschirmleser nicht korrekt erkannt und hat auch bestimmte Überlegungen für Menschen mit Behinderungen.
Horizontale Form
Die Implementierung horizontaler Form -Effekte in Bootstrap erfordert die folgenden zwei Bedingungen:
1. Verwenden Sie den Klassennamen. Form-horizontal im Formularelement
2. Grid -System mit Bootstrap -Framework (Details: Detaillierte Erläuterung des Bootstrap -Gittersystems)
Verwenden Sie den Klassennamen.Form-Horizontal in Formularelement hauptsächlich die folgenden Funktionen:
1. Stellen Sie die Polster- und Randwerte der Formelemente ein
2. Ändern Sie die Expressionsform von. Von Gruppen, ähnlich wie die Zeile des Gittersystems
CSS -Quellcode:
.Form-horizontale .Control-Label, .form-horizontal .radio, .Form-horizontal. {min-height: 27px;}. Form-horizontal .Form-Gruppen {Margin-Right: -15px; Margin-Links: -15px; rechts;}}. Form-horizontal .has-feedback .form-control-feedback {top: 0; rechts: 15px;}Beispiel:
<form> <Viv> <Label> E -Mail </Label> <div> <Eingabe type = "E -Mail" placeholder = "Bitte geben Sie Ihre E -Mail ein. Kennwort </Label> </div> </div> <div> <div> <taste> Geben Sie Ihre E -Mail </button> </div> </form> ein
Die Effekte sind wie folgt:
Eingangsbox mit einem Zeilen
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, da das Bootstrap -Framework Stile in Form von Eingabe definiert [type = "?"], Wie z.
Um die Steuerelemente in verschiedenen Formstilen gut aussehen zu lassen, müssen Sie den Klassennamen hinzufügen. Form-Control
<Formrolle = "Form"> <div> <Eingabe type = "E -Mail" placeholder = "E -Mail eingeben"> </div> </form>
Auswahlfeld nach unten auswählen
Die Multi-Line-Auswahl legt den Wert des Mehrfachattributs auf mehrere fest
<form rollen = "form"> <div> <wice> <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>
Textfeld Textbereich
Das Textfeld entspricht der ursprünglichen Verwendungsmethode. Das Einstellen von Zeilen kann seine Höhe definieren und das Einstellen von Cols kann seine Breite definieren. Wenn der Klassenname .form-kontroll zum textarea-Element hinzugefügt wird, muss das COLS-Attribut nicht festgelegt werden, da die Raumbreite des Ziel-Kontrollstil-Ziels im Bootstrap-Framework 100% oder automatisch ist.
<Formrolle = "Form"> <div> <textarea rows = "3"> </textarea> </div> </form>
Kontrollkästchen und Radio -Box Radio
Es wird einige geringfügige Probleme mit dem Kontrollkästchen und dem Radio in Verbindung mit Etiketten -Tags (z. B. Ausrichtungsfragen) geben
<form> <div> <label> <Eingabe type = "pokeBox"> Machen Sie sich das Kennwort erinnern </label> </div> <div> <label> <Eingabe type = "radio" name = "optionsRadios" id = "optionsRadios1" geprüft> wie </label> </div> <div> <div> <darga> </label = "radio".
1. Ob es sich um ein Checkbox oder Radio handelt, sie sind in Etiketten eingewickelt.
2. Kontrollkästchen und Etiketten -Tag werden in einem Container namens. Checkbox platziert
3. Radio und Etikett werden in einem Container namens .Radio platziert. Bootstrap verwendet hauptsächlich. Checkbox- und .radio -Stile, um die Ausrichtung von Kontrollkästchen, Optionsschaltflächen und Etiketten zu verarbeiten.
.Radio,. Checkbox {Anzeige: Block; min-hohe: 20px; padding-links: 20px; Margin-Top: 10px; Rand-Bottom: 10px;}. Radio-Etikett, .CheckBox-Label {Anzeige: Inline; Schriftgewicht: Normal; Cursor: Pointer;}. input [type = "checkbox"], CheckBox-Inline-Eingabe [type = "postbox"] {float: links; margin-links: -20px;}. Radio + .Radio, .CheckBox + .CheckBox {Margin-Top: -5px;}Kontrollkästchen und Optionsfelder horizontal
1. Wenn das Kontrollkästchen horizontal angeordnet werden muss, müssen Sie den Klassennamen nur auf der Etikettetikettsbezeichnung hinzufügen. Checkbox-Inline
2. Wenn Radio horizontale Anordnung benötigt, fügen Sie einfach den Klassennamen hinzu.
Hier ist der CSS -Quellcode:
.Radio-Inline,. <div> <label> <Eingabe type = "radio" name = "sex" value = "option1"> männlich </label> <label> <Eingabe type = "radio" name = "sex" value = "option2"> weiblich </label> <label> <input type = "radio name =" sex "value" option3 "> neutral </label> </div> </div>
Status des Formularkontrollsteuers
1. Fokusstatus:
Der Fokuszustand wird durch Pseudoklasse: Fokus implementiert. Der Fokuszustand im Bootstrap Form Control löscht den Standardstil des Umrisss und fügt den Schatteneffekt erneut hinzu. Das Folgende ist
CSS -Quellcode:
.Form-kontroll: Fokus {Border-Color: #66afe9; Umriss: 0; -Webkit-Box-Shadow: Einschub 0 1px 1pxrgba (0,0,0, .075), 0 0 8px rgba (102, 175, 233, .6). 8px RGBA (102, 175, 233, .6);};Wie aus dem Quellcode hervorgeht, müssen Sie den Klassennamen zur Steuerung hinzufügen.
<form> <div> <div> <Eingabe type = "text" placeholder = "kein Effekt in Focus"> </div> <div> <Eingabe type = "text" placeholder = "Effekt in Focus"> </div> </div> </form>
Der Effekt von Datei-, Radio- und Kontrollsteuerungen im Fokus unterscheidet sich auch von der der normalen Eingabesteuerelemente. Das Folgende ist der Quellcode
input [type = "file"]: fokus, input [type = "radio"]: focus, input [type = "postbox"]: focus {surteline: dünn gepunktet; scrine: 5px auto -webkit-fokus-ring-color; asline-offset: -2px;}2. Status deaktivieren:
Fügen Sie einfach die für die entsprechende Formularsteuerung deaktivierte Eigenschaft hinzu. Das Folgende ist der CSS -Quellcode:
.form-control [deaktiviert], Form-Control [readonly], fieldset [deaktiviert] .form-control {cursor: nicht verurteilt; Hintergrundfarbe: #eee; Opazität: 1;} input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .Radio-inline, Fieldset [deaktiviert] .CheckBox, Fieldset [deaktiviert] .CheckBox-inline {Cursor: nicht geäftet;}Beispiel:
<Eingabe type = "text" placeholder = "Formular deaktiviert" deaktiviert>
Wenn Fieldset die deaktivierte Eigenschaft festlegt, wird die gesamte Domäne deaktiviert
Beispiel:
<form role="form"><fieldset disabled><div><label> The input box is disabled</label><input type="text" placeholder="disable input"></div><div><label>drop-down box is disabled</label><select><option>1</option><option>2</option><option>3</option><option>4</option></select></div><div><label > <Eingabe type = "Kontrollkästchen"> Optionsfeld ist deaktiviert </label> </div> <Schaltfläche Typ = "Senden"> Senden </button> </fieldset> </form>
Der Effekt lautet wie folgt: (Ein deaktiviertes Symbol erscheint, wenn die Maus nach oben bewegt wird. Hier ist ein direkter Screenshot, der nicht zu sehen ist).
.... Überprüfungsstatus
Bootstrap liefert die folgenden Effekte:
1. Has-Warning: Warnstatus gelb
2. Has-Error: Fehlerstatus rot
3..
Fügen Sie beim Verwenden einfach den Namen der Statusklasse dem Formular-Gruppen-Container hinzu. Die Effekte sind in den drei Zuständen gleich, aber die Farben sind unterschiedlich.
Beispiel:
<form> <div> <Label> Erfolgsstatus </Label> <Eingabe type = "text" placeholder = "Erfolgsstatus"> </div> <div> <Label> Fehlerstatus </label> <Eingabe type = "text" placeholder = "Fehlerstatus"> </div> <div> <Label> Warnungsstatus </Label> </label> </label> </sortmolder ".
Die Effekte sind wie folgt:
Manchmal liefern verschiedene Zustände unterschiedliche Symbole bei der Validierung des Formulars. Wenn Sie das Symbol im entsprechenden Zustand anzeigen möchten, müssen Sie nur den Klassennamen hinzufügen. Beachten Sie, dass es mit .has-error, .has-success, .has-warning verwendet werden sollte.
Die kleinen Symbole von Bootstrap werden alle mit @font-face hergestellt. wie:
<span class = ”Glyphicon-Warning Form-Control-Feedback”> </span>
Beispiel:
<form><div><label> Success Status</label><input type="text" placeholder="success Status"><span></span></div><div><label>Error Status</label><input type="text" placeholder="Error Status"><span></span></div><div><label>Warning Status</label><input type="text" placeholder="warning Status "> <span> </span> </div> </form>
Die Effekte sind wie folgt:
Eingabeaufforderungsinformationen bilden
Im Allgemeinen sind bei der Verifizierung von Formular unterschiedliche Eingabeaufforderungsinformationen erforderlich. Verwenden Sie .Help-Block im Bootstrap-Framework, um die Eingabeaufforderungsinformationen in Blöcken anzuzeigen und am unteren Rand des Steuerelements anzuzeigen.
Hier ist der CSS -Quellcode:
.Help-Block {Anzeige: Block; Rand: 5px; Rand-Bottom: 10px; Farbe: #737373;}Beispiel:
<form> <Viv> <Label> Erfolgreicher Status </Label> <Eingabe type = "text" placeholder = "Erfolgreicher Status"> <span> Die Eingabeinformationen sind korrekt </span> <span> </span> </div> <div> <Label> Fehlerstatus </label> <Eingabe type = "text Status </label> <Eingabe type = "text" placeholder = "Warnstatus"> <span> Bitte geben Sie die richtigen Informationen ein </span> <span> </span> </div> </form>
Die Effekte sind wie folgt:
Wenn Sie Bootstrap.css nicht Ihren eigenen Code hinzufügen möchten und das Design dies benötigt, können Sie beispielsweise das Grid -System von Bootstrap verwenden:
<Formrolle = "Form"> <div> <label für = "inputSuccess1"> Erfolgsstatus </label> <div> <div> <Eingabe type = "text" id = "inputSuccess1" placeholder = "Erfolgsstatus"> </div> <span> Die eingegebenen Informationen sind korrekt </span> </div> </div> </Form>
Das obige ist der relevante Inhalt der vom Editor vorgelegten Bootstrap -Formularkomponente. Ich hoffe, es wird für Sie hilfreich sein!