Menu lungsur butang Bootstrap


Bab ini akan menerangkan cara menggunakan kelas Bootstrap untuk menambah menu lungsur turun pada butang. Untuk menambah menu lungsur pada butang, hanya letakkan butang dan menu lungsur dalam .btn-group. Anda juga boleh menggunakan <span class="caret"></span> untuk menunjukkan bahawa butang bertindak sebagai menu lungsur.

Contoh berikut menunjukkan menu lungsur turun butang mudah asas:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本的按钮下拉菜单</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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" role="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>
<div class="btn-group">
   <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="#">功能</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>

Contoh Jalankan »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Menu lungsur turun butang pisah

Menu lungsur turun butang pisah menggunakan gaya yang hampir sama seperti butang menu lungsur, tetapi Menambah fungsi asal pada menu lungsur. Di sebelah kiri butang belah ialah fungsi asal, dan di sebelah kanan ialah togol untuk memaparkan menu lungsur.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 分割的按钮下拉菜单</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/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>
      <span class="sr-only">切换下拉菜单</span>
   </button>
   <ul class="dropdown-menu" role="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>
<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>
      <span class="sr-only">切换下拉菜单</span>
   </button>
   <ul class="dropdown-menu" role="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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Saiz menu lungsur butang

Anda boleh menggunakan menu lungsur dengan butang pelbagai saiz: .btn-large, .btn-sm atau .btn-xs .

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮下拉菜单的大小</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
       <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle btn-lg" 
      data-toggle="dropdown">
      默认 <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="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>
<div class="btn-group">
   <button type="button" class="btn btn-primary dropdown-toggle btn-sm" 
      data-toggle="dropdown">
      原始 <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="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>
<div class="btn-group">
   <button type="button" class="btn btn-success dropdown-toggle btn-xs" 
      data-toggle="dropdown">
      成功 <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="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>

尝试一下 »

结果如下所示：
按钮下拉菜单的大小
按钮上拉菜单

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮上拉菜单</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="margin-left:50px; margin-top:200px">
   <div class="btn-group dropup">
      <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="#">功能</a></li>
         <li><a href="#">另一个功能</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 dropdown-toggle" 
         data-toggle="dropdown">
         原始 <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="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>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian