Heim >Web-Frontend >js-Tutorial >Kapitel 4: BootStrap-Formulare und Bilder_Javascript-Kenntnisse
Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.
Lernpunkte:
1. Formular
2. Bilder
In dieser Lektion lernen wir hauptsächlich Bootstrap-Formular- und Bildfunktionen kennen und zeigen verschiedene umfangreiche Effekte durch integrierte CSS-Definitionen an.
1. Formular
Bootstrap bietet Entwicklern einige umfangreiche Formularstile zur Verwendung.
1. Grundformat
//实现基本的表单样式 <form> <div class="form-group"> <label>电子邮件</label> <input type="email" class="form-control" placeholder="请输入您的电子邮件"> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control" placeholder="请输入您的密码"> </div> </form>
Hinweis: Nur wenn der Typ des Eingabefelds richtig eingestellt ist, kann ihm der richtige Stil zugewiesen werden. Zu den unterstützten Eingabefeldsteuerelementen gehören: Text, Passwort, Datum/Uhrzeit, Datum/Uhrzeit-Lokal, Datum, Monat, Uhrzeit, Woche, Nummer, E-Mail, URL, Suche, Telefonnummer und Farbe.
2. Inline-Formular
//让表单左对齐浮动,并表现为 inline-block 内联块结构 <form class="form-inline">
Hinweis: Wenn es weniger als 768 Pixel beträgt, wird der exklusive Stil wiederhergestellt
3. Formularkombination
//前后增加片段 <div class="input-group"> <div class="input-group-addon">¥</div> <input type="text" class="form-control"> <div class="input-group-addon">.00</div> </div>
4. Horizontale Anordnung
//让表单内的元素保持水平排列 <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">电子邮件</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入您的电子邮件"> </div> </div> </form>
Hinweis: Hier wird das col-sm-Rastersystem verwendet, das in den folgenden Kapiteln erläutert wird, und control-label bedeutet Synchronisierung mit dem Stil des übergeordneten Elements.
5. Kontrollkästchen und Optionsfelder
//设置复选框,在一行 <div class="checkbox"> <label> <input type="checkbox">体育 </label> </div> <div class="checkbox"> <label> <input type="checkbox">音乐 </label> </div> //设置禁用的复选框 <div class="checkbox disabled"> <label> <input type="checkbox" disabled>音乐 </label> </div> //设置内联一行显示的复选框 <label class="checkbox-inline"> <input type="checkbox">体育</label> <label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐</label> //设置单选框 <div class="radio disabled"> <label> <input type="radio" name="sex" disabled>男</label> </div>
6. Dropdown-Liste
//设置下拉列表 <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
7. Verifizierungsstatus
//设置为错误状态 <div class="form-group has-error">
Hinweis: Es gibt weitere Status wie folgt:
样式说明 has-error错误状态 has-success成功状态 has-warning警告状态 //label 标签同步相应状态 <label class="control-label">Input with success</label>
8. Fügen Sie zusätzliche Symbole hinzu
//文本框右侧内置文本图标 <div class="form-group has-feedback"> <label>电子邮件</label> <input type="email" class="form-control"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div>
Hinweis: Zusätzlich zu glyphicon-ok gibt es in der folgenden Tabelle noch mehrere andere:
样式说明 glyphicon-ok成功状态 glyphicon-warning-sign警告状态 glyphicon-remove错误状态
9. Kontrollgröße
//从大到小 <input type="password" class="form-control input-lg"> <input type="password" class="form-control"> <input type="password" class="form-control input-sm">
Hinweis: Sie können auch die übergeordneten Elemente form-group-lg und form-group-sm so einstellen, dass sie angepasst werden.
2. Bild
Bootstrap bietet Entwicklern einige umfangreiche Bildstile zur Verwendung.
1. Bildform
//三种形状 <img src="img/pic.png" alt="图片" class="img-rounded"> <img src="img/pic.png" alt="图片" class="img-circle"> <img src="img/pic.png" alt="图片" class="img-thumbnail"> //响应式图片 <img src="img/pic.png" alt="图片" class="img-responsive">
Das Obige ist der relevante Inhalt der Bootstrap-Formulare und Bilder, die Ihnen der Herausgeber vorgestellt hat. Ich hoffe, er wird Ihnen hilfreich sein!