Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
navbar.html 4.53 KB
Newer Older
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
1
2
3
4
5
6
7
8
9
10 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
Mark Otto's avatar
move navbar and update paths so it sits in tests    
Mark Otto committed
11
12 
    <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
    <style>
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
13 
      body {
Mark Otto's avatar
fixes #5041: add new navbar css tests for each variation, remove width: 100%;...    
Mark Otto committed
14 
        padding-top: 0;
Mark Otto's avatar
move navbar and update paths so it sits in tests    
Mark Otto committed
15 
        padding-bottom: 30px;
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
16 
      }
Mark Otto's avatar
fixes #5041: add new navbar css tests for each variation, remove width: 100%;...    
Mark Otto committed
17
18
19 
      .navbar {
        margin-top: 20px;
      }
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
20 
    </style>
Mark Otto's avatar
move navbar and update paths so it sits in tests    
Mark Otto committed
21 
    <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
22
23
24
25
26
27
28 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
Mark Otto's avatar
move navbar and update paths so it sits in tests    
Mark Otto committed
29
30
31
32
33 
    <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
34
35
36
37
38
39
40
41 
  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <div class="navbar">
Mark Otto's avatar
Remove .navbar-inner from navbar tests    
Mark Otto committed
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72 
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <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>
            <ul class="nav pull-right">
              <li class="active"><a href="./navbar.html">Default</a></li>
              <li><a href="./navbar-static-top.html">Static top</a></li>
              <li><a href="./navbar-fixed-top.html">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
73
74
75
76
77
78
79
80 
        </div>
      </div>

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <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>
Mark Otto's avatar
Refine containers and navbars    
Mark Otto committed
81 
          <a class="btn btn-large btn-primary" href="../../docs/components.html#navbar">View navbar docs &raquo;</a>
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
82
83
84
85
86
87
88
89 
        </p>
      </div>

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

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
Mark Otto's avatar
fixes #5041: add new navbar css tests for each variation, remove width: 100%;...    
Mark Otto committed
90
91
92
93
94
95
96
97
98
99
100
101
102 
    <script src="../../docs/assets/js/jquery.js"></script>
    <script src="../../docs/assets/js/bootstrap-transition.js"></script>
    <script src="../../docs/assets/js/bootstrap-alert.js"></script>
    <script src="../../docs/assets/js/bootstrap-modal.js"></script>
    <script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
    <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
    <script src="../../docs/assets/js/bootstrap-tab.js"></script>
    <script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
    <script src="../../docs/assets/js/bootstrap-popover.js"></script>
    <script src="../../docs/assets/js/bootstrap-button.js"></script>
    <script src="../../docs/assets/js/bootstrap-collapse.js"></script>
    <script src="../../docs/assets/js/bootstrap-carousel.js"></script>
    <script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
Mark Otto's avatar
adding navbar example, for fixed and static navbars  
Mark Otto committed
103
104
105 

  </body>
</html>