当前位置:首页 > BootStrap > 正文内容
一月13日

时间:2016-01-13 11:07

Bootstrap 下拉菜单(Dropdowns)

0
分类:BootStrap | 评论:0人 | 浏览:89次   
下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

将下拉菜单触发器和下拉菜单都包裹在 .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>
效果如下:

来源:Dashu.info(微信号/QQ号:43318553),转载请注明出处,谢谢!

  • 评论:(0)
  • 有图有真相

站内搜索

css.php

无觅相关文章插件,快速提升流量