diff options
Diffstat (limited to 'docs/examples/navbars/index.html')
| -rw-r--r-- | docs/examples/navbars/index.html | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html new file mode 100644 index 000000000..8694df3fc --- /dev/null +++ b/docs/examples/navbars/index.html @@ -0,0 +1,204 @@ +<!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> + + <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> + <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"> + <span class="navbar-toggler-icon"></span> + </button> + <a class="navbar-brand" href="#">Navbar</a> + + <div class="collapse navbar-collapse" id="navbarsExampleDefault"> + <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"> + <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"> + <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 mr-sm-2" type="text" placeholder="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + + <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> + <div class="container"> + <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"> + <span class="navbar-toggler-icon"></span> + </button> + <a class="navbar-brand" href="#">Container</a> + + <div class="collapse navbar-collapse" id="navbarsExampleContainer"> + <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"> + <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"> + <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 mr-sm-2" type="text" placeholder="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </div> + </nav> + + <nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExampleCenteredNav"> + <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"> + <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"> + <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-light bg-faded rounded navbar-toggleable-md"> + <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"> + <span class="navbar-toggler-icon"></span> + </button> + <a class="navbar-brand" href="#">Navbar</a> + + <div class="collapse navbar-collapse" id="containerNavbar"> + <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"> + <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"> + <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 mr-sm-2" type="text" placeholder="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + + <nav class="navbar navbar-light bg-faded rounded navbar-toggleable-md"> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#containerNavbarCenter" aria-controls="containerNavbarCenter" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse justify-content-md-center" id="containerNavbarCenter"> + <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"> + <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"> + <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="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-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> |