Bilden
Grundform
Für Eingabe, TextArea und Auswahl im Formular füge ich normalerweise die Klasse "Form-kontroll" hinzu, die die Standardbreite des Elements auf 100% festlegt (nicht absolut, wie das unten erwähnte Inline-Formular). Und jedes Element (einschließlich der einbezogenen Elemente) wird mit einer "Formgruppe" hinzugefügt. Es hat nur einen Stil. Randboot: 15px.
<form action = ""> <div> <label for = ""> userername: </label> <Eingabe type = "text"/> </div> <div> <label für = ""> Passwort: </Label> <Eingabe type = "Passwort"/> </div> </Form>
Inline -Form
Durch Hinzufügen von "Formin-Inline" zum äußersten Element (das übergeordnete Element der Formgruppe). Gibt an, dass alle Formularelemente in einer Zeile angezeigt werden (mit ausreichender Breite). Und ".Form-inline .Form-Gruppe" wird als Inline-Block angezeigt. Und die Breite von ".Form-inline .Form-Control" ist automatisch. Dies stellt sicher, dass es in einer Zeile angezeigt wird.
<form action = ""> <div> <label for = ""> userername: </label> <Eingabe type = "text"/> </div> <div> <label für = ""> Passwort: </Label> <Eingabe type = "Passwort"/> </div> </Form>
Horizontale Form
Im Gegensatz zu normalen und Inline -Formularen. Wenn Sie in einer Zeile Beschriftungs- und Eingabedformularelemente anzeigen möchten, müssen Sie "Form-Horizontal" verwenden. Diese Art von gemeinsamer "Formgruppe" entspricht der "Reihe" im Netzsystem. Die Unterklassen haben also "col-md- Wenn Sie dies nicht hinzufügen, scheint das Etikett und die Eingabe inkompatibel zu sein.
<form action = ""> <div> <Label für = ""> Benutzername: </label> <div> <Eingabe type = "text"/> </div> </div> <div> <label für = ""> Passwort: </Label> <div> <Eingabe type = "Passwort"/> </div> </div> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </Form> </form>
Formgröße
Diejenigen, die die Eingangsgröße steuern, sind "Input-SM" und "Input-LG", wodurch das Eingangs-Eingangsfeld kleiner oder größer als normal aussieht. Entsprechend ist die Größe des Textes im Etikett. Sie müssen gleichzeitig "Form-Gruppen-SM" und "Form-Group-LG" zum übergeordneten "Form-Gruppen" hinzufügen. Wie im Kennworteingabefeld einer Demo oben.
Eingabefeld
In HTML5 unterstützt der Typ im Eingabefeld -Tag mehr Typen. Es gibt Text, Kennwort, DataTime, DataTime-Local, Datum, Monat, Zeit, Woche, Nummer, E-Mail, URL, Suche, Tel und Farbe. Der richtige Stil kann nur auf dem Etikett <eintrag> angezeigt werden, wenn ein bestimmter Typ zugewiesen ist. Einige Elemente können ihre Auswirkungen nur auf Ihr Telefon zeigen.
Dropdown-Feld auswählen
Ähnlich wie beim Eingabefeld. Es änderte gerade die Eingabe in die Auswahl und fügte die Klasse "Form-Kontroll" hinzu.
<form action = ""> <div> <label for = ""> Bitte auswählen: </label> <div> <select name = "" id = ""> <option value = ""> html </option> <option value = ""> css </option> <option value = ""> javascript </option> option = option. " value = ""> nodejs </option> </select> </div> </form>
col-md-pull-* ist der linke Versatz.
Textfeld
Ähnlich wie oben.
<form action = ""> <div> <label for = ""> textArea: </label> <div> <textArea name = "" id = "" rows = "3"> Hallo </textarea> </div> </div> </form>
Mehrfach- und Radierkästen
Um das Radio- und Kontrollkästchen -Elemente in einer Zeile anzuzeigen und sich mit dem Etikett auszurichten. Bootstrap bietet zwei Optionen. Eins:
<div><label for=""><input type="radio" name="sex"/>Male<input type="radio" name="sex"/>Female<input type="radio" name="sex"/>Confidential</label><label for=""><input type="checkbox"/>HTML<input type="checkbox"/>CSS<input type="checkbox"/>JavaScript</label></div>
Das Etikett selbst ist Inline-Block. Aber .Radio, .CheckBox selbst ist blockiert.
Wickeln Sie also mehrere Radio- oder Kontrollkästchen mit einem Etikett ein, die unprofessionell erscheinen (haha). Auch viele sind sehr unansehnlich. Die zweite Art des Schreibens ist also hier.
<div><label for=""><input type="radio" name="sex"/>Male</label><label for=""><input type="radio" name="sex"/>Female</label><label for=""><input type="radio" name="sex"/>Confidential</label><br /><label for=""><input type="checkbox" />HTML</label><label for = ""> <Eingabe type = "CheckBox"/> CSS </label> <Label für = ""> <Eingabetyp = "CheckBox"/> JavaScript </label> </div>
Formüberprüfung
Has-Success: Erfolg, grün.
Has-Warning: Warnung, Gelb.
Has-Error: Fehler, rot.
Fügen Sie einfach den entsprechenden Stil zur "Formgruppe" hinzu. Zur besseren Überprüfung können wir weiterhin "Has-Feedback" hinzufügen. Fügen Sie dann nach Eingabe ("Form-Kontroll") "Form-kontroll-feedback" zum Elementebene hinzu. Die Semantik ist klar und klar. Der Code ist wie folgt:
<form action=""><div><label for="">Username: </label><div><input type="text" /><span></span></div></div><div><label for="">Password: </label><div><input type="text" /><span></span></div></div><div><label for="">Email: </label><div><input Typ = "text"/> <span> </span> </span> </form>
Taste
Multi-Knopf- und Button-Stil
Es gibt verschiedene Tastenstile in Bootstrap. Taste, A, Eingabe, Spannweite, Div usw. können alle zu Tasten werden, solange es "BTN BTN-Stil" hat. Für eine bessere Kompatibilität und Lesbarkeit ist es jedoch am besten, nicht auf diese Weise zu verwenden. Versuchen Sie, Tasten -Tags zu verwenden.
Button> Schaltfläche </Schaltfläche> <taste> Schaltfläche </Schaltfläche> <taste> Schaltfläche </Schaltfläche> <taste> Schaltfläche </Schaltfläche> <taste> Schaltfläche </button> <taste> Schaltfläche </button> <!-BTN-Block macht die Schaltfläche exklusiv zu einer zu einem. Zeile-> <taste> Schaltfläche </Schaltfläche> <Button> Schaltfläche </schaltet> <button> Schaltfläche </schaltet> <taste> Schaltfläche </Schaltfläche> <Taste> Schaltfläche </button> <taste> Schaltfläche </schaltet> <Taste> Schaltfläche </button> <Taste> Taste </button
Knopfgröße
Wie oben erwähnt, verwenden Sie "BTN-XS", "BTN-SM", "BTN-LG", um die Knopfgröße einzustellen.
Schaltflächenstatus
Wie oben erwähnt, sind die effektiven "aktiv" und "Fokus".
Bild
IMG Responsive: Responsive Bilder, hauptsächlich auf reaktionsschnelles Design.
IMG-Rund: Abgerundete Ecken.
IMG-Kreis: Runde.
IMG-Thumbnail: Thumbnail, dargestellt durch eine Grenze zur Außenschicht.
Symbol
BootStart hat viele kleine Symbole integriert. Die Verwendungsmethode lautet wie folgt. Tatsächlich wurde es in dem obigen "Form-Kontroll-Feedback" verwendet. Unter ihnen ist "Glyphicon" ein Muss.
<span> </span>
Eingabefeldgruppe
Die Gruppe Eingabefeld ist eine "Eingabegruppe". Wir müssen einige Suffixe (wie E-Mail-Suffixe) und Präfixe (Geldsymbole ￥, $ usw.) hinzufügen, um "Input-Gruppen-Addon" oder "Input-Group-BTN" zu verwenden. Einfache und klare Semantik. wie folgt:
<!-E-Mail-Box-> <div> <Eingabe type = "text" /><span>@gmail.com</span></div><! type="text"/></div><!--Multiple choice--><div><span><input type="checkbox"/></span><input type="text" /></div><!--Taobao input box group--><div><div><button data-toggle="dropdown">Please select <span></span></button><ul><li><a href = "javaScript: void (0)"> baby </a> </li> <li> <a href = "javaScript: void (0)"> shode </a> </li> </ul> </div> <Eingabe type = "text"/> <span> </button> </span> </div> </div> </div>
Zusammenfassung
"Form-Horizontal" und "Form-Inline" sind beide die äußersten Etiketten der Formgruppe.
Eine Formgruppe nimmt "Formgruppe" als übergeordnetes Element. Ähnliche sind "Input-Gruppen" und "Knopfgruppen", die in Zukunft möglicherweise verwendet werden können. Sie können alle dimensioniert werden.
"Form-Group-LG", "Input-Lg", "Input-Group-Lg", "Btn-Lg" usw.
Der Überprüfungsstil hat "Has-Irrtum", "Has-Success", "Has-Warning". "Has-Feedback" kann demselben Element hinzugefügt werden. Um die Überprüfung vollständiger zu gestalten.
Es gibt viele Stile für Schaltflächen und Größen können eingestellt werden.
Vier gemeinsame Stile für Bilder.
BootStarp hat viele Symbole integriert.
Die Gruppe Eingabefeld beginnt mit "Eingangsgruppe", und die untergeordneten Elemente umfassen "Eingabegruppen-Addon", "Input-Group-BTN" usw.
Das obige ist eine vollständige Sammlung von Formularen in Bootstrap, die Ihnen vom Herausgeber 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!