Bootstrap 按鈕組

時間 2019-11-08

原文原文鏈接

按鈕組容許多個按鈕被堆疊在同一行上。當你想要把按鈕對齊在一塊兒時，這就顯得很是有用。您能夠經過 Bootstrap 按鈕（Button）插件添加可選的 JavaScript 單選框和複選框樣式行爲。
php

基本的按鈕組

下面的實例演示了上面表格中討論到的 class .btn-group 的使用：css

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 基本的按鈕組</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>
  <button type="button" class="btn btn-default">按鈕 3</button>
</div>

</body>
</html>

嘗試一下 »html

結果以下所示：jquery

按鈕工具欄

下面的實例演示了上面表格中討論到的 class .btn-toolbar 的使用：bootstrap

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 按鈕工具欄</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>
  <button type="button" class="btn btn-default">按鈕 3</button>
 </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 4</button>
  <button type="button" class="btn btn-default">按鈕 5</button>
  <button type="button" class="btn btn-default">按鈕 6</button>
  </div>
  <div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 7</button>
  <button type="button" class="btn btn-default">按鈕 8</button>
  <button type="button" class="btn btn-default">按鈕 9</button>
  </div>
</div>

</body>
</html>

嘗試一下 »工具

結果以下所示：spa

按鈕的大小

下面的實例演示了上面表格中討論到的 class .btn-group-* 的使用：插件

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 按鈕組的大小</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>
  <button type="button" class="btn btn-default">按鈕 3</button>
 </div>
  <div class="btn-group btn-group-sm">
  <button type="button" class="btn btn-default">按鈕 4</button>
  <button type="button" class="btn btn-default">按鈕 5</button>
  <button type="button" class="btn btn-default">按鈕 6</button>
</div>
  <div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-default">按鈕 7</button>
  <button type="button" class="btn btn-default">按鈕 8</button>
  <button type="button" class="btn btn-default">按鈕 9</button>
</div>

</body>
</html>

嘗試一下 »code

結果以下所示：orm

嵌套

您能夠在一個按鈕組內嵌套另外一個按鈕組，即，在一個 .btn-group 內嵌套另外一個 .btn-group 。當您向讓下拉菜單與一系列按鈕組合使用時，就會用到這個。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 嵌套的按鈕組</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉連接 1</a></li>
      <li><a href="#">下拉連接 2</a></li>
    </ul>
  </div>
</div>

</body>
</html>

嘗試一下 »

結果以下所示：

垂直的按鈕組

下面的實例演示了上面表格中討論到的 class .btn-group-vertical 的使用：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 垂直的按鈕組</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group-vertical">
  <button type="button" class="btn btn-default">按鈕 1</button>
  <button type="button" class="btn btn-default">按鈕 2</button>

  <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      下拉
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉連接 1</a></li>
      <li><a href="#">下拉連接 2</a></li>
    </ul>
  </div>
</div>

</body>
</html>

嘗試一下 »

結果以下所示：

原文地址：http://www.phplearn.cn/bootstrap/bootstrap-button-groups.html

1. Bootstrap的按鈕組
2. Bootstrap 按鈕組介紹
3. Bootstrap-基本的按鈕組
4. Bootstrap 按鈕
5. bootstrap --- > 按鈕
6. Bootstrap 按鈕總結
7. bootstrap 圓形按鈕
8. bootstrap-按鈕組、字體圖標
9. Bootstrap<基礎十三> 按鈕組
10. bootstrap圖標菜單按鈕組件
更多相關文章...
• jQuery Mobile 按鈕 - jQuery Mobile 教程
• ionic 按鈕 - ionic 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• RxJava操作符（九）Connectable Observable Operators

相關標籤/搜索

按鈕

bootstrap

旋鈕

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。