案例:Bootstrap案例     状态:可编辑再运行    进入横版
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap 实例 - 下拉菜单</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
12
<div class="container">
13
  <h2>下拉菜单</h2>
14
  <p>.dropdown 菜单用于指定下拉菜单,下拉菜单都包裹在 .dropdown 里。</p>
15
  <p>.dropdown-menu 类用于实际下拉菜单的创建。</p>
16
  <div class="dropdown">
17
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">教程
18
    <span class="caret"></span></button>
19
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
20
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
21
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
22
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
23
      <li role="presentation" class="divider"></li>
24
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于我们</a></li>

 运行结果 
 北美留学生论坛