Bootstrap中的按钮样式,图片样式 介绍
Bootstrap按钮样式
1. 表单组
.form-group : 把表单组合起来
.form-control : 将样式设置为 width为100% ,圆角边框,适当的蓝色阴影...
格式:
form> p class="form-group"> label> /label> input tyPE="text" class="form-control"/> /p> /form>
注意:只有正确设置了输入框的 type 类型,才能被赋予正确的样式。
2. 内联表单
.form-inline : 让表单左对齐浮动,排成一行
格式:
form class="form-inline"> input type="text" class="form-control"/> input type="text" class="form-control"/> /form>
3. 表单合组
.input-group : 和 form-group 作用一样,在合组的时候使用
.input-group-addon : 要合组的一个元素
格式:
form> p class="input-group"> p class="input-group-addon"> 合组/p> input type="text" class="form-control"/> /p> /form>
4. 水平排列
.form-horizontal : 水平排列的表单,通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了
格式:
form class="form-horizontal"> p class="form-group"> label> /label> input.../> /p> /form>
5. 单选复选框
.checkbox : 复选框的父级元素使用,将复选框变为块级元素
.checkbox-inline : 复选框的父级元素使用,将复选框拍成一行
.radio : 单选框的父级元素使用,将单选框变为块级元素
.radio-inline : 单选框的父级元素使用,将单选框拍成一行
格式:
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. 下拉列表
.From-control : 将样式设置为 width为100% ,圆角边框,适当的蓝色阴影...
格式 :
form> select class="form-control"> option> 下拉列表1/option> option> 下拉列表2/option> /select> /form>
7. 校验状态
改变获取焦点时边框和阴影的颜色
.has-error : 错误的红色
.has-success : 成功的绿色
.has-warning : 警告的黄色
.control-label : 标签同步相应状态
格式 :
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 这个类是 label 同步相应的状态
8. 添加额外的图标
.has-feedback : 设置一个位置
.form-control-feedback : 设置一个元素,相对于有has-feedback类的元素定位
.glyphicon glyphicon-ok : 对号图标
.glyphicon-warning-sign : 警告图标
glyphicon-remove : 错误图标
....
格式 :
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 : 给图片加一个边框
以上就是Bootstrap中的按钮样式,图片样式 介绍的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Bootstrap中的按钮样式,图片样式 介绍
本文地址: https://pptw.com/jishu/590184.html