Bootstrap 按钮下拉菜单

最新推荐文章于 2022-02-13 19:24:33 发布

xxiaowen

最新推荐文章于 2022-02-13 19:24:33 发布

阅读量1.8k

点赞数 1

分类专栏： bootstrap

本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/43602133

版权

bootstrap 专栏收录该内容

7 篇文章 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

xxiaowen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 按钮下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。单按钮下拉菜单只要改变一些基本的标记，就能把按钮变成下拉菜单的开关。代码如下 bootstrap按钮组 <button type="button" class="b
复制链接

扫一扫

专栏目录