目录
  1. WIKI教程
  2. 学习Bootstrap
  3. Bootstrap - 按钮组( Button Groups)

Bootstrap - 按钮组( Button Groups)

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

下表总结了Bootstrap提供的重要类以使用按钮组 -

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

基本按钮组

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

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>
新页面打开

按钮工具栏

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

<div class = "btn-toolbar" role = "toolbar">
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
</div>
新页面打开

按钮大小

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

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>
新页面打开

Nesting

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

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
</div>
新页面打开

垂直Buttongroup

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

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
</div>
新页面打开
<上一篇.Bootstrap - 下降( Drop downs)
Bootstrap - 按钮下降( Button Drop downs).下一篇>
↑回到顶部↑
WIKI教程 @2018