Bootstrap - 按钮组

Bootstrap按钮组 - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉列表，按钮开始，从简单而简单的步骤学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

按钮组允许多个按钮在一条线上堆叠在一起.当您想要将对齐按钮等项目放在一起时，这非常有用.您可以使用 Bootstrap Button Plugin 添加可选的JavaScript收音机和复选框样式行为.

关注表总结了Bootstrap提供的重要类使用按钮组 :

类	描述	代码示例
.btn-group	此类用于基本按钮组.在 .btn-group 中包含一系列按钮 .btn .	< div class ="btn-group"> < button type ="button"class ="btn btn-default"> Button1 < button type ="button"class ="btn btn-default"> Button2
.btn-toolbar	这有助于组合< div class ="btn-group">的集合.进入< div class ="btn-toolbar">对于更复杂的组件.	< div class ="btn-toolbar"role ="toolbar"> < div class ="btn-group"> ... < div class ="btn-group"> ...
.btn-group -lg，.btn-group-sm，.btn-group-xs	这些类可以应用于按钮组，而不是调整每个按钮的大小.	< div class ="btn-group btn-group-lg"> ... < div class ="btn-group btn-group-sm"> ... < div class ="btn-group btn-group-xs"> ...
.btn-group-vertical	此类使一组按钮垂直堆叠而不是水平显示.	< div class ="btn-group-vertical"> ...

基本按钮组

以下示例演示了上表中讨论的类 .btn-group 的使用 :

      Button 1   Button 2   Button 3

Button Toolbar

以下示例演示了上表中讨论的类.btn-toolbar的用法:

            Button 1      Button 2      Button 3

Button 4 Button 5 Button 6

Button 7 Button 8 Button 9

Button Size

以下示例演示了上表中讨论的类.btn-group- *的使用 :

   Button 1   Button 2   Button 3   Button 4   Button 5   Button 6   Button 7   Button 8   Button 9

Nesting

您可以将按钮组嵌套在另一个按钮组中，即将.btn-group放在另一个.btn-group中。当您希望下拉菜单与一系列按钮混合时，即可完成此操作。

   Button 1   Button 2                     Dropdown                                    Dropdown link 1
         Dropdown link 2

垂直Buttongroup

以下示例演示了上表中讨论的类 .btn-group-vertical 的使用 :

   Button 1   Button 2                     Dropdown                                    Dropdown link 1
         Dropdown link 2