1. 首页
  2. 移动端
  3. Bootstrap单按钮的下拉菜单 - airycode

Bootstrap单按钮的下拉菜单 - airycode

•移动端•阅读 3487

Bootstrap单按钮的下拉菜单

简介

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

插件依赖

按钮式下拉菜单依赖下拉菜单插件 ，因此需要将此插件包含在你所使用的 Bootstrap 版本中。

完整代码：

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/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="javascript:void(0)">功能</a></li>

<li><a href="javascript:void(0)">另一个功能</a></li>

<li><a href="javascript:void(0)">其他</a></li>

<li class="divider"></li>

<li><a href="javascript:void(0)">分离的链接</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="javascript:void(0)">功能</a></li>

<li><a href="javascript:void(0)">另一个功能</a></li>

<li><a href="javascript:void(0)">其他</a></li>

<li class="divider"></li>

<li><a href="javascript:void(0)">分离的链接</a></li>

</ul>

</div>

</body>

</html>

单按钮下拉菜单

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

  1. <div class="btn-group">
  2. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  3. Action <span class="caret"></span>
  4. </button>
  5. <ul class="dropdown-menu" role="menu">
  6. <li><a href="#">Action</a></li>
  7. <li><a href="#">Another action</a></li>
  8. <li><a href="#">Something else here</a></li>
  9. <li class="divider"></li>
  10. <li><a href="#">Separated link</a></li>
  11. </ul>
  12. </div>

完整代码：

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/bootstrap.min.js"></script>

</head>

<body>

<div class="btn-group">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></button>

<ul class="dropdown-menu" role="menu">

<li><a href="javascript:void(0);">Action</a></li>

<li><a href="javascript:void(0);">Another action</a></li>

<li><a href="javascript:void(0);">Something else here</a></li>

<li class="divider"></li>

<li><a href="javascript:void(0);">Separated link</a></li>

</ul>

</div>

</body>

</html>

分裂式按钮下拉菜单

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

  1. <div class="btn-group">
  2. <button type="button" class="btn btn-danger">Action</button>
  3. <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  4. <span class="caret"></span>
  5. <span class="sr-only">Toggle Dropdown</span>
  6. </button>
  7. <ul class="dropdown-menu" role="menu">
  8. <li><a href="#">Action</a></li>
  9. <li><a href="#">Another action</a></li>
  10. <li><a href="#">Something else here</a></li>
  11. <li class="divider"></li>
  12. <li><a href="#">Separated link</a></li>
  13. </ul>
  14. </div>

完整代码：

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/bootstrap.min.js"></script>

</head>

<body>

<div class="btn-group open">

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="true">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="javascript:void(0);">Action</a></li>

<li><a href="javascript:void(0);">Another action</a></li>

<li><a href="javascript:void(0);">Something else here</a></li>

<li class="divider"></li>

<li><a href="javascript:void(0);">Separated link</a></li>

</ul>

</div>

</body>

</html>

尺寸

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

  1. <div class="btn-group">
  2. <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  3. Large button <span class="caret"></span>
  4. </button>
  5. <ul class="dropdown-menu" role="menu">
  6. ...
  7. </ul>
  8. </div>
  9. <div class="btn-group">
  10. <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  11. Small button <span class="caret"></span>
  12. </button>
  13. <ul class="dropdown-menu" role="menu">
  14. ...
  15. </ul>
  16. </div>
  17. <div class="btn-group">
  18. <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
  19. Extra small button <span class="caret"></span>
  20. </button>
  21. <ul class="dropdown-menu" role="menu">
  22. ...
  23. </ul>
  24. </div>

完整代码：

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/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="javascript:void(0);">功能</a></li>

<li><a href="javascript:void(0);">另一个功能</a></li>

<li><a href="javascript:void(0);">其他</a></li>

<li class="divider"></li>

<li><a href="javascript:void(0);">分离的链接</a></li>

</ul>

</div>

</body>

</html>

向上弹出式菜单

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

  1. <div class="btn-group dropup">
  2. <button type="button" class="btn btn-default">Dropup</button>
  3. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  4. <span class="caret"></span>
  5. <span class="sr-only">Toggle Dropdown</span>
  6. </button>
  7. <ul class="dropdown-menu" role="menu">
  8. Dropdown menu links
  9. </ul>
  10. </div>

完整代码：

<!DOCTYPE HTML>

<html>

<head>

<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/bootstrap.min.js"></script>

</head>

<body>

<div class="btn-group dropup" >

<button type="button" class="btn btn-primary">Right dropup</button>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

<span class="caret"></span>

<span class="sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu dropdown-menu-right" role="menu">

<li><a href="javascript:void(0)">Action</a></li>

<li><a href="javascript:void(0)">Another action</a></li>

<li><a href="javascript:void(0)">Something else here</a></li>

<li class="divider"></li>

<li><a href="javascript:void(0)">Separated link</a></li>

</ul>

</div>

</body>

</html>

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。