aboutsummaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2013-12-14 16:46:40 -0800
committerMark Otto <[email protected]>2013-12-14 16:46:40 -0800
commit4c64c1eecdb52d943a50d2c181aeb915a3caed34 (patch)
tree93b556ef583bb6a327cad76804bbdf4c5a4c6f4c /examples
parent2b56ff04614c4617355d16c14784654e841bcf4d (diff)
parentd79431ca02683c9d1c754201260f66e5dda15614 (diff)
downloadbootstrap-4c64c1eecdb52d943a50d2c181aeb915a3caed34.tar.xz
bootstrap-4c64c1eecdb52d943a50d2c181aeb915a3caed34.zip
Merge branch 'master' into pr/11302
Conflicts: dist/css/bootstrap.css dist/css/bootstrap.min.css
Diffstat (limited to 'examples')
-rw-r--r--examples/carousel/index.html3
-rw-r--r--examples/cover/cover.css160
-rw-r--r--examples/cover/index.html75
-rw-r--r--examples/dashboard/dashboard.css93
-rw-r--r--examples/dashboard/index.html243
-rw-r--r--examples/jumbotron/index.html5
-rw-r--r--examples/justified-nav/index.html3
-rw-r--r--examples/navbar-fixed-top/index.html3
-rw-r--r--examples/navbar-static-top/index.html3
-rw-r--r--examples/navbar/index.html3
-rw-r--r--examples/non-responsive/index.html3
-rw-r--r--examples/non-responsive/non-responsive.css24
-rw-r--r--examples/offcanvas/index.html1
-rw-r--r--examples/offcanvas/offcanvas.css3
-rw-r--r--examples/screenshots/cover.jpgbin0 -> 36631 bytes
-rw-r--r--examples/screenshots/dashboard.jpgbin0 -> 105375 bytes
-rw-r--r--examples/screenshots/jumbotron.jpgbin77911 -> 101215 bytes
-rw-r--r--examples/screenshots/theme.jpgbin95407 -> 85467 bytes
-rw-r--r--examples/signin/index.html2
-rw-r--r--examples/starter-template/index.html3
-rw-r--r--examples/sticky-footer-navbar/index.html5
-rw-r--r--examples/sticky-footer-navbar/sticky-footer-navbar.css2
-rw-r--r--examples/sticky-footer/index.html2
-rw-r--r--examples/sticky-footer/sticky-footer.css2
-rw-r--r--examples/theme/index.html5
25 files changed, 616 insertions, 27 deletions
diff --git a/examples/carousel/index.html b/examples/carousel/index.html
index 14674eebc..2e8516fab 100644
--- a/examples/carousel/index.html
+++ b/examples/carousel/index.html
@@ -31,10 +31,11 @@
<div class="navbar-wrapper">
<div class="container">
- <div class="navbar navbar-inverse navbar-static-top">
+ <div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/cover/cover.css b/examples/cover/cover.css
new file mode 100644
index 000000000..177ce03bf
--- /dev/null
+++ b/examples/cover/cover.css
@@ -0,0 +1,160 @@
+/*
+ * Globals
+ */
+
+/* Links */
+a,
+a:focus,
+a:hover {
+ color: #fff;
+}
+
+/* Custom default button */
+.btn-default,
+.btn-default:hover,
+.btn-default:focus {
+ color: #333;
+ text-shadow: none; /* Prevent inheritence from `body` */
+ background-color: #fff;
+ border: 1px solid #fff;
+}
+
+
+/*
+ * Base structure
+ */
+
+html,
+body {
+ height: 100%;
+ background-color: #333;
+}
+body {
+ color: #fff;
+ text-align: center;
+ text-shadow: 0 1px 3px rgba(0,0,0,.5);
+ box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+}
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+.site-wrapper {
+ display: table;
+ width: 100%;
+ min-height: 100%;
+}
+.site-wrapper-inner {
+ display: table-cell;
+ vertical-align: top;
+}
+.cover-container {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Padding for spacing */
+.inner {
+ padding: 30px;
+}
+
+
+/*
+ * Header
+ */
+.masthead-brand {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.masthead-nav > li {
+ display: inline-block;
+}
+.masthead-nav > li + li {
+ margin-left: 20px;
+}
+.masthead-nav > li > a {
+ padding-left: 0;
+ padding-right: 0;
+ font-size: 16px;
+ font-weight: bold;
+ color: #fff; /* IE8 proofing */
+ color: rgba(255,255,255,.75);
+ border-bottom: 2px solid transparent;
+}
+.masthead-nav > li > a:hover,
+.masthead-nav > li > a:focus {
+ background-color: transparent;
+ border-bottom-color: rgba(255,255,255,.25);
+}
+.masthead-nav > .active > a,
+.masthead-nav > .active > a:hover,
+.masthead-nav > .active > a:focus {
+ color: #fff;
+ border-bottom-color: #fff;
+}
+
+@media (min-width: 768px) {
+ .masthead-brand {
+ float: left;
+ }
+ .masthead-nav {
+ float: right;
+ }
+}
+
+
+/*
+ * Cover
+ */
+
+.cover {
+ padding: 0 20px;
+}
+.cover .btn-lg {
+ padding: 10px 20px;
+ font-weight: bold;
+}
+
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+ color: #999; /* IE8 proofing */
+ color: rgba(255,255,255,.5);
+}
+
+
+/*
+ * Affix and center
+ */
+
+@media (min-width: 768px) {
+ /* Pull out the header and footer */
+ .masthead {
+ position: fixed;
+ top: 0;
+ }
+ .mastfoot {
+ position: fixed;
+ bottom: 0;
+ }
+ /* Start the vertical centering */
+ .site-wrapper-inner {
+ vertical-align: middle;
+ }
+ /* Handle the widths */
+ .masthead,
+ .mastfoot,
+ .cover-container {
+ width: 100%; /* Must be percentage or pixels for horizontal alignment */
+ }
+}
+
+@media (min-width: 992px) {
+ .masthead,
+ .mastfoot,
+ .cover-container {
+ width: 700px;
+ }
+}
diff --git a/examples/cover/index.html b/examples/cover/index.html
new file mode 100644
index 000000000..ae9ca1829
--- /dev/null
+++ b/examples/cover/index.html
@@ -0,0 +1,75 @@
+<!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="">
+ <meta name="author" content="">
+ <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
+
+ <title>Cover Template for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="cover.css" rel="stylesheet">
+
+ <!-- Just for debugging purposes. Don't actually copy this line! -->
+ <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
+ <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!--[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]-->
+ </head>
+
+ <body>
+
+ <div class="site-wrapper">
+
+ <div class="site-wrapper-inner">
+
+ <div class="cover-container">
+
+ <div class="masthead clearfix">
+ <div class="inner">
+ <h3 class="masthead-brand">Cover</h3>
+ <ul class="nav masthead-nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Features</a></li>
+ <li><a href="#">Contact</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="inner cover">
+ <h1 class="cover-heading">Cover your page.</h1>
+ <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
+ <p class="lead">
+ <a href="#" class="btn btn-lg btn-default">Learn more</a>
+ </p>
+ </div>
+
+ <div class="mastfoot">
+ <div class="inner">
+ <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+ </div>
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="../../dist/js/bootstrap.min.js"></script>
+ <script src="../../docs-assets/js/holder.js"></script>
+ </body>
+</html>
diff --git a/examples/dashboard/dashboard.css b/examples/dashboard/dashboard.css
new file mode 100644
index 000000000..750124bf8
--- /dev/null
+++ b/examples/dashboard/dashboard.css
@@ -0,0 +1,93 @@
+/*
+ * Base structure
+ */
+
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+ padding-top: 50px;
+}
+
+
+/*
+ * Global add-ons
+ */
+
+.sub-header {
+ padding-bottom: 10px;
+ border-bottom: 1px solid #eee;
+}
+
+
+/*
+ * Sidebar
+ */
+
+/* Hide for mobile, show later */
+.sidebar {
+ display: none;
+}
+@media (min-width: 768px) {
+ .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 1000;
+ display: block;
+ padding: 70px 20px 20px;
+ background-color: #f5f5f5;
+ border-right: 1px solid #eee;
+ }
+}
+
+/* Sidebar navigation */
+.nav-sidebar {
+ margin-left: -20px;
+ margin-right: -21px; /* 20px padding + 1px border */
+ margin-bottom: 20px;
+}
+.nav-sidebar > li > a {
+ padding-left: 20px;
+ padding-right: 20px;
+}
+.nav-sidebar > .active > a {
+ color: #fff;
+ background-color: #428bca;
+}
+
+
+/*
+ * Main content
+ */
+
+.main {
+ padding: 20px;
+}
+@media (min-width: 768px) {
+ .main {
+ padding-left: 40px;
+ pading-right: 40px;
+ }
+}
+.main .page-header {
+ margin-top: 0;
+}
+
+
+/*
+ * Placeholder dashboard ideas
+ */
+
+.placeholders {
+ margin-bottom: 30px;
+ text-align: center;
+}
+.placeholders h4 {
+ margin-bottom: 0;
+}
+.placeholder {
+ margin-bottom: 20px;
+}
+.placeholder img {
+ border-radius: 50%;
+}
diff --git a/examples/dashboard/index.html b/examples/dashboard/index.html
new file mode 100644
index 000000000..e721aa16a
--- /dev/null
+++ b/examples/dashboard/index.html
@@ -0,0 +1,243 @@
+<!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="">
+ <meta name="author" content="">
+ <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
+
+ <title>Dashboard Template for Bootstrap</title>
+
+ <!-- Bootstrap core CSS -->
+ <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+ <!-- Custom styles for this template -->
+ <link href="dashboard.css" rel="stylesheet">
+
+ <!-- Just for debugging purposes. Don't actually copy this line! -->
+ <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+
+ <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!--[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]-->
+ </head>
+
+ <body>
+
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <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 class="navbar-collapse collapse">
+ <ul class="nav navbar-nav navbar-right">
+ <li><a href="#">Dashboard</a></li>
+ <li><a href="#">Settings</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Help</a></li>
+ </ul>
+ <form class="navbar-form navbar-right">
+ <input type="text" class="form-control" placeholder="Search...">
+ </form>
+ </div>
+ </div>
+ </div>
+
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-sm-3 sidebar">
+ <ul class="nav nav-sidebar">
+ <li class="active"><a href="#">Overview</a></li>
+ <li><a href="#">Reports</a></li>
+ <li><a href="#">Analytics</a></li>
+ <li><a href="#">Export</a></li>
+ </ul>
+ <ul class="nav nav-sidebar">
+ <li><a href="">Nav item</a></li>
+ <li><a href="">Nav item again</a></li>
+ <li><a href="">One more nav</a></li>
+ <li><a href="">Another nav item</a></li>
+ <li><a href="">More navigation</a></li>
+ </ul>
+ <ul class="nav nav-sidebar">
+ <li><a href="">Nav item again</a></li>
+ <li><a href="">One more nav</a></li>
+ <li><a href="">Another nav item</a></li>
+ </ul>
+ </div>
+ <div class="col-sm-9 col-sm-offset-3 main">
+ <h1 class="page-header">Dashboard</h1>
+
+ <div class="row placeholders">
+ <div class="col-xs-6 col-sm-3 placeholder">
+ <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
+ <h4>Label</h4>
+ <span class="text-muted">Something else</span>
+ </div>
+ <div class="col-xs-6 col-sm-3 placeholder">
+ <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
+ <h4>Label</h4>
+ <span class="text-muted">Something else</span>
+ </div>
+ <div class="col-xs-6 col-sm-3 placeholder">
+ <img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
+ <h4>Label</h4>
+ <span class="text-muted">Something else</span>
+ </div>
+ <div class="col-xs-6 col-sm-3 placeholder">
+ <img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
+ <h4>Label</h4>
+ <span class="text-muted">Something else</span>
+ </div>
+ </div>
+
+ <h2 class="sub-header">Section title</h2>
+ <div class="table-responsive">
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Header</th>
+ <th>Header</th>
+ <th>Header</th>
+ <th>Header</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>1,001</td>
+ <td>Lorem</td>
+ <td>ipsum</td>
+ <td>dolor</td>
+ <td>sit</td>
+ </tr>
+ <tr>
+ <td>1,002</td>
+ <td>amet</td>
+ <td>consectetur</td>
+ <td>adipiscing</td>
+ <td>elit</td>
+ </tr>
+ <tr>
+ <td>1,003</td>
+ <td>Integer</td>
+ <td>nec</td>
+ <td>odio</td>
+ <td>Praesent</td>
+ </tr>
+ <tr>
+ <td>1,003</td>
+ <td>libero</td>
+ <td>Sed</td>
+ <td>cursus</td>
+ <td>ante</td>
+ </tr>
+ <tr>
+ <td>1,004</td>
+ <td>dapibus</td>
+ <td>diam</td>
+ <td>Sed</td>
+ <td>nisi</td>
+ </tr>
+ <tr>
+ <td>1,005</td>
+ <td>Nulla</td>
+ <td>quis</td>
+ <td>sem</td>
+ <td>at</td>
+ </tr>
+ <tr>
+ <td>1,006</td>
+ <td>nibh</td>
+ <td>elementum</td>
+ <td>imperdiet</td>
+ <td>Duis</td>
+ </tr>
+ <tr>
+ <td>1,007</td>
+ <td>sagittis</td>
+ <td>ipsum</td>
+ <td>Praesent</td>
+ <td>mauris</td>
+ </tr>
+ <tr>
+ <td>1,008</td>
+ <td>Fusce</td>
+ <td>nec</td>
+ <td>tellus</td>
+ <td>sed</td>
+ </tr>
+ <tr>
+ <td>1,009</td>
+ <td>augue</td>
+ <td>semper</td>
+ <td>porta</td>
+ <td>Mauris</td>
+ </tr>
+ <tr>
+ <td>1,010</td>
+ <td>massa</td>
+ <td>Vestibulum</td>
+ <td>lacinia</td>
+ <td>arcu</td>
+ </tr>
+ <tr>
+ <td>1,011</td>
+ <td>eget</td>
+ <td>nulla</td>
+ <td>Class</td>
+ <td>aptent</td>
+ </tr>
+ <tr>
+ <td>1,012</td>
+ <td>taciti</td>
+ <td>sociosqu</td>
+ <td>ad</td>
+ <td>litora</td>
+ </tr>
+ <tr>
+ <td>1,013</td>
+ <td>torquent</td>
+ <td>per</td>
+ <td>conubia</td>
+ <td>nostra</td>
+ </tr>
+ <tr>
+ <td>1,014</td>
+ <td>per</td>
+ <td>inceptos</td>
+ <td>himenaeos</td>
+ <td>Curabitur</td>
+ </tr>
+ <tr>
+ <td>1,015</td>
+ <td>sodales</td>
+ <td>ligula</td>
+ <td>in</td>
+ <td>libero</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Bootstrap core JavaScript
+ ================================================== -->
+ <!-- Placed at the end of the document so the pages load faster -->
+ <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+ <script src="../../dist/js/bootstrap.min.js"></script>
+ <script src="../../docs-assets/js/holder.js"></script>
+ </body>
+</html>
diff --git a/examples/jumbotron/index.html b/examples/jumbotron/index.html
index b4cd6ed57..b7ff7f76c 100644
--- a/examples/jumbotron/index.html
+++ b/examples/jumbotron/index.html
@@ -28,10 +28,11 @@
<body>
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -39,7 +40,7 @@
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
- <form class="navbar-form navbar-right">
+ <form class="navbar-form navbar-right" role="form">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
diff --git a/examples/justified-nav/index.html b/examples/justified-nav/index.html
index c2cf0ca13..9c36f6647 100644
--- a/examples/justified-nav/index.html
+++ b/examples/justified-nav/index.html
@@ -52,7 +52,8 @@
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
- <h2>Heading</h2>
+ <h2>Safari bug warning!</h2>
+ <p class="text-danger">Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
diff --git a/examples/navbar-fixed-top/index.html b/examples/navbar-fixed-top/index.html
index e6b3a096d..de04aa645 100644
--- a/examples/navbar-fixed-top/index.html
+++ b/examples/navbar-fixed-top/index.html
@@ -29,10 +29,11 @@
<body>
<!-- Fixed navbar -->
- <div class="navbar navbar-default navbar-fixed-top">
+ <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/navbar-static-top/index.html b/examples/navbar-static-top/index.html
index 098cd4d98..c77c00a20 100644
--- a/examples/navbar-static-top/index.html
+++ b/examples/navbar-static-top/index.html
@@ -29,10 +29,11 @@
<body>
<!-- Static navbar -->
- <div class="navbar navbar-default navbar-static-top">
+ <div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/navbar/index.html b/examples/navbar/index.html
index 612f491e9..24c154a49 100644
--- a/examples/navbar/index.html
+++ b/examples/navbar/index.html
@@ -31,9 +31,10 @@
<div class="container">
<!-- Static navbar -->
- <div class="navbar navbar-default">
+ <div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/non-responsive/index.html b/examples/non-responsive/index.html
index 517d874b1..1c56b300f 100644
--- a/examples/non-responsive/index.html
+++ b/examples/non-responsive/index.html
@@ -31,10 +31,11 @@
<body>
<!-- Fixed navbar -->
- <div class="navbar navbar-default navbar-fixed-top">
+ <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/non-responsive/non-responsive.css b/examples/non-responsive/non-responsive.css
index 526b0b8be..9813bb9fe 100644
--- a/examples/non-responsive/non-responsive.css
+++ b/examples/non-responsive/non-responsive.css
@@ -8,6 +8,7 @@
body {
padding-top: 70px;
padding-bottom: 30px;
+ min-width: 970px;
}
/* Finesse the page header spacing */
@@ -63,6 +64,9 @@ body {
.navbar-toggle {
display: none;
}
+.navbar-collapse {
+ border-top: 0;
+}
.navbar-brand {
margin-left: -15px;
@@ -86,7 +90,7 @@ body {
}
/* Undo custom dropdowns */
-.navbar .open .dropdown-menu {
+.navbar .navbar-nav .open .dropdown-menu {
position: absolute;
float: left;
background-color: #fff;
@@ -97,20 +101,20 @@ body {
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
-.navbar .open .dropdown-menu > li > a {
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
-.navbar .open .dropdown-menu > li > a:hover,
-.navbar .open .dropdown-menu > li > a:focus,
-.navbar .open .dropdown-menu > .active > a,
-.navbar .open .dropdown-menu > .active > a:hover,
-.navbar .open .dropdown-menu > .active > a:focus {
+.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
+.navbar .navbar-nav .open .dropdown-menu > .active > a,
+.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #fff !important;
background-color: #428bca !important;
}
-.navbar .open .dropdown-menu > .disabled > a,
-.navbar .open .dropdown-menu > .disabled > a:hover,
-.navbar .open .dropdown-menu > .disabled > a:focus {
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #999 !important;
background-color: transparent !important;
}
diff --git a/examples/offcanvas/index.html b/examples/offcanvas/index.html
index 1fc5c551e..a9350bdd6 100644
--- a/examples/offcanvas/index.html
+++ b/examples/offcanvas/index.html
@@ -31,6 +31,7 @@
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/offcanvas/offcanvas.css b/examples/offcanvas/offcanvas.css
index 71ad2ac2c..ef632dc00 100644
--- a/examples/offcanvas/offcanvas.css
+++ b/examples/offcanvas/offcanvas.css
@@ -2,7 +2,8 @@
* Style tweaks
* --------------------------------------------------
*/
-html {
+html,
+body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
diff --git a/examples/screenshots/cover.jpg b/examples/screenshots/cover.jpg
new file mode 100644
index 000000000..2a81259de
--- /dev/null
+++ b/examples/screenshots/cover.jpg
Binary files differ
diff --git a/examples/screenshots/dashboard.jpg b/examples/screenshots/dashboard.jpg
new file mode 100644
index 000000000..fb7b0526d
--- /dev/null
+++ b/examples/screenshots/dashboard.jpg
Binary files differ
diff --git a/examples/screenshots/jumbotron.jpg b/examples/screenshots/jumbotron.jpg
index 46bce0c53..30c11a2c8 100644
--- a/examples/screenshots/jumbotron.jpg
+++ b/examples/screenshots/jumbotron.jpg
Binary files differ
diff --git a/examples/screenshots/theme.jpg b/examples/screenshots/theme.jpg
index ef47acb9c..ad527b55a 100644
--- a/examples/screenshots/theme.jpg
+++ b/examples/screenshots/theme.jpg
Binary files differ
diff --git a/examples/signin/index.html b/examples/signin/index.html
index 72110751f..2f6e37020 100644
--- a/examples/signin/index.html
+++ b/examples/signin/index.html
@@ -30,7 +30,7 @@
<div class="container">
- <form class="form-signin">
+ <form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="form-control" placeholder="Email address" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
diff --git a/examples/starter-template/index.html b/examples/starter-template/index.html
index a3d8b98d7..a792db821 100644
--- a/examples/starter-template/index.html
+++ b/examples/starter-template/index.html
@@ -28,10 +28,11 @@
<body>
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
diff --git a/examples/sticky-footer-navbar/index.html b/examples/sticky-footer-navbar/index.html
index 52bc60506..35641e35a 100644
--- a/examples/sticky-footer-navbar/index.html
+++ b/examples/sticky-footer-navbar/index.html
@@ -32,10 +32,11 @@
<div id="wrap">
<!-- Fixed navbar -->
- <div class="navbar navbar-default navbar-fixed-top">
+ <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -76,7 +77,7 @@
<div id="footer">
<div class="container">
- <p class="text-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>
+ <p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
diff --git a/examples/sticky-footer-navbar/sticky-footer-navbar.css b/examples/sticky-footer-navbar/sticky-footer-navbar.css
index 4869de0e6..7ca093add 100644
--- a/examples/sticky-footer-navbar/sticky-footer-navbar.css
+++ b/examples/sticky-footer-navbar/sticky-footer-navbar.css
@@ -31,7 +31,7 @@ body {
#wrap > .container {
padding: 60px 15px 0;
}
-.container .credit {
+.container .text-muted {
margin: 20px 0;
}
diff --git a/examples/sticky-footer/index.html b/examples/sticky-footer/index.html
index b52754df9..e5807130e 100644
--- a/examples/sticky-footer/index.html
+++ b/examples/sticky-footer/index.html
@@ -43,7 +43,7 @@
<div id="footer">
<div class="container">
- <p class="text-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>
+ <p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
diff --git a/examples/sticky-footer/sticky-footer.css b/examples/sticky-footer/sticky-footer.css
index db69addbb..54ed9e876 100644
--- a/examples/sticky-footer/sticky-footer.css
+++ b/examples/sticky-footer/sticky-footer.css
@@ -33,6 +33,6 @@ body {
max-width: 680px;
padding: 0 15px;
}
-.container .credit {
+.container .text-muted {
margin: 20px 0;
}
diff --git a/examples/theme/index.html b/examples/theme/index.html
index 69388544c..5adb44ab0 100644
--- a/examples/theme/index.html
+++ b/examples/theme/index.html
@@ -31,10 +31,11 @@
<body>
<!-- Fixed navbar -->
- <div class="navbar navbar-inverse navbar-fixed-top">
+ <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -148,6 +149,7 @@
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
@@ -180,6 +182,7 @@
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>