2011-04-28 04:53:51 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
2012-03-11 07:14:54 +08:00
< title > Twitter Bootstrap< / title >
2011-11-09 03:32:28 +08:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-08-21 09:58:12 +08:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2011-04-28 04:53:51 +08:00
2011-06-28 07:47:12 +08:00
<!-- Le styles -->
2012-01-27 14:05:45 +08:00
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
2011-08-20 05:23:41 +08:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
2011-08-21 09:58:12 +08:00
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
2011-04-28 04:53:51 +08:00
2012-02-13 03: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]-->
2011-08-21 09:58:12 +08:00
<!-- Le fav and touch icons -->
2012-01-26 02:19:29 +08:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-03-25 15:46:03 +08:00
< link rel = "apple-touch-icon-precomposed" sizes = "144x144" href = "assets/ico/apple-touch-icon-144-precomposed.png" >
2012-03-12 08:28:28 +08:00
< link rel = "apple-touch-icon-precomposed" sizes = "114x114" href = "assets/ico/apple-touch-icon-114-precomposed.png" >
2012-03-12 08:53:17 +08: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-27 07:35:28 +08:00
2011-04-28 04:53:51 +08:00
< / head >
2012-01-26 03:25:35 +08:00
< body data-spy = "scroll" data-target = ".subnav" data-offset = "50" >
2012-01-29 07:42:07 +08:00
2012-01-24 07:17:32 +08:00
<!-- Navbar
2011-08-21 14:38:00 +08:00
================================================== -->
2012-01-28 05:20:02 +08:00
< div class = "navbar navbar-fixed-top" >
2011-10-12 00:44:51 +08:00
< div class = "navbar-inner" >
2011-08-22 09:14:53 +08:00
< div class = "container" >
2012-05-25 12:30:43 +08:00
< button type = "button" class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
2012-01-31 16:11:19 +08:00
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
2012-05-25 12:30:43 +08:00
< / button >
2011-10-17 15:03:52 +08:00
< a class = "brand" href = "./index.html" > Bootstrap< / a >
2012-03-26 04:33:36 +08:00
< div class = "nav-collapse collapse" >
2012-01-29 07:42:07 +08:00
< ul class = "nav" >
< li class = "active" >
< a href = "./index.html" > Overview< / a >
< / li >
< 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 = "" >
< a href = "./javascript.html" > Javascript plugins< / a >
< / li >
< li class = "" >
< a href = "./less.html" > Using LESS< / a >
< / li >
2012-01-30 17:09:34 +08:00
< li class = "divider-vertical" > < / li >
2012-01-29 07:42:07 +08:00
< li class = "" >
< a href = "./download.html" > Customize< / a >
< / li >
2012-01-30 16:39:44 +08:00
< li class = "" >
< a href = "./examples.html" > Examples< / a >
< / li >
2012-01-29 07:42:07 +08:00
< / ul >
< / div >
2011-08-22 09:14:53 +08:00
< / div >
2011-04-28 04:53:51 +08:00
< / div >
< / div >
2012-06-06 08:16:17 +08:00
< div class = "bs-docs-container" >
2011-10-27 14:11:56 +08:00
2012-01-31 12:50:51 +08:00
<!-- Masthead
================================================== -->
< header class = "jumbotron masthead" >
< div class = "inner" >
2012-06-05 14:31:26 +08:00
< h1 > Twitter Bootstrap< / h1 >
2012-01-31 12:50:51 +08:00
< p > Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.< / p >
< p class = "download-info" >
2012-05-27 14:17:23 +08:00
< a href = "https://github.com/twitter/bootstrap/" class = "btn btn-primary btn-large" > View project on GitHub< / a >
2012-06-03 13:12:45 +08:00
< a href = "assets/bootstrap.zip" class = "btn btn-large" > Download Bootstrap < small > (v2.1.0)< / small > < / a >
2012-01-31 12:50:51 +08:00
< / p >
< / div >
2012-03-12 14:33:08 +08:00
< div class = "bs-links" >
< ul class = "quick-links" >
< li > < a href = "./upgrading.html" > Upgrading from 1.4< / a > < / li >
< li > < a href = "https://github.com/twitter/bootstrap/zipball/master" > Download with docs< / a > < / li >
2012-03-23 16:13:20 +08:00
< li > < a href = "http://blog.getbootstrap.com" > Read the blog< / a > < / li >
2012-03-12 14:33:52 +08:00
< li > < a href = "https://github.com/twitter/bootstrap/issues?state=open" > Submit issues< / a > < / li >
2012-03-12 14:33:08 +08:00
< li > < a href = "https://github.com/twitter/bootstrap/wiki" > Roadmap and changelog< / a > < / li >
< / ul >
< ul class = "quick-links" >
< li >
< iframe class = "github-btn" src = "http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency = "true" frameborder = "0" scrolling = "0" width = "112px" height = "20px" > < / iframe >
< / li >
< li >
< iframe class = "github-btn" src = "http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency = "true" frameborder = "0" scrolling = "0" width = "98px" height = "20px" > < / iframe >
< / li >
< li class = "follow-btn" >
< a href = "https://twitter.com/twbootstrap" class = "twitter-follow-button" data-link-color = "#0069D6" data-show-count = "true" > Follow @twbootstrap< / a >
< / li >
< li class = "tweet-btn" >
< a href = "https://twitter.com/share" class = "twitter-share-button" data-url = "http://twitter.github.com/bootstrap/" data-count = "horizontal" data-via = "twbootstrap" data-related = "mdo:Creator of Twitter Bootstrap" > Tweet< / a >
< / li >
< / ul >
< / div >
2012-01-31 12:50:51 +08:00
< / header >
< hr class = "soften" >
< div class = "marketing" >
< h1 > Designed for everyone, everywhere.< / h1 >
< p class = "marketing-byline" > Need reasons to love Bootstrap? Look no further.< / p >
< div class = "row" >
< div class = "span4" >
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_042_group.png" >
< h2 > Built for and by nerds< / h2 >
2012-06-05 14:31:26 +08:00
< p > We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.< / p >
2012-01-31 12:50:51 +08:00
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_163_iphone.png" >
< h2 > Cross-everything< / h2 >
< p > Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.< / p >
2012-06-05 14:31:26 +08:00
2012-01-31 12:50:51 +08:00
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_155_show_thumbnails.png" >
< h2 > 12-column grid< / h2 >
< p > Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.< / p >
2012-06-05 14:31:26 +08:00
2012-01-31 12:50:51 +08:00
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_214_resize_small.png" >
< h2 > Responsive design< / h2 >
2012-06-05 14:31:26 +08:00
< p > As of Bootstrap 2, our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.< / p >
2012-01-31 12:50:51 +08:00
< / div >
< div class = "span4" >
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_266_book_open.png" >
< h2 > Styleguide docs< / h2 >
< p > Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.< / p >
2012-06-05 14:31:26 +08:00
2012-01-31 12:50:51 +08:00
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_082_roundabout.png" >
< h2 > Growing library< / h2 >
< p > Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.< / p >
2012-06-05 14:31:26 +08:00
2012-01-31 12:50:51 +08:00
< img class = "bs-icon" src = "assets/img/glyphicons/glyphicons_009_magic.png" >
< h2 > Custom jQuery plugins< / h2 >
2012-06-05 14:31:26 +08:00
< p > Easy-to-use, proper, and extensible interactions for many common components with custom-built jQuery plugins to bring your projects to life.< / p >
2012-01-31 12:50:51 +08:00
< img class = "bs-icon" src = "assets/img/less-small.png" >
< h2 > Built on LESS< / h2 >
< p > Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.< / p >
< / div >
< / div > <!-- /row -->
< hr class = "soften" >
< h1 > Built with Bootstrap.< / h1 >
< p class = "marketing-byline" > For even more sites built with Bootstrap, < a href = "http://builtwithbootstrap.tumblr.com/" target = "_blank" > visit the unofficial Tumblr< / a > or < a href = "./examples.html" > browse the examples< / a > .< / p >
< ul class = "thumbnails example-sites" >
2012-06-05 14:31:26 +08:00
< li class = "span2" >
2012-03-11 07:37:28 +08:00
< a class = "thumbnail" href = "http://soundready.fm/" target = "_blank" >
< img src = "assets/img/example-sites/soundready.png" alt = "SoundReady.fm" >
< / a >
< / li >
2012-06-05 14:31:26 +08:00
< li class = "span2" >
2012-01-31 12:50:51 +08:00
< a class = "thumbnail" href = "http://kippt.com/" target = "_blank" >
< img src = "assets/img/example-sites/kippt.png" alt = "Kippt" >
< / a >
< / li >
2012-06-05 14:31:26 +08:00
< li class = "span2" >
2012-01-31 12:50:51 +08:00
< a class = "thumbnail" href = "http://www.fleetio.com/" target = "_blank" >
< img src = "assets/img/example-sites/fleetio.png" alt = "Fleetio" >
< / a >
< / li >
2012-06-05 14:31:26 +08:00
< li class = "span2" >
2012-01-31 12:50:51 +08:00
< a class = "thumbnail" href = "http://www.jshint.com/" target = "_blank" >
< img src = "assets/img/example-sites/jshint.png" alt = "JS Hint" >
< / a >
< / li >
< / ul >
< / div > <!-- /.marketing -->
2012-01-27 02:00:09 +08:00
2012-01-24 07:17:32 +08:00
<!-- Footer
2011-10-27 14:11:56 +08:00
================================================== -->
2011-10-17 09:45:11 +08:00
< footer class = "footer" >
2011-10-28 14:00:09 +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-06-06 08:16:17 +08:00
< p > < a href = "#" > Back to top< / a > < / p >
2011-10-17 09:45:11 +08:00
< / footer >
2012-01-24 06:14:16 +08:00
2011-10-16 18:00:58 +08:00
< / div > <!-- /container -->
2012-01-24 06:14:16 +08:00
2012-01-27 02:00:09 +08:00
<!-- Le javascript
================================================== -->
2011-10-27 14:11:56 +08:00
<!-- Placed at the end of the document so the pages load faster -->
2012-01-27 02:00:09 +08:00
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-02-01 05:58:28 +08:00
< script src = "assets/js/jquery.js" > < / script >
2012-01-24 06:14:16 +08:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
2012-02-01 05: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-24 06:14:16 +08:00
< script src = "assets/js/application.js" > < / script >
2012-02-02 08:38:58 +08:00
2011-04-28 04:53:51 +08:00
< / body >
2011-08-26 15:00:05 +08:00
< / html >
