From b53ad74d472d0dbe3669b61e79c89fd35da4aa1f Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 29 Nov 2014 15:07:13 -0800
Subject: [PATCH] clean up navbar examples
---
docs/examples/navbar-fixed-top/index.html | 85 ------------------
.../navbar-fixed-top/navbar-fixed-top.css | 4 -
docs/examples/navbar-static-top/index.html | 86 -------------------
.../navbar-static-top/navbar-static-top.css | 7 --
docs/examples/navbar-top-fixed/index.html | 2 +-
docs/examples/navbar-top/index.html | 2 +-
docs/examples/navbar/index.html | 51 +++--------
docs/getting-started/examples.md | 15 +---
8 files changed, 16 insertions(+), 236 deletions(-)
delete mode 100644 docs/examples/navbar-fixed-top/index.html
delete mode 100644 docs/examples/navbar-fixed-top/navbar-fixed-top.css
delete mode 100644 docs/examples/navbar-static-top/index.html
delete mode 100644 docs/examples/navbar-static-top/navbar-static-top.css
diff --git a/docs/examples/navbar-fixed-top/index.html b/docs/examples/navbar-fixed-top/index.html
deleted file mode 100644
index 571322aea5..0000000000
--- a/docs/examples/navbar-fixed-top/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!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 »</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>
diff --git a/docs/examples/navbar-fixed-top/navbar-fixed-top.css b/docs/examples/navbar-fixed-top/navbar-fixed-top.css
deleted file mode 100644
index b0c8837425..0000000000
--- a/docs/examples/navbar-fixed-top/navbar-fixed-top.css
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
- min-height: 2000px;
- padding-top: 70px;
-}
diff --git a/docs/examples/navbar-static-top/index.html b/docs/examples/navbar-static-top/index.html
deleted file mode 100644
index 90d4e85d89..0000000000
--- a/docs/examples/navbar-static-top/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!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 »</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>
diff --git a/docs/examples/navbar-static-top/navbar-static-top.css b/docs/examples/navbar-static-top/navbar-static-top.css
deleted file mode 100644
index b48cc14429..0000000000
--- a/docs/examples/navbar-static-top/navbar-static-top.css
+++ /dev/null
@@ -1,7 +0,0 @@
-body {
- min-height: 2000px;
-}
-
-.navbar-static-top {
- margin-bottom: 19px;
-}
diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html
index 474085ae9b..b5caa644d9 100644
--- a/docs/examples/navbar-top-fixed/index.html
+++ b/docs/examples/navbar-top-fixed/index.html
@@ -39,7 +39,7 @@
<div class="container">
<div class="jumbotron">
<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 »</a>
</div>
</div>
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html
index f3dcea6b40..334b8430ae 100644
--- a/docs/examples/navbar-top/index.html
+++ b/docs/examples/navbar-top/index.html
@@ -37,7 +37,7 @@
<div class="container">
<div class="jumbotron">
<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 »</a>
</div>
</div>
diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html
index 8f148214e3..d6084e663e 100644
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -24,49 +24,22 @@
<div class="container">
- <!-- Static navbar -->
- <nav class="navbar navbar-default" role="navigation">
- <div class="container-fluid">
- <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="#">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>
+ <div class="collapse" id="navbar-header">
+ <div class="inverse p-a">
+ <h3>Collapsed content</h3>
+ <p>Toggleable via the navbar brand.</p>
+ </div>
+ </div>
+ <div class="navbar navbar-default navbar-static-top">
+ <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
+ ☰
+ </button>
+ </div>
<!-- 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 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>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
diff --git a/docs/getting-started/examples.md b/docs/getting-started/examples.md
index ae16d9d37e..83ea0b2ac5 100644
--- a/docs/getting-started/examples.md
+++ b/docs/getting-started/examples.md
@@ -43,17 +43,6 @@ Build on the basic template above with Bootstrap's many components. We encourage
### Navbars
<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">
<a href="{{ site.baseurl }}examples/navbar/">
<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
<p>Super basic template that includes the navbar along with some additional content.</p>
</div>
<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="">
</a>
<h4>Static top navbar</h4>
@@ -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="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="">
</a>
<h4>Fixed navbar</h4>
--
GitLab