Heim >Web-Frontend >js-Tutorial >Kapitel 4: BootStrap-Formulare und Bilder_Javascript-Kenntnisse

Kapitel 4: BootStrap-Formulare und Bilder_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:04:011670Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn