2012-01-25 10:47:08 -08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-03-10 15:14:54 -08:00
< title > Examples · Twitter Bootstrap< / title >
2012-01-25 10:47:08 -08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
<!-- Le styles -->
2012-01-26 22:05:45 -08:00
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
2012-01-25 10:47:08 -08:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
2012-02-12 11:08:58 -08:00
<!-- Le HTML5 shim, for IE6 - 8 support of HTML5 elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
2012-01-25 10:47:08 -08:00
<!-- Le fav and touch icons -->
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-03-25 00:46:03 -07:00
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "assets/ico/apple-touch-icon-144-precomposed.png" >
2012-03-11 17:28:28 -07:00
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "assets/ico/apple-touch-icon-114-precomposed.png" >
2012-03-11 17:53:17 -07:00
< 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" >
2012-05-26 16:35:28 -07:00
2012-01-25 10:47:08 -08:00
< / head >
2012-07-08 01:47:36 -07:00
< body data-spy = "scroll" data-target = ".bs-docs-sidebar" data-offset = "10" >
2012-06-06 00:48:31 -07:00
2012-06-07 21:48:03 -07:00
<!-- Navbar
================================================== -->
< div class = "navbar navbar-fixed-top" >
< div class = "navbar-inner" >
2012-07-07 23:16:07 -07:00
< div class = "container" >
2012-06-12 12:17:10 +07:00
< button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
2012-06-07 21:48:03 -07:00
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "brand" href = "./index.html" > Bootstrap< / a >
< div class = "nav-collapse collapse" >
< ul class = "nav" >
< li class = "" >
2012-06-07 22:10:36 -07:00
< a href = "./index.html" > Home< / a >
2012-06-07 21:48:03 -07:00
< / li >
2012-07-12 21:38:18 -07:00
< li class = "" >
< a href = "./getting-started.html" > Get started< / a >
< / li >
2012-06-07 21:48:03 -07:00
< li class = "" >
< a href = "./scaffolding.html" > Scaffolding< / a >
< / li >
< li class = "" >
< a href = "./base-css.html" > Base CSS< / a >
< / li >
< li class = "" >
< a href = "./components.html" > Components< / a >
< / li >
< li class = "" >
2012-06-07 22:10:36 -07:00
< a href = "./javascript.html" > Javascript< / a >
2012-06-07 21:48:03 -07:00
< / li >
2012-06-27 23:56:00 -07:00
< li class = "" >
< a href = "./extend.html" > Extend< / a >
< / li >
2012-06-07 21:48:03 -07:00
< / ul >
< / div >
< / div >
< / div >
< / div >
2012-01-25 10:47:08 -08:00
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
< h1 > Bootstrap examples< / h1 >
2012-01-31 14:29:44 -08:00
< p class = "lead" > We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.< / p >
2012-01-25 10:47:08 -08:00
< / header >
2012-01-29 02:27:45 -08:00
< ul class = "thumbnails bootstrap-examples" >
2012-06-11 22:33:16 -07:00
< li class = "span3" >
2012-01-31 17:35:23 -08:00
< a class = "thumbnail" href = "examples/hero.html" >
2012-01-31 14:29:44 -08:00
< img src = "assets/img/examples/bootstrap-example-hero.jpg" alt = "" >
2012-01-29 02:27:45 -08:00
< / a >
< h3 > Basic marketing site< / h3 >
2012-01-31 14:29:44 -08:00
< p > Featuring a hero unit for a primary message and three supporting elements.< / p >
2012-01-29 02:27:45 -08:00
< / li >
2012-06-11 22:33:16 -07:00
< li class = "span3" >
2012-01-31 17:35:23 -08:00
< a class = "thumbnail" href = "examples/fluid.html" >
2012-01-31 14:29:44 -08:00
< img src = "assets/img/examples/bootstrap-example-fluid.jpg" alt = "" >
2012-01-29 02:27:45 -08:00
< / a >
< h3 > Fluid layout< / h3 >
2012-03-08 11:09:33 -08:00
< p > Uses our new responsive, fluid grid system to create a seamless liquid layout.< / p >
2012-01-29 02:27:45 -08:00
< / li >
2012-06-11 22:33:16 -07:00
< li class = "span3" >
2012-01-31 17:35:23 -08:00
< a class = "thumbnail" href = "examples/starter-template.html" >
2012-01-31 14:29:44 -08:00
< img src = "assets/img/examples/bootstrap-example-starter.jpg" alt = "" >
2012-01-29 02:27:45 -08:00
< / a >
2012-01-31 14:29:44 -08:00
< h3 > Starter template< / h3 >
< p > A barebones HTML document with all the Bootstrap CSS and javascript included.< / p >
2012-01-29 02:27:45 -08:00
< / li >
< / ul >
2012-01-25 10:47:08 -08:00
2012-01-26 10:00:09 -08:00
2012-07-12 17:02:55 -07:00
<!-- Footer
================================================== -->
< footer class = "footer" >
< div class = "container" >
2012-06-07 10:20:52 -07:00
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
2012-01-25 10:47:08 -08:00
< p > Designed and built with all the love in the world < a href = "http://twitter.com/twitter" target = "_blank" > @twitter< / a > by < a href = "http://twitter.com/mdo" target = "_blank" > @mdo< / a > and < a href = "http://twitter.com/fat" target = "_blank" > @fat< / a > .< / p >
< p > Code licensed under the < a href = "http://www.apache.org/licenses/LICENSE-2.0" target = "_blank" > Apache License v2.0< / a > . Documentation licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
< p > Icons from < a href = "http://glyphicons.com" > Glyphicons Free< / a > , licensed under < a href = "http://creativecommons.org/licenses/by/3.0/" > CC BY 3.0< / a > .< / p >
2012-07-07 23:16:07 -07:00
< ul class = "footer-links" >
< li > < a href = "http://blog.getbootstrap.com" > Read the blog< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/issues?state=open" > Submit issues< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/wiki" > Roadmap and changelog< / a > < / li >
< / ul >
2012-07-12 17:02:55 -07:00
< / div >
< / footer >
2012-01-25 10:47:08 -08:00
2012-01-26 10:00:09 -08:00
<!-- Le javascript
================================================== -->
2012-01-25 10:47:08 -08:00
<!-- Placed at the end of the document so the pages load faster -->
2012-01-26 10:00:09 -08:00
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-01-31 13:58:28 -08:00
< script src = "assets/js/jquery.js" > < / script >
2012-01-25 10:47:08 -08:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
2012-01-31 13:58:28 -08:00
< 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 >
2012-01-25 10:47:08 -08:00
< script src = "assets/js/application.js" > < / script >
2012-02-01 16:38:58 -08:00
2012-01-25 10:47:08 -08:00
< / body >
< / html >