index.html 2.62 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>Fixed Top Navbar Example for Bootstrap</title>
Mark Otto's avatar
Mark Otto committed
10

11
12
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap/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-fixed-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
22

    <!-- Fixed navbar -->
    <div class="navbar navbar-fixed-top">
      <div class="container">
Robert Burns's avatar
Robert Burns committed
23
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
Mark Otto's avatar
Mark Otto committed
24
25
26
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
Robert Burns's avatar
Robert Burns committed
27
        </button>
Mark Otto's avatar
Mark Otto committed
28
29
        <a class="navbar-brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
30
          <ul class="nav navbar-nav">
Mark Otto's avatar
Mark Otto committed
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
            <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>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
47
          <ul class="nav navbar-nav pull-right">
Mark Otto's avatar
Mark Otto committed
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
            <li><a href="/examples/navbar/">Default</a></li>
            <li><a href="/examples/navbar-static-top/">Static top</a></li>
            <li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
          </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>
Fabien's avatar
Fabien committed
63
          <a class="btn btn-large btn-primary" href="../../docs/#navbar">View navbar docs &raquo;</a>
Mark Otto's avatar
Mark Otto committed
64
65
66
67
        </p>
      </div>

    </div> <!-- /container -->
68
69
70
    
  </body>
</html>