index.html 3.09 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="">
Mark Otto's avatar
Mark Otto committed
8

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

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

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

18
  <body>
Mark Otto's avatar
Mark Otto committed
19

20
21
    <!-- Static navbar -->
    <div class="navbar navbar-static-top">
Mark Otto's avatar
Mark Otto committed
22
      <div class="container">
23
24
25
26
27
28
29
30
31
        <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">
32
          <ul class="nav navbar-nav">
Mark Otto's avatar
Mark Otto committed
33
34
35
36
37
38
39
40
41
42
            <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>
43
                <li class="dropdown-header">Nav header</li>
Mark Otto's avatar
Mark Otto committed
44
45
46
47
48
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
49
          <ul class="nav navbar-nav navbar-right">
50
51
52
            <li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
            <li class="active"><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
            <li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
Mark Otto's avatar
Mark Otto committed
53
54
55
56
57
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

58

Mark Otto's avatar
Mark Otto committed
59
60
61
62
63
64
65
    <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>
66
          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/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
  </body>
78
</html>