index.html 3 KB
Newer Older
1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
8
    <link rel="shortcut icon" href="../../assets/ico/favicon.png">
Mark Otto's avatar
Mark Otto committed
9

Nicole's avatar
Nicole committed
10
    <title>Fixed Top Navbar Example for Bootstrap</title>
Mark Otto's avatar
Mark Otto committed
11

12
    <!-- Bootstrap core CSS -->
13
    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
Mark Otto's avatar
Mark Otto committed
14

15
    <!-- Custom styles for this template -->
Nicole's avatar
Nicole committed
16
    <link href="navbar-fixed-top.css" rel="stylesheet">
17
  </head>
Mark Otto's avatar
Mark Otto committed
18

19
  <body>
Mark Otto's avatar
Mark Otto committed
20
21
22
23

    <!-- Fixed navbar -->
    <div class="navbar navbar-fixed-top">
      <div class="container">
24
25
26
27
28
29
30
31
32
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
33
          <ul class="nav navbar-nav">
Mark Otto's avatar
Mark Otto committed
34
35
36
37
38
39
40
41
42
43
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
44
                <li class="dropdown-header">Nav header</li>
Mark Otto's avatar
Mark Otto committed
45
46
47
48
49
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
50
          <ul class="nav navbar-nav navbar-right">
saiwang's avatar
saiwang committed
51
52
53
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
Mark Otto's avatar
Mark Otto committed
54
55
56
57
58
59
60
61
62
63
64
65
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
saiwang's avatar
saiwang committed
66
          <a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
Mark Otto's avatar
Mark Otto committed
67
68
69
70
        </p>
      </div>

    </div> <!-- /container -->
71

72
73
74
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
75
76
    <script src="../../assets/js/jquery.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
77
78
  </body>
</html>