diff options
Diffstat (limited to 'docs/examples')
-rw-r--r-- | docs/examples/carousel.html | 12 | ||||
-rw-r--r-- | docs/examples/fluid.html | 19 | ||||
-rw-r--r-- | docs/examples/hero.html | 10 | ||||
-rw-r--r-- | docs/examples/justified-nav.html (renamed from docs/examples/marketing-alternate.html) | 6 | ||||
-rw-r--r-- | docs/examples/marketing-narrow.html | 4 | ||||
-rw-r--r-- | docs/examples/signin.html | 2 | ||||
-rw-r--r-- | docs/examples/starter-template.html | 6 | ||||
-rw-r--r-- | docs/examples/sticky-footer-navbar.html | 161 | ||||
-rw-r--r-- | docs/examples/sticky-footer.html | 3 |
9 files changed, 199 insertions, 24 deletions
diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html index 0958103fc6..81d1a28a18 100644 --- a/docs/examples/carousel.html +++ b/docs/examples/carousel.html @@ -68,7 +68,7 @@ - /* CUSTOMIZE THE NAVBAR + /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ @@ -88,6 +88,7 @@ text-shadow: 0 1px 1px rgba(0,0,0,.4); background-color: transparent; border: 0; + z-index: 10; } .carousel .item { @@ -254,7 +255,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -278,11 +279,11 @@ <div class="navbar navbar-inverse"> <div class="navbar-inner"> <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. --> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> - </a> + </button> <a class="brand" href="#">Project name</a> <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. --> <div class="nav-collapse collapse"> @@ -417,7 +418,7 @@ <!-- FOOTER --> <footer> <p class="pull-right"><a href="#">Back to top</a></p> - <p>© 2012 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> + <p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> </footer> </div><!-- /.container --> @@ -448,5 +449,6 @@ }) }(window.jQuery) </script> + <script src="../assets/js/holder/holder.js"></script> </body> </html> diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html index 4ca2920efd..502062a273 100644 --- a/docs/examples/fluid.html +++ b/docs/examples/fluid.html @@ -17,12 +17,21 @@ .sidebar-nav { padding: 9px 0; } + + @media (max-width: 980px) { + /* Enable use of floated navbar text */ + .navbar-text.pull-right { + float: none; + padding-left: 5px; + padding-right: 5px; + } + } </style> <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -38,11 +47,11 @@ <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> - </a> + </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <p class="navbar-text pull-right"> @@ -86,7 +95,7 @@ <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> - <p><a class="btn btn-primary btn-large">Learn more »</a></p> + <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p> </div> <div class="row-fluid"> <div class="span4"> @@ -128,7 +137,7 @@ <hr> <footer> - <p>© Company 2012</p> + <p>© Company 2013</p> </footer> </div><!--/.fluid-container--> diff --git a/docs/examples/hero.html b/docs/examples/hero.html index f0a5e17093..6fb7a2c4e0 100644 --- a/docs/examples/hero.html +++ b/docs/examples/hero.html @@ -19,7 +19,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -35,11 +35,11 @@ <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> - </a> + </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> @@ -75,7 +75,7 @@ <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> - <p><a class="btn btn-primary btn-large">Learn more »</a></p> + <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p> </div> <!-- Example row of columns --> @@ -100,7 +100,7 @@ <hr> <footer> - <p>© Company 2012</p> + <p>© Company 2013</p> </footer> </div> <!-- /container --> diff --git a/docs/examples/marketing-alternate.html b/docs/examples/justified-nav.html index 8cbeb02a25..ef8f8d4286 100644 --- a/docs/examples/marketing-alternate.html +++ b/docs/examples/justified-nav.html @@ -57,6 +57,8 @@ } .navbar .nav { margin: 0; + display: table; + width: 100%; } .navbar .nav li { display: table-cell; @@ -82,7 +84,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -146,7 +148,7 @@ <hr> <div class="footer"> - <p>© Company 2012</p> + <p>© Company 2013</p> </div> </div> <!-- /container --> diff --git a/docs/examples/marketing-narrow.html b/docs/examples/marketing-narrow.html index 9ce1cd5bc6..f6f5d16851 100644 --- a/docs/examples/marketing-narrow.html +++ b/docs/examples/marketing-narrow.html @@ -50,7 +50,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -111,7 +111,7 @@ <hr> <div class="footer"> - <p>© Company 2012</p> + <p>© Company 2013</p> </div> </div> <!-- /container --> diff --git a/docs/examples/signin.html b/docs/examples/signin.html index 17578483a3..031052789d 100644 --- a/docs/examples/signin.html +++ b/docs/examples/signin.html @@ -46,7 +46,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> diff --git a/docs/examples/starter-template.html b/docs/examples/starter-template.html index 93ba809e38..29c47a89c9 100644 --- a/docs/examples/starter-template.html +++ b/docs/examples/starter-template.html @@ -18,7 +18,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -34,11 +34,11 @@ <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> - </a> + </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html new file mode 100644 index 0000000000..a9027c8c28 --- /dev/null +++ b/docs/examples/sticky-footer-navbar.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Sticky footer · Twitter Bootstrap</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- CSS --> + <link href="../assets/css/bootstrap.css" rel="stylesheet"> + <style type="text/css"> + + /* Sticky footer styles + -------------------------------------------------- */ + + html, + body { + height: 100%; + /* The html and body elements cannot have any padding or margin. */ + } + + /* Wrapper for page content to push down footer */ + #wrap { + min-height: 100%; + height: auto !important; + height: 100%; + /* Negative indent footer by it's height */ + margin: 0 auto -60px; + } + + /* Set the fixed height of the footer here */ + #push, + #footer { + height: 60px; + } + #footer { + background-color: #f5f5f5; + } + + /* Lastly, apply responsive CSS fixes as necessary */ + @media (max-width: 767px) { + #footer { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + } + } + + + + /* Custom page CSS + -------------------------------------------------- */ + /* Not required for template or sticky footer method. */ + + #wrap > .container { + padding-top: 60px; + } + .container .credit { + margin: 20px 0; + } + + code { + font-size: 80%; + } + + </style> + <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> + + <!-- 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> + + + <!-- Part 1: Wrap all page content here --> + <div id="wrap"> + + <!-- Fixed navbar --> + <div class="navbar navbar-fixed-top"> + <div class="navbar-inner"> + <div class="container"> + <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="brand" href="#">Project name</a> + <div class="nav-collapse collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="nav-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + </div> + + <!-- Begin page content --> + <div class="container"> + <div class="page-header"> + <h1>Sticky footer with fixed navbar</h1> + </div> + <p class="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</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> + <p>Back to <a href="./sticky-footer.html">the sticky footer</a> minus the navbar.</p> + </div> + + <div id="push"></div> + </div> + + <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> + + + + <!-- 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> + + </body> +</html> diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html index 1c9c36149e..d307d79387 100644 --- a/docs/examples/sticky-footer.html +++ b/docs/examples/sticky-footer.html @@ -67,7 +67,7 @@ <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> - <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <script src="../assets/js/html5shiv.js"></script> <![endif]--> <!-- Fav and touch icons --> @@ -90,6 +90,7 @@ <h1>Sticky footer</h1> </div> <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> + <p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p> </div> <div id="push"></div> |