Skip to content
GitLab
Commit b53ad74d authored by Mark Otto's avatar Mark Otto
Browse files

clean up navbar examples

parent c9012873
Hide whitespace changes
Inline Side-by-side
Showing
with 16 additions and 236 deletions
+16 -236
docs/examples/navbar-fixed-top/index.html deleted 100644 → 0
+ 0
- 85
View file @ c9012873
<!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">
<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-fixed-top.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
docs/examples/navbar-fixed-top/navbar-fixed-top.css deleted 100644 → 0
+ 0
- 4
View file @ c9012873
body {
min-height: 2000px;
padding-top: 70px;
}
docs/examples/navbar-static-top/index.html deleted 100644 → 0
+ 0
- 86
View file @ c9012873
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Static 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-static-top.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</head>
<body>
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li class="active"><a href="./">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
docs/examples/navbar-static-top/navbar-static-top.css deleted 100644 → 0
+ 0
- 7
View file @ c9012873
body {
min-height: 2000px;
}
.navbar-static-top {
margin-bottom: 19px;
}
docs/examples/navbar-top-fixed/index.html
+ 1
- 1
View file @ b53ad74d
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<div class="container"> <div class="container">
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <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 &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </div>
......
docs/examples/navbar-top/index.html
+ 1
- 1
View file @ b53ad74d
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<div class="container"> <div class="container">
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in it's original position and moves with the rest of the page.</p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
</div> </div>
</div> </div>
......
docs/examples/navbar/index.html
+ 12
- 39
View file @ b53ad74d
...@@ -24,49 +24,22 @@ ...@@ -24,49 +24,22 @@
<div class="container"> <div class="container">
<!-- Static navbar --> <div class="collapse" id="navbar-header">
<nav class="navbar navbar-default" role="navigation"> <div class="inverse p-a">
<div class="container-fluid"> <h3>Collapsed content</h3>
<div class="navbar-header"> <p>Toggleable via the navbar brand.</p>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> </div>
<span class="sr-only">Toggle navigation</span> </div>
<span class="icon-bar"></span> <div class="navbar navbar-default navbar-static-top">
<span class="icon-bar"></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
<span class="icon-bar"></span> &#9776;
</button> </button>
<a class="navbar-brand" href="#">Project name</a> </div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action --> <!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron"> <div class="jumbotron">
<h1>Navbar example</h1> <h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> <p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit it's width and will scroll with the rest of the page's content.</p>
<p> <p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
</p> </p>
......
docs/getting-started/examples.md
+ 2
- 13
View file @ b53ad74d
...@@ -43,17 +43,6 @@ Build on the basic template above with Bootstrap's many components. We encourage ...@@ -43,17 +43,6 @@ Build on the basic template above with Bootstrap's many components. We encourage
### Navbars ### Navbars
<div class="row bs-examples"> <div class="row bs-examples">
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}examples/navbar-top/">
<h4>New top navbar</h4>
</a>
</div>
<div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}examples/navbar-top-fixed/">
<h4>New fixed top navbar</h4>
</a>
</div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}examples/navbar/"> <a href="{{ site.baseurl }}examples/navbar/">
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar.jpg" alt=""> <img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar.jpg" alt="">
...@@ -62,7 +51,7 @@ Build on the basic template above with Bootstrap's many components. We encourage ...@@ -62,7 +51,7 @@ Build on the basic template above with Bootstrap's many components. We encourage
<p>Super basic template that includes the navbar along with some additional content.</p> <p>Super basic template that includes the navbar along with some additional content.</p>
</div> </div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}examples/navbar-static-top/"> <a href="{{ site.baseurl }}examples/navbar-top/">
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar-static.jpg" alt=""> <img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar-static.jpg" alt="">
</a> </a>
<h4>Static top navbar</h4> <h4>Static top navbar</h4>
...@@ -71,7 +60,7 @@ Build on the basic template above with Bootstrap's many components. We encourage ...@@ -71,7 +60,7 @@ Build on the basic template above with Bootstrap's many components. We encourage
<div class="clearfix visible-xs-block"></div> <div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-md-4"> <div class="col-xs-6 col-md-4">
<a href="{{ site.baseurl }}examples/navbar-fixed-top/"> <a href="{{ site.baseurl }}examples/navbar-top-fixed/">
<img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar-fixed.jpg" alt=""> <img class="img-thumbnail" src="{{ site.baseurl }}examples/screenshots/navbar-fixed.jpg" alt="">
</a> </a>
<h4>Fixed navbar</h4> <h4>Fixed navbar</h4>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment