Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Schlüsselpunkte für das Lernen:
1. Form
2. Bilder
In dieser Lektion lernen wir hauptsächlich Bootstrap-Formulare und Bildfunktionen kennen und zeigen verschiedene reiche Effekte durch integrierte CSS-Definition.
eins. Bilden
Bootstrap bietet Entwicklern einige reichhaltige Formstile.
1. Grundformat
// Implementieren Sie grundlegender Formularstil <form> <Div> <label> E -Mail </label> <Eingabe type = "E -Mail" platzhalter = "Bitte geben Sie Ihre E -Mail ein"> </div> <div> <label> Passwort </Label> <Eingabe type = "Passwort" PlaceHolder = "Bitte geben Sie Ihr Passwort ein."> </Div> </Form>
Hinweis: Der richtige Stil kann nur angegeben werden, wenn der Typtyp des Eingangsfelds korrekt eingestellt ist. Zu den Steuerelementen des unterstützten Eingabefeldes gehören: Text, Kennwort, DateTime, DateTime-Local, Datum, Monat, Zeit, Woche, Nummer, E-Mail, URL, Suche, Tel und Farbe.
2. Inline -Form
// Lassen Sie das Formular ausgerichtet und schwebten und verhalten sich als Inline-Block-Inline-Blockstruktur <form>
Hinweis: Wenn es weniger als 768px ist, wird der exklusive Stil wiederhergestellt.
3. Form Gruppierung
// Fragmente vor und nach <div> <div> ￥ </div> <Eingabe type = "text"> <div> .00 </div> </div> hinzufügen
4. Horizontale Anordnung
// Halten Sie die Elemente im Formular horizontal angeordnet <Formular> <div> <label> E -Mail </Label> <div> <Eingabe type = "E -Mail" placeholder = "Bitte geben Sie Ihre E -Mail ein.
Hinweis: Das Col-SM-Rastersystem wird hier verwendet, und die folgenden Kapitel konzentrieren sich darauf, es zu erklären, während das Steuerelement die Synchronisation mit dem übergeordneten Elementstil darstellt.
5. Kontrollkästchen und Funkkästchen
// Setzen Sie das Kontrollkästchen in einer Zeile <Div> <label> <Eingabe -Typ = "CheckBox"> Sport </Label> </div> <div> <label> <Eingabe -Typ = "Kontrollkästchen"> Musik </label> </div> // Legen Sie das Deaktivierte Kontrollkästchen Deaktiviert. type = "checkbox"> sport </label> <label> <Eingabe type = "CheckBox" deaktiviert> Musik </Label> // Legen Sie das Radiofeld <Div> <label> <Eingabe type = "radio" name = "sex" deaktiviert> männlich </label> </div>
6. Dropdown-Liste
// Die Drop-Down-Liste setzen </Option> </Option> </Option> </Option> </Option> </Option> 3 </Option> </Option> 4 </Option> </option> 5 </Option> </select>
7. Status überprüfen
// auf Fehlerstatus <div> festlegen
Hinweis: Es gibt andere Status wie folgt:
Stilbeschreibung Has-Error-Fehlerstatus Has-SUCCESS-Erfolgsstatus Has-Warnwarnstatus // Etikett-Tag-Synchronisation entsprechende Status <label> Eingabe mit Erfolg </label>
8. zusätzliche Symbole hinzufügen
// integriertes Textymbol auf der rechten Seite des Textfelds <Div> <Label> E-Mail </Label> <Eingabe type = "E-Mail"> <span> </span> </div>
Hinweis: Zusätzlich zu Glyphicon-OK finden Sie einige Tabellen unten:
Stilbeschreibung Glyphicon-OK-Erfolgsstatus Glyphicon-Warn-Sign-Warnstatus Glyphicon-Remove-Fehlerstatus
9. Steuern Sie die Größe
// von groß nach klein <Eingabe type = "password"> <Eingabe type = "password"> <Eingabe type = "password">>
Hinweis: Sie können auch die übergeordneten Elemente Form-Gruppen-LG und Form-Gruppen-SM einstellen, um sie einzustellen.
zwei. Bild
Bootstrap bietet Entwickler einige reichhaltige Bilderstile.
1. Bildform
// Drei Formen <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> // Responsive Bild <img src = "img/pic.png">>
Das obige Inhalt ist der Inhalt von Bootstrap -Formularen und -bildern, die Ihnen vom Editor vorgestellt wurden. Ich hoffe, es wird für alle hilfreich sein!