Bootstrap/site/docs/4.1/examples/navbar-fixed/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Fixed top navbar example for Bootstrap</title>

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

    <!-- Custom styles for this template -->
    <link href="navbar-top-fixed.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="container">
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>
        <a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs &raquo;</a>
      </div>
    </main>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../assets/js/vendor/popper.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>
Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression. 2017-10-03 18:34:59 +02:00			`<!doctype html>`
new fixed navbar example 2014-07-14 18:05:21 +02:00			`<html lang="en">`
			`<head>`
			`<meta charset="utf-8">`
Add shrink-to-fit viewport directive Fixes potential problems with iOS9's new viewport behavior - see for instance https://forums.developer.apple.com/thread/13510 2015-10-06 13:35:39 +02:00			`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">`
new fixed navbar example 2014-07-14 18:05:21 +02:00			`<meta name="description" content="">`
			`<meta name="author" content="">`
fix location of favicons so it loads when viewing the examples. This is the only one I found in the project, so I am assuming it is the right one to point to (#22895) 2017-07-16 15:19:20 +02:00			`<link rel="icon" href="../../../../favicon.ico">`
new fixed navbar example 2014-07-14 18:05:21 +02:00
			`<title>Fixed top navbar example for Bootstrap</title>`

			`<!-- Bootstrap core CSS -->`
Reorganize docs for easier deploys With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager. 2018-06-21 06:31:38 +02:00			`<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">`
new fixed navbar example 2014-07-14 18:05:21 +02:00
			`<!-- Custom styles for this template -->`
			`<link href="navbar-top-fixed.css" rel="stylesheet">`
			`</head>`

			`<body>`

update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables 2017-06-26 03:29:43 +02:00			`<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">`
more docs updates 2017-03-21 07:13:34 +01:00			`<a class="navbar-brand" href="#">Fixed navbar</a>`
			`<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">`
put new toggler markup to use 2016-12-22 07:11:04 +01:00			`<span class="navbar-toggler-icon"></span>`
			`</button>`
fix up navbar top and fixed top examples 2016-12-22 05:51:15 +01:00			`<div class="collapse navbar-collapse" id="navbarCollapse">`
update all examples 2016-12-29 02:25:00 +01:00			`<ul class="navbar-nav mr-auto">`
fix up navbar top and fixed top examples 2016-12-22 05:51:15 +01:00			`<li class="nav-item active">`
			`<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>`
			`</li>`
			`<li class="nav-item">`
			`<a class="nav-link" href="#">Link</a>`
			`</li>`
			`<li class="nav-item">`
			`<a class="nav-link disabled" href="#">Disabled</a>`
			`</li>`
			`</ul>`
unify alignment of all these dang navbar forms 2016-12-23 08:04:02 +01:00			`<form class="form-inline mt-2 mt-md-0">`
Add explicit aria-label to placeholder-only inputs While `placeholder` is nominally valid per spec http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation it is inelegant, a fallback, and not supported in ios/safari/voiceover and android/chrome/talkback, to name a few combinations `aria-describedby` is also not really the right tool for providing a name/label equivalent, so remove that from the list of possible alternative methods / clarify how it can be used 2017-03-30 23:45:36 +02:00			`<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">`
unify alignment of all these dang navbar forms 2016-12-23 08:04:02 +01:00			`<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>`
fix up navbar top and fixed top examples 2016-12-22 05:51:15 +01:00			`</form>`
new fixed navbar example 2014-07-14 18:05:21 +02:00			`</div>`
fix up navbar top and fixed top examples 2016-12-22 05:51:15 +01:00			`</nav>`
new fixed navbar example 2014-07-14 18:05:21 +02:00
Structure examples with appropriate `<main>`, `<header>`, `<footer>` Structure examples with appropriate `<main>`, `<header>`, `<footer>` 2017-09-13 20:51:08 +02:00			`<main role="main" class="container">`
new fixed navbar example 2014-07-14 18:05:21 +02:00			`<div class="jumbotron">`
			`<h1>Navbar example</h1>`
clean up navbar examples 2014-11-30 00:07:13 +01:00			`<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.</p>`
Fix broken/redirected links, moving to HTTPS where possible. (#20557) 2016-10-03 18:55:59 +02:00			`<a class="btn btn-lg btn-primary" href="../../components/navbar/" role="button">View navbar docs »</a>`
new fixed navbar example 2014-07-14 18:05:21 +02:00			`</div>`
Structure examples with appropriate `<main>`, `<header>`, `<footer>` Structure examples with appropriate `<main>`, `<header>`, `<footer>` 2017-09-13 20:51:08 +02:00			`</main>`
new fixed navbar example 2014-07-14 18:05:21 +02:00
			`<!-- Bootstrap core JavaScript`
			`================================================== -->`
			`<!-- Placed at the end of the document so the pages load faster -->`
Update jQuery to v3.3.1. (#25398) 2018-01-23 07:18:33 +01:00			`<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>`
Reorganize docs for easier deploys With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager. 2018-06-21 06:31:38 +02:00			`<script>window.jQuery \|\| document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>`
			`<script src="../../assets/js/vendor/popper.min.js"></script>`
			`<script src="../../dist/js/bootstrap.min.js"></script>`
new fixed navbar example 2014-07-14 18:05:21 +02:00			`</body>`
			`</html>`