5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
6 <meta name=
"description" content=
"">
7 <meta name=
"author" content=
"">
8 <link rel=
"icon" href=
"../../favicon.ico">
10 <title>Navbar Template for Bootstrap
</title>
12 <!-- Bootstrap core CSS -->
13 <link href=
"../../dist/css/bootstrap.min.css" rel=
"stylesheet">
15 <!-- Custom styles for this template -->
16 <link href=
"navbar.css" rel=
"stylesheet">
21 <nav class=
"navbar navbar-toggleable-md navbar-inverse bg-inverse">
22 <button class=
"navbar-toggler navbar-toggler-right" type=
"button" data-toggle=
"collapse" data-target=
"#navbarsExampleDefault" aria-controls=
"navbarsExampleDefault" aria-expanded=
"false" aria-label=
"Toggle navigation">
23 <span class=
"navbar-toggler-icon"></span>
25 <a class=
"navbar-brand" href=
"#">Navbar
</a>
27 <div class=
"collapse navbar-collapse" id=
"navbarsExampleDefault">
28 <ul class=
"navbar-nav mr-auto">
29 <li class=
"nav-item active">
30 <a class=
"nav-link" href=
"#">Home
<span class=
"sr-only">(current)
</span></a>
33 <a class=
"nav-link" href=
"#">Link
</a>
36 <a class=
"nav-link disabled" href=
"#">Disabled
</a>
38 <li class=
"nav-item dropdown">
39 <a class=
"nav-link dropdown-toggle" href=
"http://example.com" id=
"dropdown01" data-toggle=
"dropdown" aria-haspopup=
"true" aria-expanded=
"false">Dropdown
</a>
40 <div class=
"dropdown-menu" aria-labelledby=
"dropdown01">
41 <a class=
"dropdown-item" href=
"#">Action
</a>
42 <a class=
"dropdown-item" href=
"#">Another action
</a>
43 <a class=
"dropdown-item" href=
"#">Something else here
</a>
47 <form class=
"form-inline my-2 my-md-0">
48 <input class=
"form-control mr-sm-2" type=
"text" placeholder=
"Search">
49 <button class=
"btn btn-outline-success my-2 my-sm-0" type=
"submit">Search
</button>
54 <nav class=
"navbar navbar-inverse bg-inverse navbar-toggleable-md">
55 <div class=
"container">
56 <button class=
"navbar-toggler navbar-toggler-right" type=
"button" data-toggle=
"collapse" data-target=
"#navbarsExampleContainer" aria-controls=
"navbarsExampleContainer" aria-expanded=
"false" aria-label=
"Toggle navigation">
57 <span class=
"navbar-toggler-icon"></span>
59 <a class=
"navbar-brand" href=
"#">Container
</a>
61 <div class=
"collapse navbar-collapse" id=
"navbarsExampleContainer">
62 <ul class=
"navbar-nav mr-auto">
63 <li class=
"nav-item active">
64 <a class=
"nav-link" href=
"#">Home
<span class=
"sr-only">(current)
</span></a>
67 <a class=
"nav-link" href=
"#">Link
</a>
70 <a class=
"nav-link disabled" href=
"#">Disabled
</a>
72 <li class=
"nav-item dropdown">
73 <a class=
"nav-link dropdown-toggle" href=
"http://example.com" id=
"dropdown02" data-toggle=
"dropdown" aria-haspopup=
"true" aria-expanded=
"false">Dropdown
</a>
74 <div class=
"dropdown-menu" aria-labelledby=
"dropdown02">
75 <a class=
"dropdown-item" href=
"#">Action
</a>
76 <a class=
"dropdown-item" href=
"#">Another action
</a>
77 <a class=
"dropdown-item" href=
"#">Something else here
</a>
81 <form class=
"form-inline my-2 my-md-0">
82 <input class=
"form-control mr-sm-2" type=
"text" placeholder=
"Search">
83 <button class=
"btn btn-outline-success my-2 my-sm-0" type=
"submit">Search
</button>
89 <nav class=
"navbar navbar-inverse bg-inverse navbar-toggleable-md">
90 <button class=
"navbar-toggler" type=
"button" data-toggle=
"collapse" data-target=
"#navbarsExampleCenteredNav" aria-controls=
"navbarsExampleCenteredNav" aria-expanded=
"false" aria-label=
"Toggle navigation">
91 <span class=
"navbar-toggler-icon"></span>
94 <div class=
"collapse navbar-collapse justify-content-md-center" id=
"navbarsExampleCenteredNav">
95 <ul class=
"navbar-nav">
96 <li class=
"nav-item active">
97 <a class=
"nav-link" href=
"#">Centered nav only
<span class=
"sr-only">(current)
</span></a>
100 <a class=
"nav-link" href=
"#">Link
</a>
102 <li class=
"nav-item">
103 <a class=
"nav-link disabled" href=
"#">Disabled
</a>
105 <li class=
"nav-item dropdown">
106 <a class=
"nav-link dropdown-toggle" href=
"http://example.com" id=
"dropdown03" data-toggle=
"dropdown" aria-haspopup=
"true" aria-expanded=
"false">Dropdown
</a>
107 <div class=
"dropdown-menu" aria-labelledby=
"dropdown03">
108 <a class=
"dropdown-item" href=
"#">Action
</a>
109 <a class=
"dropdown-item" href=
"#">Another action
</a>
110 <a class=
"dropdown-item" href=
"#">Something else here
</a>
117 <div class=
"container">
118 <nav class=
"navbar navbar-light bg-faded rounded navbar-toggleable-md">
119 <button class=
"navbar-toggler navbar-toggler-right" type=
"button" data-toggle=
"collapse" data-target=
"#containerNavbar" aria-controls=
"containerNavbar" aria-expanded=
"false" aria-label=
"Toggle navigation">
120 <span class=
"navbar-toggler-icon"></span>
122 <a class=
"navbar-brand" href=
"#">Navbar
</a>
124 <div class=
"collapse navbar-collapse" id=
"containerNavbar">
125 <ul class=
"navbar-nav mr-auto">
126 <li class=
"nav-item active">
127 <a class=
"nav-link" href=
"#">Home
<span class=
"sr-only">(current)
</span></a>
129 <li class=
"nav-item">
130 <a class=
"nav-link" href=
"#">Link
</a>
132 <li class=
"nav-item">
133 <a class=
"nav-link disabled" href=
"#">Disabled
</a>
135 <li class=
"nav-item dropdown">
136 <a class=
"nav-link dropdown-toggle" href=
"http://example.com" id=
"dropdown04" data-toggle=
"dropdown" aria-haspopup=
"true" aria-expanded=
"false">Dropdown
</a>
137 <div class=
"dropdown-menu" aria-labelledby=
"dropdown04">
138 <a class=
"dropdown-item" href=
"#">Action
</a>
139 <a class=
"dropdown-item" href=
"#">Another action
</a>
140 <a class=
"dropdown-item" href=
"#">Something else here
</a>
144 <form class=
"form-inline my-2 my-md-0">
145 <input class=
"form-control mr-sm-2" type=
"text" placeholder=
"Search">
146 <button class=
"btn btn-outline-success my-2 my-sm-0" type=
"submit">Search
</button>
151 <nav class=
"navbar navbar-light bg-faded rounded navbar-toggleable-md">
152 <button class=
"navbar-toggler" type=
"button" data-toggle=
"collapse" data-target=
"#containerNavbarCenter" aria-controls=
"containerNavbarCenter" aria-expanded=
"false" aria-label=
"Toggle navigation">
153 <span class=
"navbar-toggler-icon"></span>
156 <div class=
"collapse navbar-collapse justify-content-md-center" id=
"containerNavbarCenter">
157 <ul class=
"navbar-nav">
158 <li class=
"nav-item active">
159 <a class=
"nav-link" href=
"#">Centered nav only
<span class=
"sr-only">(current)
</span></a>
161 <li class=
"nav-item">
162 <a class=
"nav-link" href=
"#">Link
</a>
164 <li class=
"nav-item">
165 <a class=
"nav-link disabled" href=
"#">Disabled
</a>
167 <li class=
"nav-item dropdown">
168 <a class=
"nav-link dropdown-toggle" href=
"http://example.com" id=
"dropdown05" data-toggle=
"dropdown" aria-haspopup=
"true" aria-expanded=
"false">Dropdown
</a>
169 <div class=
"dropdown-menu" aria-labelledby=
"dropdown05">
170 <a class=
"dropdown-item" href=
"#">Action
</a>
171 <a class=
"dropdown-item" href=
"#">Another action
</a>
172 <a class=
"dropdown-item" href=
"#">Something else here
</a>
179 <div class=
"jumbotron">
180 <div class=
"col-sm-8 mx-auto">
181 <h1>Navbar examples
</h1>
182 <p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a
<code>.container
</code>. For positioning of navbars, checkout the
<a href=
"../navbar-top/">top
</a> and
<a href=
"../navbar-top-fixed/">fixed top
</a> examples.
</p>
183 <p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.
</p>
185 <a class=
"btn btn-primary" href=
"../../components/navbar/" role=
"button">View navbar docs
»</a>
192 <!-- Bootstrap core JavaScript
193 ================================================== -->
194 <!-- Placed at the end of the document so the pages load faster -->
195 <script src=
"https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity=
"sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin=
"anonymous"></script>
196 <script>window.jQuery || document.write('
<script src=
"../../assets/js/vendor/jquery.min.js"><\/script
>')
</script>
197 <script src=
"https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity=
"sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin=
"anonymous"></script>
198 <script src=
"../../dist/js/bootstrap.min.js"></script>
199 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
200 <script src=
"../../assets/js/ie10-viewport-bug-workaround.js"></script>