rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

Make example pages use Jekyll; add sticky footer navbar image to examples

Browse Source
This commit is contained in:
Mark Otto 2013-02-14 23:38:00 -08:00
parent 41ef649aa3
commit aa5f090371
13 changed files with 954 additions and 1318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_config.yml
View File

@ -1,8 +1,13 @@
# Dependencies
markdown: rdiscount
permalink: pretty
pygments: true
# Permalinks
permalink: pretty
# Server
auto: true
source: ./docs
destination: ./_gh_pages
auto: true
server_port: 9001
url: http://bootstrap.dev:9001
server_port: 9001

BIN
docs/assets/img/examples/bootstrap-example-sticky-footer-navbar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
docs/assets/img/examples/browser-icon-firefox.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 172 KiB

After

Width:  |  Height:  |  Size: 172 KiB

BIN
docs/assets/img/examples/browser-icon-safari.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 205 KiB

After

Width:  |  Height:  |  Size: 205 KiB

241
docs/examples/carousel.html
View File

@ -1,33 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Carousel Template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Carousel template
---
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
<!-- Custom styles for this template -->
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
body {
padding-bottom: 40px;
color: #5a5a5a;
}
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
@ -35,53 +29,53 @@
z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
.navbar-wrapper .navbar {
}
.navbar-wrapper .navbar {
}
}
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
/* Remove border and change up box shadow for more contrast */
.navbar .navbar-inner {
border: 0;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
}
/* Downsize the brand/project name a bit */
.navbar .brand {
/* Downsize the brand/project name a bit */
.navbar .brand {
padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
font-size: 16px;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
}
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
/* Navbar links: increase padding for taller navbar */
.navbar .nav > li > a {
padding: 15px 20px;
}
}
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
/* Offset the responsive button for proper vertical alignment */
.navbar .btn-navbar {
margin-top: 10px;
}
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
}
.carousel .container {
.carousel .container {
position: relative;
z-index: 9;
}
}
.carousel-control {
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
@ -89,91 +83,91 @@
background-color: transparent;
border: 0;
z-index: 10;
}
}
.carousel .item {
.carousel .item {
height: 500px;
}
.carousel img {
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
}
.carousel-caption {
.carousel-caption {
background-color: transparent;
position: static;
max-width: 550px;
padding: 0 20px;
margin-top: 200px;
}
.carousel-caption h1,
.carousel-caption .lead {
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.carousel-caption .btn {
}
.carousel-caption .btn {
margin-top: 10px;
}
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .span4 {
/* Center align the text within the three columns below the carousel */
.marketing .span4 {
text-align: center;
}
.marketing h2 {
}
.marketing h2 {
font-weight: normal;
}
.marketing .span4 p {
}
.marketing .span4 p {
margin-left: 10px;
margin-right: 10px;
}
}
/* Featurettes
------------------------- */
/* Featurettes
------------------------- */
.featurette-divider {
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
.featurette {
}
.featurette {
padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
overflow: hidden; /* Vertically center images part 2: clear their floats. */
}
.featurette-image {
}
.featurette-image {
margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
}
}
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
/* Give some space on the sides of the floated elements so text doesn't run right into it. */
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
}
.featurette-image.pull-right {
margin-left: 40px;
}
}
/* Thin out the marketing headings */
.featurette-heading {
/* Thin out the marketing headings */
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
}
/* RESPONSIVE CSS
-------------------------------------------------- */
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 979px) {
@media (max-width: 979px) {
.container.navbar-wrapper {
margin-bottom: 0;
@ -203,10 +197,10 @@
max-width: 40%;
margin: 0 auto 20px;
}
}
}
@media (max-width: 767px) {
@media (max-width: 767px) {
.navbar-inner {
margin: -20px;
@ -250,29 +244,14 @@
line-height: 1.5;
}
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
}
</style>
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
@ -310,13 +289,13 @@
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
</div><!-- /.navbar-wrapper -->
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="../assets/img/examples/slide-01.jpg" alt="">
@ -351,15 +330,15 @@
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div><!-- /.carousel -->
</div><!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
@ -421,34 +400,4 @@
<p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
</footer>
</div><!-- /.container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
<script src="../assets/js/holder/holder.js"></script>
</body>
</html>
</div><!-- /.container -->

63
docs/examples/jumbotron-narrow.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Narrow page template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Narrow page template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
/* Space out content a bit */
body {
padding-top: 20px;
@ -95,14 +75,11 @@
margin-bottom: 30px;
}
}
</style>
</head>
<body>
</style>
<div class="container-narrow">
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
@ -148,26 +125,4 @@
<p>&copy; Company 2013</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div> <!-- /container -->

