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

add sticky footer example per martin bean's suggestion, using the implementation by ryan fait

parent a2690c6d
Hide whitespace changes
Inline Side-by-side
Showing
with 144 additions and 2 deletions
+144 -2
docs/assets/img/examples/bootstrap-example-sticky-footer.png 0 → 100644
+ 0
- 0
View file @ a4a6244e
docs/assets/img/examples/bootstrap-example-sticky-footer.png

11.6 KB

docs/examples/sticky-footer.html 0 → 100644
+ 124
- 0
View file @ a4a6244e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer &middot; Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
}
.container .credit {
margin: 20px 0;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</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.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="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>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
docs/getting-started.html
+ 10
- 1
View file @ a4a6244e
......@@ -277,6 +277,15 @@
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</li>
<li class="span3">
<a class="thumbnail" href="examples/sticky-footer.html">
<img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</li>
<!--
<li class="span3">
<a class="thumbnail" href="examples/carousel.html">
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
......@@ -284,7 +293,7 @@
<h4>Carousel jumbotron</h4>
<p>A more interactive riff on the basic marketing site featuring a prominent carousel.</p>
</li>
-->
</ul>
</section>
......
docs/templates/pages/getting-started.mustache
+ 10
- 1
View file @ a4a6244e
......@@ -206,6 +206,15 @@
<h4>{{_i}}Sign in{{/i}}</h4>
<p>{{_i}}Barebones sign in form with custom, larger form controls and a flexible layout.{{/i}}</p>
</li>
<li class="span3">
<a class="thumbnail" href="examples/sticky-footer.html">
<img src="assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>{{_i}}Sticky footer{{/i}}</h4>
<p>{{_i}}Pin a fixed-height footer to the bottom of the user's viewport.{{/i}}</p>
</li>
<!--
<li class="span3">
<a class="thumbnail" href="examples/carousel.html">
<img src="assets/img/examples/bootstrap-example-carousel.png" alt="">
......@@ -213,7 +222,7 @@
<h4>{{_i}}Carousel jumbotron{{/i}}</h4>
<p>{{_i}}A more interactive riff on the basic marketing site featuring a prominent carousel.{{/i}}</p>
</li>
-->
</ul>
</section>
......
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