按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运行。不过我们同样可以直接只调用bootstrap.js文件,因为这个文件已集成了button.js插件功能
同样地,因为引导的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.js之前一定要先加载jquery.js才会产生效果
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;链接的href=" https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css " rel=把奖怼北?
& lt;/head>
& lt; body>
& lt;脚本src=" https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
按钮组结构非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中
为了向屏幕阅读器的用户传达正确的按钮分组,需要提供一个合适的作用属性。对于按钮组合,应该是角色=凹拧?对于工具栏(工具栏)应该是角色=
“工具栏”
此外,按钮组和工具栏应给定一个明确的标签标签,尽管设置了正确的作用属性,但是大多数辅助技术将不会正确的识读他们。可以使用aria-label,也可以使用aria-labelledby
除了可以使用& lt; button>元素之外,还可以使用其他标签元素,比如& lt; a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”
& lt; div类=癰tn-group”比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-step-backward”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-fast-backward”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-backward”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-play”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-pause”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-stop”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-forward”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-fast-forward”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-step-forward”祝辞& lt;/span> & lt;/button>
& lt;/div>
在富文本编辑器中,将按钮组分组排列在一起,比如说复制,剪切和粘贴一组,左对齐,中间对齐,右对齐和两端对齐一组.Bootstrap框架按钮工具栏也提供了这样的制作方法,只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中
& lt; div类=癰tn-toolbar”比;
& lt; div类=癰tn-group”比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-align-left”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-align-center”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-align-right”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-align-justify”祝辞& lt;/span> & lt;/button>
& lt;/div>
& lt; div类=癰tn-group”比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-indent-left”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-indent-right”祝辞& lt;/span> & lt;/button>
& lt;/div>
& lt; div类=癰tn-group”比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-font”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-bold”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-italic”祝辞& lt;/span> & lt;/button>
& lt;/div>
& lt; div类=癰tn-group”比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-text-height”祝辞& lt;/span> & lt;/button>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default祝辞& lt;跨类=癵lyphicon glyphicon-text-width”祝辞& lt;/span> & lt;/button>
& lt;/div>
& lt;/div>
