mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
clean up navbar examples
This commit is contained in:
Mark Otto
parent
c901287394
commit
b53ad74d47
@ -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>
|
||||
@ -1,4 +0,0 @@
|
||||
body {
|
||||
min-height: 2000px;
|
||||
padding-top: 70px;
|
||||
}
|
||||
@ -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>
|
||||
@ -1,7 +0,0 @@
|
||||
body {
|
||||
min-height: 2000px;
|
||||
}
|
||||
|
||||
.navbar-static-top {
|
||||
margin-bottom: 19px;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user