rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-03 15:24:19 +01:00
Code Issues Actions Packages Releases Activity
e1b5b4f989
Bootstrap/site/docs/4.1/examples/sticky-footer-navbar/index.html

71 lines
3.0 KiB
HTML
Raw Normal View History

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>
Flexbox based sticky footer example (#26674) * Flexbox based sticky footer * Update guide message * Use utility classes instead of custom CSS
2018-07-25 02:40:55 +02:00
<html lang="en" class="h-100">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<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">
Update remaining templates to match starter template
2013-06-24 02:17:08 +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">
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 -->
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">
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">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</head>
Flexbox based sticky footer example (#26674) * Flexbox based sticky footer * Update guide message * Use utility classes instead of custom CSS
2018-07-25 02:40:55 +02:00
<body class="d-flex flex-column h-100">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
Structure examples with appropriate `<main>`, `<header>`, `<footer>` Structure examples with appropriate `<main>`, `<header>`, `<footer>`
2017-09-13 20:51:08 +02:00
<header>
<!-- Fixed navbar -->
<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>
</header>
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 -->
Flexbox based sticky footer example (#26674) * Flexbox based sticky footer * Update guide message * Use utility classes instead of custom CSS
2018-07-25 02:40:55 +02:00
<main role="main" class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a 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>main &gt; .container</code>.</p>
Use https in more places and fix a few redirects.
2018-09-14 16:49:59 +02:00
<p>Back to <a href="../sticky-footer/">the default sticky footer</a> minus the navbar.</p>
Flexbox based sticky footer example (#26674) * Flexbox based sticky footer * Update guide message * Use utility classes instead of custom CSS
2018-07-25 02:40:55 +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>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
Flexbox based sticky footer example (#26674) * Flexbox based sticky footer * Update guide message * Use utility classes instead of custom CSS
2018-07-25 02:40:55 +02:00
<footer class="footer mt-auto py-3">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<div class="container">
fixes #18293: clean up sticky stuff
2015-12-08 07:05:37 +01:00
<span class="text-muted">Place sticky footer content here.</span>
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
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 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>
docs: use the bundle dist file.
2018-09-14 15:09:12 +02:00
<script src="../../dist/js/bootstrap.bundle.min.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>
Reference in New Issue Copy Permalink