位置: 编程技术 - 正文
Bootstrap按钮组件详解(bootstrap按钮的风格有哪些?)
编辑：rootadmin推荐整理分享Bootstrap按钮组件详解(bootstrap按钮的风格有哪些?)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:bootstrap定义按钮,bootstrap按钮的风格有哪些?,bootstrap按钮大小设置,bootstrap定义按钮,bootstrap 按钮,bootstrap怎么让按钮居中,bootstrap怎么让按钮居中,bootstrap按钮大小设置,内容如对您有帮助，希望把文章链接给更多的朋友！
按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。
结构方面：使用一个类名为btn-group的容器，把多个按钮放在这个容器中。
按钮组也是一个独立的组件，所以可以找到相应的源码文件：
Less：buttons.less
Sass:_buttons.scss
Css:Bootstrap.css 行~行
CSS:
除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签，唯一要保证的是：不管使用什么标签，.btn-group容器里的标签元素需要带有类名.btn
按钮组四个角都是圆角，除了第一个和最后一个按钮具有边上的圆角外，其他的按钮没有圆角。
详解：
1、默认：所有按钮都是圆角
2、除第一个按钮和最后一个按钮，其他的按钮圆角取消
3、最后一个按钮只留右上角和右下角为圆角
源码：
按钮组工具栏
在富文本编辑器中，将按钮组分组排列在一起，比如说复制，剪切，粘贴一组，左对齐，中间对齐，右对齐和两端对齐一组，这时需要用到bootstrap框架按钮工具栏btn-toolbar
原理：主要是让容器的多个分组.btn-group元素进行浮动，并且组与组之间保持5px的左外距
注意在btn-toolbar上清除浮动
示例:
按钮嵌套分组
很多时候，我们把下拉菜单很普通的按钮组排列在一起，实现类似于导航菜单的效果：
使用的时候只需将之前制作下拉菜单的dropdown容器的类名换成btn-group，并且和普通的按钮放在同一级：
按钮垂直分组
只需把水平分组的类名.btn-group换成.btn-group-vertical即可。
等分按钮又称为自适应分组按钮：
整个按钮组的宽度是容器的%，而按钮组里面的每个按钮平分整个容器的宽度，例如一个按钮组里有五个按钮，每个按钮是容器宽度的%；一个按钮组里有四个按钮，每个按钮是容器宽度的%；
实现方法：只需要在按钮组.btn-group 上追加一个类名.btn-group-justified
把.btn-group-justified模拟成表格（display：table），并且把里面的按钮模板模拟成表格单元格（display：table-cell）。
注意：在制作等分按钮组时，尽量使用<a>标签来制作按钮，因为使用button标签元素时，使用display：table在部分浏览器下支持并不友好
积木网推荐阅读：
详解Bootstrap按钮
以上所述是小编给大家介绍的Bootstrap按钮组件，希望对大家有所帮助！
Bootstrap每天必学之标签页（Tab）插件 标签页（Tab）通过结合一些data属性，您可以轻松地创建一个标签页界面。"如果您想要单独引用该插件的功能，那么您需要引用tab.js。或者，正如Bootstrap
Bootstrap网格系统详解 bootstrap框架中的网格系统就是将容器平分成份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改这个数值。bootstrap框架的网格系统工作原
Bootstrap每天必学之工具提示（Tooltip）插件 当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受JasonFrame写的jQuery.tipsy的启发。工具提示（Tooltip）插件
上一篇：Bootstrap每天必学之警告框插件(bootstrap入门)
下一篇：Bootstrap每天必学之标签页（Tab）插件(bootstrap要学吗)
