2016-12-21 23:15:50 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
< meta name = "description" content = "" >
< meta name = "author" content = "" >
< link rel = "icon" href = "../../favicon.ico" >
< title > Navbar Template for Bootstrap< / title >
<!-- Bootstrap core CSS -->
< link href = "../../dist/css/bootstrap.min.css" rel = "stylesheet" >
<!-- Custom styles for this template -->
< link href = "navbar.css" rel = "stylesheet" >
< / head >
< body >
2016-12-22 07:33:18 +01:00
< nav class = "navbar navbar-inverse bg-inverse navbar-toggleable-md" >
2016-12-22 18:11:57 +01:00
< 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" >
2016-12-22 07:11:04 +01:00
< span class = "navbar-toggler-icon" > < / span >
< / button >
2016-12-21 23:15:50 +01:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
2016-12-22 07:33:18 +01:00
< div class = "collapse navbar-collapse" id = "navbarsExampleDefault" >
2016-12-21 23:15:50 +01:00
< ul class = "nav navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" > Home < span class = "sr-only" > (current)< / span > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" > Disabled< / a >
< / li >
< li class = "nav-item dropdown" >
2016-12-21 23:35:02 +01:00
< a class = "nav-link dropdown-toggle" href = "http://example.com" id = "dropdown01" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
< div class = "dropdown-menu" aria-labelledby = "dropdown01" >
2016-12-21 23:15:50 +01:00
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / li >
< / ul >
2016-12-23 08:05:31 +01:00
< form class = "form-inline my-2 my-lg-0" >
2016-12-23 08:04:02 +01:00
< input class = "form-control mr-sm-2" type = "text" placeholder = "Search" >
< button class = "btn btn-outline-success my-2 my-sm-0" type = "submit" > Search< / button >
2016-12-21 23:15:50 +01:00
< / form >
< / div >
< / nav >
2016-12-22 07:33:18 +01:00
< nav class = "navbar navbar-inverse bg-inverse navbar-toggleable-md" >
2016-12-21 23:32:21 +01:00
< div class = "container" >
2016-12-22 18:11:57 +01:00
< 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" >
2016-12-22 07:11:04 +01:00
< span class = "navbar-toggler-icon" > < / span >
< / button >
2016-12-21 23:32:21 +01:00
< a class = "navbar-brand" href = "#" > Container< / a >
2016-12-22 07:33:18 +01:00
< div class = "collapse navbar-collapse" id = "navbarsExampleContainer" >
2016-12-21 23:32:21 +01:00
< ul class = "nav navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" > Home < span class = "sr-only" > (current)< / span > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" > Disabled< / a >
< / li >
< li class = "nav-item dropdown" >
2016-12-21 23:35:02 +01:00
< a class = "nav-link dropdown-toggle" href = "http://example.com" id = "dropdown02" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
< div class = "dropdown-menu" aria-labelledby = "dropdown02" >
2016-12-21 23:32:21 +01:00
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / li >
< / ul >
2016-12-23 08:05:31 +01:00
< form class = "form-inline my-2 my-lg-0" >
2016-12-23 08:04:02 +01:00
< input class = "form-control mr-sm-2" type = "text" placeholder = "Search" >
< button class = "btn btn-outline-success my-2 my-sm-0" type = "submit" > Search< / button >
2016-12-21 23:32:21 +01:00
< / form >
< / div >
< / div >
< / nav >
2016-12-22 07:33:18 +01:00
< nav class = "navbar navbar-inverse bg-inverse navbar-toggleable-md" >
2016-12-22 18:11:57 +01:00
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExampleCenteredNav" aria-controls = "navbarsExampleCenteredNav" aria-expanded = "false" aria-label = "Toggle navigation" >
2016-12-22 07:11:04 +01:00
< span class = "navbar-toggler-icon" > < / span >
< / button >
2016-12-21 23:15:50 +01:00
2016-12-22 07:33:18 +01:00
< div class = "collapse navbar-collapse" id = "navbarsExampleCenteredNav" >
2016-12-21 23:15:50 +01:00
< ul class = "nav navbar-nav text-md-center" >
< li class = "nav-item active" >
2016-12-21 23:32:21 +01:00
< a class = "nav-link" href = "#" > Centered nav only < span class = "sr-only" > (current)< / span > < / a >
2016-12-21 23:15:50 +01:00
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" > Disabled< / a >
< / li >
< li class = "nav-item dropdown" >
2016-12-21 23:35:02 +01:00
< a class = "nav-link dropdown-toggle" href = "http://example.com" id = "dropdown03" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
< div class = "dropdown-menu" aria-labelledby = "dropdown03" >
2016-12-21 23:15:50 +01:00
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / li >
< / ul >
< / div >
< / nav >
2016-12-21 23:32:21 +01:00
< div class = "container" >
2016-12-22 07:33:18 +01:00
< nav class = "navbar navbar-light bg-faded rounded navbar-toggleable-md" >
2016-12-22 18:11:57 +01:00
< 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" >
2016-12-22 07:11:04 +01:00
< span class = "navbar-toggler-icon" > < / span >
< / button >
2016-12-21 23:32:21 +01:00
< a class = "navbar-brand" href = "#" > Navbar< / a >
2016-12-21 23:15:50 +01:00
2016-12-22 07:33:18 +01:00
< div class = "collapse navbar-collapse" id = "containerNavbar" >
2016-12-21 23:15:50 +01:00
< ul class = "nav navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" > Home < span class = "sr-only" > (current)< / span > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" > Disabled< / a >
< / li >
< li class = "nav-item dropdown" >
2016-12-21 23:35:02 +01:00
< a class = "nav-link dropdown-toggle" href = "http://example.com" id = "dropdown04" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
< div class = "dropdown-menu" aria-labelledby = "dropdown04" >
2016-12-21 23:15:50 +01:00
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / li >
< / ul >
2016-12-23 08:05:31 +01:00
< form class = "form-inline my-2 my-lg-0" >
2016-12-23 08:04:02 +01:00
< input class = "form-control mr-sm-2" type = "text" placeholder = "Search" >
< button class = "btn btn-outline-success my-2 my-sm-0" type = "submit" > Search< / button >
2016-12-21 23:15:50 +01:00
< / form >
< / div >
2016-12-21 23:32:21 +01:00
< / nav >
2016-12-21 23:15:50 +01:00
2016-12-22 07:33:18 +01:00
< nav class = "navbar navbar-light bg-faded rounded navbar-toggleable-md" >
2016-12-22 18:11:57 +01:00
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#containerNavbarCenter" aria-controls = "containerNavbarCenter" aria-expanded = "false" aria-label = "Toggle navigation" >
2016-12-22 07:11:04 +01:00
< span class = "navbar-toggler-icon" > < / span >
< / button >
2016-12-21 23:15:50 +01:00
2016-12-22 07:33:18 +01:00
< div class = "collapse navbar-collapse" id = "containerNavbarCenter" >
2016-12-21 23:15:50 +01:00
< ul class = "nav navbar-nav text-md-center" >
< li class = "nav-item active" >
2016-12-21 23:32:21 +01:00
< a class = "nav-link" href = "#" > Centered nav only < span class = "sr-only" > (current)< / span > < / a >
2016-12-21 23:15:50 +01:00
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" > Disabled< / a >
< / li >
< li class = "nav-item dropdown" >
2016-12-21 23:35:02 +01:00
< a class = "nav-link dropdown-toggle" href = "http://example.com" id = "dropdown05" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
< div class = "dropdown-menu" aria-labelledby = "dropdown05" >
2016-12-21 23:15:50 +01:00
< a class = "dropdown-item" href = "#" > Action< / a >
< a class = "dropdown-item" href = "#" > Another action< / a >
< a class = "dropdown-item" href = "#" > Something else here< / a >
< / div >
< / li >
< / ul >
< / div >
2016-12-21 23:32:21 +01:00
< / nav >
2016-12-21 23:15:50 +01:00
< div class = "jumbotron" >
< div class = "col-sm-8 mx-auto" >
< h1 > Navbar examples< / h1 >
< p > This example is a quick exercise to illustrate how the navbar and it's 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 >
< 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 >
< p >
< a class = "btn btn-lg btn-primary" href = "../../components/navbar/" role = "button" > View navbar docs » < / a >
< / p >
< / div >
< / div >
< / div >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity = "sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin = "anonymous" > < / script >
< script > window . jQuery || document . write ( '<script src="../../assets/js/vendor/jquery.min.js"><\/script>' ) < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity = "sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin = "anonymous" > < / script >
< script src = "../../dist/js/bootstrap.min.js" > < / script >
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
< script src = "../../assets/js/ie10-viewport-bug-workaround.js" > < / script >
< / body >
< / html >
