BootStrap學習(2)_下拉菜單&按鈕組

本文轉載自查看原文 2015-11-04 13:51 1755 BootStrap

一、下拉菜單

1.基本下拉菜單

如需使用下列菜單，只需要在class .dropdown 內加上下拉菜單即可。下面的實例演示了基本的下拉菜單：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="dropdown">
   <button type="button" class="btn dropdown-toggle"  
      data-toggle="dropdown">
      二手家電
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li>
         <a href="#">冰箱</a>
      </li>
      <li>
         <a href="#">洗衣機</a>
      </li>
      <li>
         <a href="#">
            電視
         </a>
      </li>
      <li class="divider"></li>
      <li>
         <a href="#">熱水器</a>
      </li>
   </ul>
</div>
</body>
</html>

效果圖:

2.標題

您可以使用 class dropdown-header 向下拉菜單的標簽區域添加標題

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="dropdown">
   <button type="button" class="btn dropdown-toggle"
      data-toggle="dropdown">
      58二手市場
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" >
      <li class="dropdown-header">二手電器(下拉菜單標題)</li>
        <li>
         <a   href="#">冰箱</a>
      </li>
      <li>
         <a href="#">洗衣機</a>
      </li>
      <li>
         <a href="#">
            電視
         </a>
      </li>
      <li class="divider"></li>
       <li class="dropdown-header">二手家私(下拉菜單標題)</li>
      <li>
         <a href="#">沙發</a>
      </li>
       <li>
         <a href="#">電腦桌</a>
      </li>
       <li>
         <a href="#">床</a>
      </li>
   </ul>
</div>
</body>
</html>

效果圖:

二、按鈕組

按鈕組允許多個按鈕被堆疊在同一行上。當你想要把按鈕對齊在一起時，這就顯得非常有用。

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

1.基本的按鈕組

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

View Code

效果:

2.按鈕工具欄

class .btn-toolbar 的使用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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>

View Code

效果:

3.嵌套

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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="#">冰箱</a></li>
                <li><a href="#">洗衣機</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

View Code

效果:

4.垂直的按鈕組

class .btn-group-vertical 的使用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/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="#">冰箱</a></li>
                <li><a href="#">洗衣機</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

View Code

效果:

5.分割的按鈕下拉菜單

分割的按鈕下拉菜單使用與下拉菜單按鈕大致相同的樣式，但是對下拉菜單添加了原始的功能。分割按鈕的左邊是原始的功能，右邊是顯示下拉菜單的切換。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="btn-group">
   <button type="button" class="btn btn-default">默認</button>
   <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能1</a></li>
      <li><a href="#">功能2</a></li>
      <li><a href="#">其他功能</a></li>
      <li class="divider"></li>
      <li><a href="#">分離的鏈接</a></li>
   </ul>
</div>
<div class="btn-group">
   <button type="button" class="btn btn-primary">原始</button>
   <button type="button" class="btn btn-primary dropdown-toggle" 
      data-toggle="dropdown">
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能1</a></li>
      <li><a href="#">功能2</a></li>
      <li><a href="#">其他功能</a></li>
      <li class="divider"></li>
      <li><a href="#">分離的鏈接</a></li>
   </ul>
</div>

</body>
</html>

View Code

效果:

6.按鈕上拉菜單

菜單也可以往上拉伸的，只需要簡單地向父 .btn-group 容器添加 .dropup 即可。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body style="margin-top:200px;">

    <div class="btn-group">
   <button type="button" class="btn btn-default">默認</button>
   <button type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown">
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能1</a></li>
      <li><a href="#">功能2</a></li>
      <li><a href="#">其他功能</a></li>
      <li class="divider"></li>
      <li><a href="#">分離的鏈接</a></li>
   </ul>
</div>
<div class="btn-group dropup">
   <button type="button" class="btn btn-primary">原始</button>
   <button type="button" class="btn btn-primary dropdown-toggle" 
      data-toggle="dropdown">
      <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能1</a></li>
      <li><a href="#">功能2</a></li>
      <li><a href="#">其他功能</a></li>
      <li class="divider"></li>
      <li><a href="#">分離的鏈接</a></li>
   </ul>
</div>

</body>
</html>

View Code

效果:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap按鈕組下拉菜單使用 Bootstrap3.0學習第十輪(下拉菜單、按鈕組、按鈕式下拉菜單) Bootstrap3.0學習第十輪(下拉菜單、按鈕組、按鈕式下拉菜單) Bootstrap入門（十）組件4：按鈕組與下拉菜單結合 Bootstrap下拉菜單、按鈕式下拉菜單 Bootstrap<基礎十四> 按鈕下拉菜單 bootstrap 框架里的下拉菜單+按鈕 Bootstrap按鈕式下拉菜單按鈕下拉菜單 Bootstrap下拉菜單