Bootstrap按钮样式

 

　　1.表单组

 

　　.form-group:把表单组合起来

 

　　.form-control:将样式设置为width为100%，圆角边框，适当的蓝色阴影...

 

　　格式：

 

　　<form>

 

　　<pclass="form-group">

 

　　<label></label>

 

　　<inputtype="text"class="form-control"/>

 

　　</p>

 

　　</form>

 

　　注意：只有正确设置了输入框的type类型，才能被赋予正确的样式。

 

　　2.内联表单

 

　　.form-inline:让表单左对齐浮动，排成一行

 

　　格式：

 

　　<formclass="form-inline">

 

　　<inputtype="text"class="form-control"/>

 

　　<inputtype="text"class="form-control"/>

 

　　</form>

 

　　3.表单合组

 

　　.input-group:和form-group作用一样，在合组的时候使用

 

　　.input-group-addon:要合组的一个元素

 

　　格式：

 

　　<form>

 

　　<pclass="input-group">

 

　　<pclass="input-group-addon">合组</p>

 

　　<inputtype="text"class="form-control"/>

 

　　</p>

 

　　</form>

 

　　4.水平排列

 

　　.form-horizontal:水平排列的表单，通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了

 

　　格式：

 

　　<formclass="form-horizontal">

 

　　<pclass="form-group">

 

　　<label></label>

 

　　<input.../>

 

　　</p>

 

　　</form>

 

　　5.单选复选框

 

　　.checkbox:复选框的父级元素使用，将复选框变为块级元素

 

　　.checkbox-inline:复选框的父级元素使用，将复选框拍成一行

 

　　.radio:单选框的父级元素使用，将单选框变为块级元素

 

　　.radio-inline:单选框的父级元素使用，将单选框拍成一行

 

　　格式：

 

　　<form>

 

　　<pclass="radio">

 

　　<label>

 

　　<inputtype="radio"name="check"id=""value=""/>选择1

 

　　</label>

 

　　</p>

 

　　<pclass="radio">

 

　　<label>

 

　　<inputtype="radio"name="check"id=""value=""/>选择2

 

　　</label>

 

　　</p>

 

　　</form>

 

　　6.下拉列表

 

　　.from-control:将样式设置为width为100%，圆角边框，适当的蓝色阴影...

 

　　格式：

 

　　<form>

 

　　<selectclass="form-control">

 

　　<option>下拉列表1</option>

 

　　<option>下拉列表2</option>

 

　　</select>

 

　　</form>

 

　　7.校验状态

 

　　改变获取焦点时边框和阴影的颜色

 

　　.has-error:错误的红色

 

　　.has-success:成功的绿色

 

　　.has-warning:警告的黄色

 

　　.control-label:标签同步相应状态

 

　　格式:

 

　　<form>

 

　　<pclass="form-grouphas-warning">

 

　　<labelfor="user"class="control-label">用户</label>

 

　　<inputtype="text"class="form-control"id="user"placeholder="请输入用户名"/>

 

　　</p>

 

　　</form>

 

　　control-label这个类是label同步相应的状态

 

　　8.添加额外的图标

 

　　.has-feedback:设置一个位置

 

　　.form-control-feedback:设置一个元素，相对于有has-feedback类的元素定位

 

　　.glyphiconglyphicon-ok:对号图标

 

　　.glyphicon-warning-sign:警告图标

 

　　glyphicon-remove:错误图标

 

　　....

 

　　格式：

 

　　<pclass="form-grouphas-feedback">

 

　　<inputtype="text"class="form-control">

 

　　<spanclass="glyphiconglyphicon-okform-control-feedback"></span>

 

　　</p>

 

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

 

　　9.控制输入框大小

 

　　.input-lg:大输入框

 

　　.input-small:小输入框

 

　　.form-group-lg:大输入框

 

　　.form-group-sm:小输入框

 

　　格式：

 

　　<inputtype="text"class="form-controlinput-sm">

 

　　或者直接给父元素设置

 

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

 

　　响应式图片：

 

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

 

　　.img-rounded:圆角矩形图片

 

　　.img-circle:圆形图片

 

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






本文转载自中文网