Bootstrap/docs/examples/sticky-footer-navbar/index.html

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Sticky Footer Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="sticky-footer-navbar.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <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>
        <div id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
    </nav>

    <!-- 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>

    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>


    <!-- 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.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
Disable IE Compatibility Mode in docs, examples ...because we don't support it and it may cause problems for people trying to view the docs in IE. 2013-09-24 18:43:16 +02:00			`<meta http-equiv="X-UA-Compatible" content="IE=edge">`
Improve <meta> tags 2014-01-19 13:27:17 +01:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Fix issue #15601 — Position of X-UA-Compatible Fix issue #15601 — Position of X-UA-Compatible, charset and viewport Add comment to all examples The non-responsive is correctly saying 2 instead of 3 2015-01-23 20:34:52 +01:00			`<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`<meta name="description" content="">`
			`<meta name="author" content="">`
Move apple-touch-icon-precomposed.png and favicon.ico in docs root. This way, it works in all browsers. 2014-03-25 08:30:04 +01:00			`<link rel="icon" href="../../favicon.ico">`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00
change file names to example names 2013-07-21 08:17:01 +02:00			`<title>Sticky Footer Navbar Template for Bootstrap</title>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00
			`<!-- Bootstrap core CSS -->`
fix assets links in all examples 2014-01-01 15:29:13 +01:00			`<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00
Add CSS portion of IE10 viewport bug workaround to examples Fixes #17337 2015-09-30 21:40:56 +02:00			`<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->`
			`<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">`

Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`<!-- Custom styles for this template -->`
add git ignore 2013-07-21 08:30:08 +02:00			`<link href="sticky-footer-navbar.css" rel="stylesheet">`
add IE's Conditional comments for respondjs and html5shiv 2013-08-18 08:28:52 +02:00
add ie-emulation-modes-warning.js to docs & examples 2014-04-25 00:35:05 +02:00			`<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->`
fix assets links in all examples 2014-01-01 15:29:13 +01:00			`<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->`
add ie-emulation-modes-warning.js to docs & examples 2014-04-25 00:35:05 +02:00			`<script src="../../assets/js/ie-emulation-modes-warning.js"></script>`
Warn about IE8 + Respond.js + file:// problem in examples; fix #11019 2013-10-18 03:39:03 +02:00
Fix a small typo in comment. [ci skip] 2014-10-23 08:11:03 +02:00			`<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->`
add IE's Conditional comments for respondjs and html5shiv 2013-08-18 08:28:52 +02:00			`<!--[if lt IE 9]>`
Update html5shiv to 3.7.2. 2014-05-10 08:22:43 +02:00			`<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>`
Use the new respond.js URL. 2014-04-21 18:12:43 +02:00			`<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>`
add IE's Conditional comments for respondjs and html5shiv 2013-08-18 08:28:52 +02:00			`<![endif]-->`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</head>`

			`<body>`

Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<!-- Fixed navbar -->`
Redundant role="navigation" on <nav>s plus one example that still used the old <div role="navigation"> and a fix-up of the callout as per https://github.com/twbs/bootstrap/issues/15109 2014-11-14 02:44:09 +01:00			`<nav class="navbar navbar-default navbar-fixed-top">`
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<div class="container">`
			`<div class="navbar-header">`
ARIA support for collapse Added handling of aria-expanded=true/false to collapse.js, updated documentation to include advice on making expand/collapse controls accessible, updated examples and javascript documentation to use aria-expanded and aria-controls (when targetting single collapsible element, using ID rather than class selector) Closes #14147. Closes #14153. 2014-07-15 12:39:27 +02:00			`<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">`
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<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>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</div>`
ARIA support for collapse Added handling of aria-expanded=true/false to collapse.js, updated documentation to include advice on making expand/collapse controls accessible, updated examples and javascript documentation to use aria-expanded and aria-controls (when targetting single collapsible element, using ID rather than class selector) Closes #14147. Closes #14153. 2014-07-15 12:39:27 +02:00			`<div id="navbar" class="collapse navbar-collapse">`
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<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">`
generalize dropdowns / drop role="menu" as role="menu" is a very specific (and strict) ARIA pattern for desktop-like application menus, and our dropdowns are often used as pure navigation dropdowns, this change abandons ARIA menus for a more open-ended and light-weight approach (see http://heydonworks.com/practical_aria_examples/#submenus and http://www.w3.org/WAI/tutorials/menus/flyout/#improve-screen-reader-support-using-wai-aria) note that in dropdown.js, switched to now target ``.dropdown-menu`` instead of ``role["menu"]`` - this also prevents bootstrap scripts from "bleeding" into non-bootstrap components on the same page. also removed the ``role=["listbox"]`` part, which appears to be vestigial/unused (only place in bootstrap that uses that role are carousels, and their key handling is done separately) 2015-06-02 10:41:40 +02:00			`<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>`
			`<ul class="dropdown-menu">`
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<li><a href="#">Action</a></li>`
			`<li><a href="#">Another action</a></li>`
			`<li><a href="#">Something else here</a></li>`
ensure divider list items have role="separator" http://www.w3.org/TR/wai-aria/roles#separator 2015-05-30 00:48:35 +02:00			`<li role="separator" class="divider"></li>`
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<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 -->`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</div>`
consistently use <nav> instead of <div> for .navbar in docs 2014-08-16 03:09:05 +02:00			`</nav>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<!-- Begin page content -->`
			`<div class="container">`
			`<div class="page-header">`
			`<h1>Sticky footer with fixed navbar</h1>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</div>`
Sticky footers without any wrappers 2014-02-04 13:56:42 +01:00			`<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>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</div>`

Examples: Make use of the `footer` tag instead of a `div`. 2014-10-29 21:07:13 +01:00			`<footer class="footer">`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`<div class="container">`
Shorten sticky footer examples footer content to prevent wrapping 2013-12-01 07:41:43 +01:00			`<p class="text-muted">Place sticky footer content here.</p>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</div>`
Examples: Make use of the `footer` tag instead of a `div`. 2014-10-29 21:07:13 +01:00			`</footer>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00
add respond.js to all examples (fixes #9731) 2013-08-17 21:32:11 +02:00
Enable dropdown in sticky-footer with Bootstrap JS 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. 2013-07-30 19:10:34 +02:00			`<!-- Bootstrap core JavaScript`
			`================================================== -->`
add respond.js to all examples (fixes #9731) 2013-08-17 21:32:11 +02:00			`<!-- Placed at the end of the document so the pages load faster -->`
Update jQuery to v1.11.3. 2015-05-10 00:04:14 +02:00			`<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>`
Add a local jQuery fallback. Shouldn't really happen, but China for example has blocked Google so this should help. 2015-07-25 23:25:00 +02:00			`<script>window.jQuery \|\| document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>`
hella examples fixing, mostly navbars and lots of work on grids example 2013-08-16 02:39:37 +02:00			`<script src="../../dist/js/bootstrap.min.js"></script>`
Fix #14164: move Windows Phone 8 IE10 viewport bug workaround script to footer of pages 2014-07-28 02:01:34 +02:00			`<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->`
			`<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>`
Update remaining templates to match starter template 2013-06-24 02:17:08 +02:00			`</body>`
add respond.js to all examples (fixes #9731) 2013-08-17 21:32:11 +02:00			`</html>`