Einführung in Schaltflächenstile und Bildstile in Bootstrap

In diesem Artikel werden Ihnen die Stile und Bildstile vorgestellt, die Schaltflächen und Formulare in Bootstrap kombinieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Video-Tutorials zum Thema Bootstrap lernen und erhalten möchten, können Sie auch Folgendes besuchen: Bootstrap-Tutorial!

Bootstrap-Button-Stil

1. Form-Gruppe: Setzen Sie die form Combine

<form>
   <p class="form-group">
   <label></label>
   <input type="text" class="form-control"/>
   </p>
</form>

2. Inline-Formular

.form-inline: Lassen Sie das Formular linksbündig schweben und in einer Reihe ausrichten

<form class="form-inline">
   <input type="text" class="form-control"/>
   <input type="text" class="form-control"/>
</form>

3. Formulargruppierung

.input-group: Hat beim Gruppieren die gleiche Funktion wie form-group : Ein zu gruppierendes Element

<form>
   <p class="input-group">
   <p class="input-group-addon">合组</p>
   <input type="text" class="form-control"/>
   </p>
</form>

4. Horizontale Anordnung

Format:

<form class="form-horizontal">
   <p class="form-group">
   <label></label>
   <input.../>
   </p>
</form>

5. Radio-Kontrollkästchen

.checkbox-inline: Verwenden Sie das übergeordnete Element Element des Kontrollkästchens, um die Kontrollkästchen in eine Zeile umzuwandeln

<form>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择1
   </label>
   </p>
   <p class="radio">
   <label>
   <input type="radio" name="check" id="" value="" />选择2
   </label>
   </p>
</form>

Dropdown-Liste

Format:

<form>
   <select class="form-control">
   <option>下拉列表1</option>
   <option>下拉列表2</option>
   </select>
</form>

7 🎜>

Ändern Sie die Farbe des Rahmens und des Schattens, wenn Sie den Fokus erhalten

.has-error: error red.has-success: success green

.has-warning: Warnung gelb

.control-label: Label-Synchronisierung entsprechender Status

Format:

<form>
   <p class="form-group has-warning">
   <label for="user" class="control-label">用户</label>
   <input type="text" class="form-control" id="user" placeholder="请输入用户名"/>
   </p>
</form>

control-label Diese Klasse ist der Label-Synchronisierung entsprechender Status

8. Fügen Sie zusätzliche Symbole hinzu

.has-feedback: Legen Sie eine Position fest

.form-control-feedback: Legen Sie ein Element relativ zur Positionierung des has-feedback-Klassenelements fest

.glyphicon glyphicon-ok: Häkchensymbol

.glyphicon-warning-sign: Warnsymbol

glyphicon-remove: Fehlersymbol

....

Format:

<p class="form-group has-feedback">
   <input type="text" class="form-control">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</p>

给 span 设置 form-control-feedback 这个类，让它相对于 has-feedback 进行定位，定位到input 框里面的右侧

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 ：

<input type="text" class="form-control input-sm">

或者直接给父元素设置

<p class="form-group-lg"></p>

响应式图片：

.img-responive : 图片会跟随屏幕的缩放而缩放

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

.img-thumbnail : 给图片加一个边框

Das obige ist der detaillierte Inhalt vonEinführung in Schaltflächenstile und Bildstile in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!