Bootstrap 按钮下拉菜单

发布时间：2020-12-17 21:06:09 所属栏目：安全来源：网络整理

导读：把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。单按钮下拉菜单只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。代码如下 !DOCTYPE htmlhtml head meta charset="utf-8" meta http-equiv="X-UA-Com

把任意一个按钮放入 .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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!