使用方法
创新互联公司于2013年成立,是专业互联网技术服务公司,拥有项目网站设计制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元迎江做网站,已为上家服务,为迎江各地企业和个人服务,联系电话:18982081108
按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件。因为这个文件已集成了button.js插件功能
同样地,因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果
Document
基本用法
按钮组结构非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中
为了向屏幕阅读器的用户传达正确的按钮分组,需要提供一个合适的 role 属性。对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar"
此外,按钮组和工具栏应给定一个明确的label标签,尽管设置了正确的 role 属性,但是大多数辅助技术将不会正确的识读他们。可以使用 aria-label,也可以使用aria-labelledby
只需要在“.btn-group”类名上追加对应的类名,就可以得到不同大小的按钮组
很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。使用的时候,只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级
垂直排列
默认地,按钮组都是水平显示的。但在实际运用当中,总会碰到垂直显示的效果。在Bootstrap框架中也提供了这样的风格。只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可
等分按钮
等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果按钮组里面有五个按钮,那么每个按钮是20%的宽度,如果有四个按钮,那么每个按钮是25%宽度,以此类推
等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名
实现原理非常简单,把“btn-group-justified”模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)
[注意]在制作等分按钮组时,尽量使用标签元素来制作按钮,因为使用
以上所述是小编给大家介绍的Bootstrap按钮组实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!