2018-04-09 18:02:59 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
< link rel = "icon" href = "../../../../favicon.ico" >
< title > Navbar Template for Bootstrap< / title >
<!-- Bootstrap core CSS -->
2018-05-01 05:50:39 +02:00
< link href = "../../dist/css/bootstrap.min.css" rel = "stylesheet" >
2018-04-09 18:02:59 +02:00
<!-- Custom styles for this template -->
< link href = "navbar.css" rel = "stylesheet" >
< / head >
< body >
< nav class = "navbar navbar-dark bg-dark" >
< a class = "navbar-brand" href = "#" > Never expand< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample01" aria-controls = "navbarsExample01" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample01" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown01" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown01" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" aria-label = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand navbar-dark bg-dark" >
< a class = "navbar-brand" href = "#" > Always expand< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample02" aria-controls = "navbarsExample02" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample02" >
< ul class = "navbar-nav mr-auto" >
< 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 >
< / ul >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand-sm navbar-dark bg-dark" >
< a class = "navbar-brand" href = "#" > Expand at sm< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample03" aria-controls = "navbarsExample03" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample03" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown03" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown03" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand-md navbar-dark bg-dark" >
< a class = "navbar-brand" href = "#" > Expand at md< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample04" aria-controls = "navbarsExample04" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample04" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown04" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown04" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand-lg navbar-dark bg-dark" >
< a class = "navbar-brand" href = "#" > Expand at lg< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample05" aria-controls = "navbarsExample05" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample05" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown05" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown05" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand-xl navbar-dark bg-dark" >
< a class = "navbar-brand" href = "#" > Expand at xl< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample06" aria-controls = "navbarsExample06" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample06" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown06" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown06" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand-lg navbar-dark bg-dark" >
< div class = "container" >
< a class = "navbar-brand" href = "#" > Container< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample07" aria-controls = "navbarsExample07" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample07" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown07" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown07" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" aria-label = "Search" >
< / form >
< / div >
< / div >
< / nav >
< nav class = "navbar navbar-expand-lg navbar-dark bg-dark" >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample08" aria-controls = "navbarsExample08" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse justify-content-md-center" id = "navbarsExample08" >
< ul class = "navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" > Centered nav only < 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown08" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown08" >
< 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 >
< div class = "container" >
< nav class = "navbar navbar-expand-lg navbar-light bg-light rounded" >
< a class = "navbar-brand" href = "#" > Navbar< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample09" aria-controls = "navbarsExample09" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarsExample09" >
< ul class = "navbar-nav mr-auto" >
< 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown09" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown09" >
< 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 >
< form class = "form-inline my-2 my-md-0" >
< input class = "form-control" type = "text" placeholder = "Search" aria-label = "Search" >
< / form >
< / div >
< / nav >
< nav class = "navbar navbar-expand-lg navbar-light bg-light rounded" >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarsExample10" aria-controls = "navbarsExample10" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse justify-content-md-center" id = "navbarsExample10" >
< ul class = "navbar-nav" >
< li class = "nav-item active" >
< a class = "nav-link" href = "#" > Centered nav only < 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" >
2018-04-30 18:29:48 +02:00
< a class = "nav-link dropdown-toggle" href = "https://example.com" id = "dropdown10" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" > Dropdown< / a >
2018-04-09 18:02:59 +02:00
< div class = "dropdown-menu" aria-labelledby = "dropdown10" >
< 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 >
< main role = "main" >
< 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 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-static/" > top< / a > and < a href = "../navbar-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-primary" href = "../../components/navbar/" role = "button" > View navbar docs » < / a >
< / p >
< / div >
< / div >
< / main >
< / div >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous" > < / script >
2018-05-01 05:50:39 +02:00
< script > window . jQuery || document . write ( '<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>' ) < / script >
< script src = "../../assets/js/vendor/popper.min.js" > < / script >
< script src = "../../dist/js/bootstrap.min.js" > < / script >
2018-04-09 18:02:59 +02:00
< / body >
< / html >
