Bootstrap 下拉菜单(Dropdowns)

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。下面的实例演示了基本的下拉菜单:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="dropdown">
  12.    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
  13.       data-toggle="dropdown">
  14.        技术归档
  15.       <span class="caret"></span>
  16.    </button>
  17.    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  18.       <li role="presentation">
  19.          <a role="menuitem" tabindex="-1" href="#">Java</a>
  20.       </li>
  21.       <li role="presentation">
  22.          <a role="menuitem" tabindex="-1" href="#">Wordpress</a>
  23.       </li>
  24.       <li role="presentation">
  25.          <a role="menuitem" tabindex="-1" href="#">Bootstrap</a>
  26.       </li>
  27.       <li role="presentation" class="divider"></li>
  28.       <li role="presentation">
  29.          <a role="menuitem" tabindex="-1" href="#">Query/js</a>
  30.       </li>
  31.    </ul>
  32. </div>
  33. </body>
  34. </html>

发布日期:

所属分类: BootStrap, 前端 标签: