diff options
| author | Mark Otto <[email protected]> | 2015-12-07 22:05:37 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-12-07 22:05:37 -0800 |
| commit | 3d45bd6106a9f8d1dea442798a956cf473fcea73 (patch) | |
| tree | 90446cc276ef251febe525f9a27216b9eebd7d09 /docs/examples | |
| parent | 5a6a12872887a4a1288541ac904ae040e31cf648 (diff) | |
| download | bootstrap-3d45bd6106a9f8d1dea442798a956cf473fcea73.tar.xz bootstrap-3d45bd6106a9f8d1dea442798a956cf473fcea73.zip | |
fixes #18293: clean up sticky stuff
Diffstat (limited to 'docs/examples')
| -rw-r--r-- | docs/examples/sticky-footer-navbar/index.html | 64 | ||||
| -rw-r--r-- | docs/examples/sticky-footer-navbar/sticky-footer-navbar.css | 4 | ||||
| -rw-r--r-- | docs/examples/sticky-footer/index.html | 4 | ||||
| -rw-r--r-- | docs/examples/sticky-footer/sticky-footer.css | 4 |
4 files changed, 36 insertions, 40 deletions
diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index 73086c72d..be7722696 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -21,42 +21,42 @@ <body> <!-- Fixed navbar --> - <nav class="navbar navbar-default navbar-fixed-top"> - <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 class="pos-f-t"> + <div class="collapse" id="navbar-header"> + <div class="container bg-inverse p-a"> + <h3>Collapsed content</h3> + <p>Toggleable via the navbar brand.</p> </div> - <div id="navbar" class="collapse navbar-collapse"> - <ul class="nav navbar-nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">About</a></li> - <li><a href="#">Contact</a></li> - <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown</a> - <div class="dropdown-menu"> - <a class="dropdown-item" href="#">Action</a> - <a class="dropdown-item" href="#">Another action</a> - <a class="dropdown-item" href="#">Something else here</a> - <div role="separator" class="dropdown-divider"></div> - <h6 class="dropdown-header">Nav header</h6> - <a class="dropdown-item" href="#">Separated link</a> - <a class="dropdown-item" href="#">One more separated link</a> - </div> - </li> - </ul> - </div><!--/.nav-collapse --> </div> - </nav> + <nav class="navbar navbar-light navbar-static-top bg-faded"> + <div class="container"> + <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2"> + ☰ + </button> + <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> + <a class="navbar-brand" href="#">Sticky footer</a> + <ul class="nav navbar-nav"> + <li class="nav-item active"> + <a class="nav-link" href="#">Nav item <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Another nav item</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">More nav</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Last link</a> + </li> + </ul> + </div> + </div> + </nav> + </div> <!-- Begin page content --> <div class="container"> - <div class="page-header"> + <div class="page-header m-t"> <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> @@ -65,7 +65,7 @@ <footer class="footer"> <div class="container"> - <p class="text-muted">Place sticky footer content here.</p> + <span class="text-muted">Place sticky footer content here.</span> </div> </footer> diff --git a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css index ee8038063..07fd56a64 100644 --- a/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css +++ b/docs/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -14,6 +14,7 @@ body { width: 100%; /* Set the fixed height of the footer here */ height: 60px; + line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; } @@ -25,9 +26,6 @@ body { body > .container { padding: 60px 15px 0; } -.container .text-muted { - margin: 20px 0; -} .footer > .container { padding-right: 15px; diff --git a/docs/examples/sticky-footer/index.html b/docs/examples/sticky-footer/index.html index bbd23b786..8321d151c 100644 --- a/docs/examples/sticky-footer/index.html +++ b/docs/examples/sticky-footer/index.html @@ -22,7 +22,7 @@ <!-- Begin page content --> <div class="container"> - <div class="page-header"> + <div class="page-header m-t"> <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> @@ -31,7 +31,7 @@ <footer class="footer"> <div class="container"> - <p class="text-muted">Place sticky footer content here.</p> + <span class="text-muted">Place sticky footer content here.</span> </div> </footer> diff --git a/docs/examples/sticky-footer/sticky-footer.css b/docs/examples/sticky-footer/sticky-footer.css index b6699e80e..46578d1a5 100644 --- a/docs/examples/sticky-footer/sticky-footer.css +++ b/docs/examples/sticky-footer/sticky-footer.css @@ -14,6 +14,7 @@ body { width: 100%; /* Set the fixed height of the footer here */ height: 60px; + line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; } @@ -27,6 +28,3 @@ body { max-width: 680px; padding: 0 15px; } -.container .text-muted { - margin: 20px 0; -} |