diff options
Diffstat (limited to 'docs/4.1/examples/navbar-fixed')
-rw-r--r-- | docs/4.1/examples/navbar-fixed/index.html | 61 | ||||
-rw-r--r-- | docs/4.1/examples/navbar-fixed/navbar-top-fixed.css | 5 |
2 files changed, 66 insertions, 0 deletions
diff --git a/docs/4.1/examples/navbar-fixed/index.html b/docs/4.1/examples/navbar-fixed/index.html new file mode 100644 index 0000000000..1c5196ffbe --- /dev/null +++ b/docs/4.1/examples/navbar-fixed/index.html @@ -0,0 +1,61 @@ +<!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>Fixed top navbar example for Bootstrap</title> + + <!-- Bootstrap core CSS --> + <link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet"> + + <!-- Custom styles for this template --> + <link href="navbar-top-fixed.css" rel="stylesheet"> + </head> + + <body> + + <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> + <a class="navbar-brand" href="#">Fixed navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarCollapse"> + <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> + </ul> + <form class="form-inline mt-2 mt-md-0"> + <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> + <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> + </form> + </div> + </nav> + + <main role="main" class="container"> + <div class="jumbotron"> + <h1>Navbar example</h1> + <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p> + <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a> + </div> + </main> + + <!-- 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> + <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> + </body> +</html> diff --git a/docs/4.1/examples/navbar-fixed/navbar-top-fixed.css b/docs/4.1/examples/navbar-fixed/navbar-top-fixed.css new file mode 100644 index 0000000000..c77c0c1475 --- /dev/null +++ b/docs/4.1/examples/navbar-fixed/navbar-top-fixed.css @@ -0,0 +1,5 @@ +/* Show it is fixed to the top */ +body { + min-height: 75rem; + padding-top: 4.5rem; +} |