小编给大家分享一下Bootstrap中的按钮样式有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联建站始终坚持【策划先行，效果至上】的经营理念，通过多达10余年累计超上千家客户的网站建设总结了一套系统有效的全网营销解决方案，现已广泛运用于各行各业的客户，其中包括：成都纸箱等企业，备受客户赞誉。

Bootstrap按钮样式

1. 表单组

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

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

格式：

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

2. 内联表单

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

格式：

3. 表单合组

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

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

格式：

   
   合组

   
   

4. 水平排列

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

格式：

5. 单选复选框

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

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

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

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

格式：

   
   
   选择1
   
   

   
   
   选择2
   
   

6. 下拉列表

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

格式 ：

   
   下拉列表1
   下拉列表2
   

7. 校验状态

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

.has-error : 错误的红色

.has-success : 成功的绿色

.has-warning : 警告的黄色

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

格式 :

   
   用户
   
   

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

8. 添加额外的图标

.has-feedback : 设置一个位置

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

.glyphicon glyphicon-ok : 对号图标

.glyphicon-warning-sign : 警告图标

glyphicon-remove : 错误图标

....

格式 ：

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

9. 控制输入框大小

.input-lg : 大输入框

.input-small : 小输入框

.form-group-lg : 大输入框

.form-group-sm : 小输入框

格式 ：

或者直接给父元素设置

响应式图片：

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

.img-rounded : 圆角矩形图片

.img-circle : 圆形图片

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

以上是“Bootstrap中的按钮样式有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：Bootstrap中的按钮样式有哪些-创新互联
当前链接：http://ybzwz.com/article/eegds.html