天天看點

Bootstrap 按鈕組

按鈕組允許多個按鈕被堆疊在同一行上。當你想要把按鈕對齊在一起時,這就顯得非常有用。您可以通過 Bootstrap 按鈕(Button) 插件 添加可選的 JavaScript 單選框和複選框樣式行為。

下面的表格總結了 Bootstrap 提供的使用按鈕組的一些重要的 class:

Class

描述

代碼示例

.btn-group

該 class 用于形成基本的按鈕組。在 <b>.btn-group</b> 中放置一系列帶有 class <b>.btn</b> 的按鈕。

.btn-toolbar

該 class 有助于把幾組 &lt;div class="btn-group"&gt; 結合到一個 &lt;div class="btn-toolbar"&gt; 中,一般獲得更複雜的元件。

.btn-group-lg, .btn-group-sm, .btn-group-xs

這些 class 可應用到整個按鈕組的大小調整,而不需要對每個按鈕進行大小調整。

.btn-group-vertical

該 class 讓一組按鈕垂直堆疊顯示,而不是水準堆疊顯示。

下面的執行個體示範了上面表格中讨論到的 class <b>.btn-group</b> 的使用:

&lt;div class="btn-group"&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 1&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 2&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 3&lt;/button&gt;

&lt;/div&gt;

結果如下所示:

Bootstrap 按鈕組

下面的執行個體示範了上面表格中讨論到的 class <b>.btn-toolbar</b> 的使用:

&lt;div class="btn-toolbar" role="toolbar"&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 4&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 5&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 6&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 7&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 8&lt;/button&gt;

&lt;button type="button" class="btn btn-default"&gt;按鈕 9&lt;/button&gt;

Bootstrap 按鈕組

下面的執行個體示範了上面表格中讨論到的 class <b>.btn-group-*</b> 的使用:

&lt;div class="btn-group btn-group-lg"&gt;

&lt;div class="btn-group btn-group-sm"&gt;

&lt;div class="btn-group btn-group-xs"&gt;

Bootstrap 按鈕組

您可以在一個按鈕組内嵌套另一個按鈕組,即,在一個 <b>.btn-group</b> 内嵌套另一個 <b>.btn-group </b>。當您想讓下拉菜單與一系列按鈕組合使用時,就會用到這個。

&lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;

下拉

&lt;span class="caret"&gt;&lt;/span&gt;

&lt;/button&gt;

&lt;ul class="dropdown-menu"&gt;

&lt;li&gt;&lt;a href="#"&gt;下拉連結 1&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="#"&gt;下拉連結 2&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

Bootstrap 按鈕組

下面的執行個體示範了上面表格中讨論到的 class <b>.btn-group-vertical</b> 的使用:

&lt;div class="btn-group-vertical"&gt;

Bootstrap 按鈕組