67
docs/examples/jumbotron.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jumbotron template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Jumbotron template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
@ -55,12 +35,9 @@
padding: 0;
}
}
</style>
</head>
</style>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
@ -93,9 +70,9 @@
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="container">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
@ -132,26 +109,4 @@
</footer>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div> <!-- /container -->

69
docs/examples/justified-nav.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Justified nav template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Justified nav template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
body {
padding-top: 20px;
@ -38,12 +18,6 @@
padding-right: 15px;
}
/* Custom container */
/* .container > hr {
margin: 60px 0;
}
*/
.footer {
border-top: 1px solid #ddd;
margin-top: 30px;
@ -115,14 +89,11 @@
/* Make the nav on the same line */
}
</style>
</head>
<body>
</style>
<div class="container">
<div class="container">
<div class="masthead">
<h3 class="muted">Project name</h3>
@ -172,26 +143,4 @@
<p>&copy; Company 2013</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div> <!-- /container -->

63
docs/examples/signin.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in form template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Sign in form template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
body {
padding-top: 40px;
@ -69,14 +49,11 @@
border-top-right-radius: 0;
}
</style>
</head>
<body>
</style>
<div class="container">
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
@ -88,26 +65,4 @@
<button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div> <!-- /container -->

64
docs/examples/starter-template.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Starter template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Starter template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
body {
padding-top: 50px;
}
@ -32,12 +12,10 @@
padding: 40px 15px;
text-align: center;
}
</style>
</head>
</style>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@ -55,33 +33,13 @@
</div><!--/.nav-collapse -->
</div>
</div>
</div>
</div>
<div class="container">
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div><!-- /container -->

69
docs/examples/sticky-footer-navbar.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer with navbar template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Sticky footer with navbar template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
/* Sticky footer styles
-------------------------------------------------- */
@ -80,15 +60,12 @@
font-size: 80%;
}
</style>
</head>
<body>
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
@ -131,32 +108,10 @@
</div>
<div id="push"></div>
</div>
</div>
<div id="footer">
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div>

69
docs/examples/sticky-footer.html
View File

@ -1,30 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sticky footer template &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Sticky footer template
---
<!-- Bootstrap core CSS -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<!-- Custom styles for this template -->
<style>
<!-- Custom styles for this template -->
<style>
/* Sticky footer styles
-------------------------------------------------- */
@ -75,15 +55,12 @@
margin: 20px 0;
}
</style>
</head>
<body>
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
@ -95,32 +72,10 @@
</div>
<div id="push"></div>
</div>
</div>
<div id="footer">
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
</div>

18
docs/getting-started.html
View File

@ -175,56 +175,56 @@ description: Overview of the project, its contents, and how to get started with
<p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<div class="row bs-docs-examples">
<div class="span4">
<a class="thumbnail" href="/examples/starter-template.html">
<a class="thumbnail" href="/examples/starter-template/">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/jumbotron.html">
<a class="thumbnail" href="/examples/jumbotron/">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/jumbotron-narrow.html">
<a class="thumbnail" href="/examples/jumbotron-narrow/">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/justified-nav.html">
<a class="thumbnail" href="/examples/justified-nav/">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/signin.html">
<a class="thumbnail" href="/examples/signin/">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/sticky-footer.html">
<a class="thumbnail" href="/examples/sticky-footer/">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/sticky-footer.html">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
<a class="thumbnail" href="/examples/sticky-footer-navbar/">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/carousel.html">
<a class="thumbnail" href="/examples/carousel/">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>