mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
6a8f76f020
The sticky-footer example uses a drop down in its navbar, and dropdowns require Bootstrap's JS to work. Use the minified version of Bootstrap since this example is about the CSS and not about the JS.
75 lines
2.9 KiB
HTML
75 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<title>Sticky Footer Navbar Template for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="sticky-footer-navbar.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Wrap all page content here -->
|
|
<div id="wrap">
|
|
|
|
<!-- Fixed navbar -->
|
|
<div class="navbar navbar-fixed-top">
|
|
<div class="container">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
|
|
<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 class="nav-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 <b class="caret"></b></a>
|
|
<ul class="dropdown-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>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Begin page content -->
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>Sticky footer with fixed navbar</h1>
|
|
</div>
|
|
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
|
|
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<div class="container">
|
|
<p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<script src="../assets/js/jquery.js"></script>
|
|
<script src="../bootstrap/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html> |