Introduction to button styles and image styles in Bootstrap

This article will introduce to you the styles and picture styles that combine buttons and forms in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. If you want to learn and get more bootstrap related video tutorials, you can also visit: bootstrap tutorial!

Bootstrap button style

1. Form group

.form-group: put the form Put it all together

.form-control: Set the style to width 100%, rounded borders, appropriate shade of blue...

Format:

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

Note : Only when the type of the input box is set correctly can it be given the correct style.

2. Inline form

.form-inline: Let the form float left-aligned and line up in a row

Format:

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

3. Form group

.input-group: has the same function as form-group. Use

.input-group-addon when grouping: An element to be grouped

Format:

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

4. Horizontal arrangement

.form-horizontal: Horizontally arranged form, through the form Add the .form-horizontal class and use Bootstrap's preset grid class to layout label labels and control groups horizontally side by side. Doing so will change the behavior of .form-group so that it behaves like a row in a grid system, so there is no need to add an additional .row

Format:

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

5. Single-select checkbox

.checkbox: Used as the parent element of the checkbox to turn the checkbox into a block-level element

.checkbox-inline: Use it as the parent element of the check box to make the check boxes into a line

.radio: Use it as the parent element of the radio button box to turn the radio button into a block-level element

. radio-inline: Used as the parent element of the radio button box. Put the radio button box into a line.

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>

6. Drop-down list

.from-control: Set the style to width 100%, rounded border, appropriate blue shadow...

Format:

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

7. Verification status

Change the color of the border and shadow when getting focus

.has-error: error red

.has-success: success green

.has-warning: warning yellow

.control-label: label synchronization corresponding 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 This class is label synchronization corresponding Status

8. Add additional icons

.has-feedback: Set a position

.form-control-feedback: Set an element relative to has-feedback Class element positioning

.glyphicon glyphicon-ok: check mark icon

.glyphicon-warning-sign: warning icon

glyphicon-remove: error icon

....

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 : 给图片加一个边框

The above is the detailed content of Introduction to button styles and image styles in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!