rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-28 00:54:30 +01:00
Code Issues Actions Packages Releases Activity

Merge branch 'pr/12579'

Browse Source
This commit is contained in:
Mark Otto 2014-02-08 15:53:18 -08:00
commit 842af44fcc
4 changed files with 65 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
docs/examples/sticky-footer-navbar/index.html
View File

@ -28,53 +28,49 @@
<body> <body>
<!-- Wrap all page content here --> <!-- Fixed navbar -->
<div id="wrap"> <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 class="collapse navbar-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="container">
<div class="page-header"> <div class="navbar-header">
<h1>Sticky footer with fixed navbar</h1> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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>
<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> <div class="collapse navbar-collapse">
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> <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>
</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 with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<div id="footer"> <div id="footer">
<div class="container"> <div class="container">
<p class="text-muted">Place sticky footer content here.</p> <p class="text-muted">Place sticky footer content here.</p>

28
docs/examples/sticky-footer-navbar/sticky-footer-navbar.css
View File

@ -1,24 +1,18 @@
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
html {
html, position: relative;
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
height: auto;
min-height: 100%; min-height: 100%;
/* Pad bottom by footer height */
padding: 0 0 60px;
/* Negative indent footer by its height */
margin: 0 auto -60px;
} }
body {
/* Set the fixed height of the footer here */ /* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer { #footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px; height: 60px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@ -28,7 +22,7 @@ body {
-------------------------------------------------- */ -------------------------------------------------- */
/* Not required for template or sticky footer method. */ /* Not required for template or sticky footer method. */
#wrap > .container { body > .container {
padding: 60px 15px 0; padding: 60px 15px 0;
} }
.container .text-muted { .container .text-muted {

16
docs/examples/sticky-footer/index.html
View File

@ -28,17 +28,13 @@
<body> <body>
<!-- Wrap all page content here --> <!-- Begin page content -->
<div id="wrap"> <div class="container">
<div class="page-header">
<!-- Begin page content --> <h1>Sticky footer</h1>
<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>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </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>
<p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div> </div>
<div id="footer"> <div id="footer">

26
docs/examples/sticky-footer/sticky-footer.css
View File

@ -1,24 +1,18 @@
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
html {
html, position: relative;
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
height: auto;
min-height: 100%; min-height: 100%;
/* Pad bottom by footer height */
padding: 0 0 60px;
/* Negative indent footer by its height */
margin: 0 auto -60px;
} }
body {
/* Set the fixed height of the footer here */ /* Margin bottom by footer height */
margin-bottom: 60px;
}
#footer { #footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px; height: 60px;
background-color: #f5f5f5; background-color: #f5f5f5;
} }