Getting acquainted with this Bootstrap template.
A Pen by Jose OneTime on CodePen.
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.0') | |
meta(name='description' content='sandbox') | |
meta(name='author' content='Christina Laverentz') | |
link(rel='shortcut icon' href='../../docs-assets/ico/favicon.png') | |
title Sticky Footer Navbar Template for Bootstrap | |
// Bootstrap core CSS | |
link(href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet") | |
// Custom styles for this template would go here | |
// HTML5 shim and Respond.js IE8 support of HTML5 elements and MedQuerys | |
// | |
| [if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> | |
| [endif] | |
body | |
// Wrap page content | |
#wrap | |
// Fixed navbar | |
.navbar.navbar-default.navbar-fixed-top(role='navigation') | |
.container | |
.navbar-header | |
button.navbar-toggle(type='button' data-toggle='collapse' data-target='.navbar-collapse') | |
span.sr-only Toggle navigation | |
span.icon-bar | |
span.icon-bar | |
span.icon-bar | |
a.navbar-brand(href='#') Project name | |
.collapse.navbar-collapse | |
ul.nav.navbar-nav | |
li.active: a(href='#') Home | |
li: a(href='#about') About | |
li: a(href='#contact') Contact | |
li.dropdown | |
a.dropdown-toggle(href='#' data-toggle='dropdown') Dropdown | |
b.caret | |
ul.dropdown-menu | |
li: a(href='#') Action | |
li: a(href='#') Another action | |
li: a(href='#') Something else here | |
li.divider | |
li.dropdown-header Nav header | |
li: a(href='#') Separated Link | |
li: a(href='#') One more separated link | |
// Begin page content | |
.container | |
.page-header | |
h1 Sticky footer with fixed navbar | |
p.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. | |
p | |
| Back to | |
a(href='../sticky-footer') the default sticky footer | |
| minus the navbar. | |
// Footer should be outside of .wrap | |
#footer | |
.container | |
p.text-muted Place sticky footer content here. | |
// Bootstrap core JavaScript | |
// ================================= | |
// Placed at the end of the document so the page loads faster | |
script(src='https://code.jquery.com/jquery-1.10.2.min.js') | |
script(src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js") | |