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-control: Stil auf Breite 100 % setzen, abgerundeter Rand, passender blauer Schatten...

Format:

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

Hinweis: Nur wenn der Typ Ist das Eingabefeld richtig eingestellt, kann ihm der richtige Stil zugewiesen werden.

2. Inline-Formular

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

Format:

<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

Format:

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

4. Horizontale Anordnung

.form-horizontal: horizontal angeordnetes Formular, durch das Formular Hinzufügen die .form-horizontal-Klasse und verwenden Sie die voreingestellte Rasterklasse von Bootstrap, um Beschriftungen und Kontrollgruppen horizontal nebeneinander anzuordnen. Dadurch wird das Verhalten von .form-group so geändert, dass es sich wie eine Zeile in einem Rastersystem verhält, sodass keine zusätzliche .row hinzugefügt werden muss

Format:

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

5. Radio-Kontrollkästchen

.checkbox: Wird als übergeordnetes Element des Kontrollkästchens verwendet, um das Kontrollkästchen in ein Element auf Blockebene umzuwandeln

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

.radio: Verwenden Sie das übergeordnete Element des Optionsfelds, um das Optionsfeld in ein Element auf Blockebene umzuwandeln

. inline: Wird als übergeordnetes Element des Optionsfelds verwendet und fügt das Optionsfeld in eine Zeile ein

Format:

<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

.from-control: Stellen Sie den Stil auf 100 % ein, abgerundeter Rand, passender blauer Schatten...

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!