Bootstrap 按钮下拉菜单

时间：2015-02-07 13:15:07 阅读：279 评论：0 收藏：0 [点我收藏+]

标签：

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/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="#">Java教程网</a></li>
      <li><a href="#">Android教程网</a></li>
      <li><a href="#">ios教程网</a></li>
      <li class="divider"></li>
      <li><a href="#">622p开源网</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="#">java教程网</a></li>
      <li><a href="#">android教程网</a></li>
      <li><a href="#">ios教程网</a></li>
       <li class="divider"></li>
      <li><a href="#">622p开源网</a></li>
   </ul>
</div>
   <button type="button" class="btn btn-success dropdown-toggle" 
      data-toggle="dropdown">
     教程网<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">java教程网</a></li>
      <li><a href="#">android教程网</a></li>
      <li><a href="#">ios教程网</a></li>
       <li class="divider"></li>
      <li><a href="#">622p开源网</a></li>
   </ul>
</div>
   <button type="button" class="btn btn-info dropdown-toggle" 
      data-toggle="dropdown">
     教程网<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">java教程网</a></li>
      <li><a href="#">android教程网</a></li>
      <li><a href="#">ios教程网</a></li>
       <li class="divider"></li>
      <li><a href="#">622p开源网</a></li>
   </ul>
</div>
   <button type="button" class="btn btn-danger dropdown-toggle" 
      data-toggle="dropdown">
     教程网<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">java教程网</a></li>
      <li><a href="#">android教程网</a></li>
      <li><a href="#">ios教程网</a></li>
       <li class="divider"></li>
      <li><a href="#">622p开源网</a></li>
   </ul>
</div>
   <button type="button" class="btn btn-warning dropdown-toggle" 
      data-toggle="dropdown">
     教程网<span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">java教程网</a></li>
      <li><a href="#">android教程网</a></li>
      <li><a href="#">ios教程网</a></li>
       <li class="divider"></li>
      <li><a href="#">622p开源网</a></li>
   </ul>
</div>

  </body>
</html>

效果图

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="btn-group">
  <button type="button" class="btn btn-danger">教程网</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">java教程网</a></li>
    <li><a href="#">android教程网</a></li>
    <li><a href="#">iod教程网</a></li>
    <li class="divider"></li>
    <li><a href="#">开源网</a></li>
  </ul>
</div>

  </body>
</html>

效果图

尺寸

按钮式下拉菜单适用所有尺寸的按钮。

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<div class="btn-group">
  <button class="btn btn-warning btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
 <ul class="dropdown-menu" role="menu">
    <li><a href="#">java教程网</a></li>
    <li><a href="#">android教程网</a></li>
    <li><a href="#">iod教程网</a></li>
    <li class="divider"></li>
    <li><a href="#">开源网</a></li>
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-danger btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">java教程网</a></li>
    <li><a href="#">android教程网</a></li>
    <li><a href="#">iod教程网</a></li>
    <li class="divider"></li>
    <li><a href="#">开源网</a></li>
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-info btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
 <ul class="dropdown-menu" role="menu">
    <li><a href="#">java教程网</a></li>
    <li><a href="#">android教程网</a></li>
    <li><a href="#">iod教程网</a></li>
    <li class="divider"></li>
    <li><a href="#">开源网</a></li>
  </ul>
</div>

  </body>
</html>

效果图

向上弹出式菜单

给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。

代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap按钮组</title>
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="js/jquery-1.11.2.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
  </head>
  <body>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<div class="btn-group dropup">
  <button type="button" class="btn btn-info">Dropup</button>
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
     <li><a href="#">java教程网</a></li>
    <li><a href="#">android教程网</a></li>
    <li><a href="#">iod教程网</a></li>
    <li class="divider"></li>
    <li><a href="#">开源网</a></li>->
  </ul>
</div>

  </body>
</html>

效果图

注：更多学习资源尽在java教程网

本文地址：http://java.662p.com/thread-4609-1-1.html

Bootstrap 按钮下拉菜单

标签：

原文地址：http://blog.csdn.net/wenzhilanyu2012/article/details/43602133

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行