2011-10-27 08:11:56 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Bootstrap, from Twitter< / title >
2011-11-08 20:32:28 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2011-10-27 08:11:56 +02:00
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2012-01-23 23:14:16 +01:00
<!-- Le HTML5 shim, for IE6 - 8 support of HTML elements -->
2011-10-27 08:11:56 +02:00
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
<!-- Le styles -->
2012-01-27 07:05:45 +01:00
< link href = "assets/css/bootstrap.css" rel = "stylesheet" >
< link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
2011-10-27 08:11:56 +02:00
< link href = "assets/css/docs.css" rel = "stylesheet" >
< link href = "assets/js/google-code-prettify/prettify.css" rel = "stylesheet" >
<!-- Le fav and touch icons -->
2012-01-25 19:19:29 +01:00
< link rel = "shortcut icon" href = "assets/ico/favicon.ico" >
2012-01-27 00:54:04 +01:00
< link rel = "apple-touch-icon" href = "assets/ico/apple-touch-icon.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "assets/ico/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "assets/ico/apple-touch-icon-114x114.png" >
2011-10-27 08:11:56 +02:00
< / head >
2012-01-25 20:25:35 +01:00
< body data-spy = "scroll" data-target = ".subnav" data-offset = "50" >
2012-01-29 00:42:07 +01:00
2012-01-24 00:17:32 +01:00
<!-- Navbar
2011-10-27 08:11:56 +02:00
================================================== -->
2012-01-27 22:20:02 +01:00
< div class = "navbar navbar-fixed-top" >
2011-10-27 08:11:56 +02:00
< div class = "navbar-inner" >
< div class = "container" >
2012-01-29 00:42:07 +01:00
< a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
2012-01-29 00:09:23 +01:00
< span class = "i-bar" > < / span >
< span class = "i-bar" > < / span >
< span class = "i-bar" > < / span >
< / a >
2011-10-27 08:11:56 +02:00
< a class = "brand" href = "./index.html" > Bootstrap< / a >
2012-01-30 01:35:55 +01:00
< div class = "nav-collapse" >
2012-01-29 00:42:07 +01:00
< ul class = "nav" >
< li class = "" >
< a href = "./index.html" > Overview< / a >
< / li >
< li class = "active" >
< 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 >
< li class = "" >
< a href = "./download.html" > Customize< / a >
< / li >
2012-01-30 09:39:44 +01:00
< li class = "vertical-divider" > < / li >
< li class = "" >
< a href = "./examples.html" > Examples< / a >
< / li >
2012-01-29 00:42:07 +01:00
< / ul >
< / div >
2011-10-27 08:11:56 +02:00
< / div >
< / div >
< / div >
< div class = "container" >
<!-- Masthead
================================================== -->
< header class = "jumbotron subhead" id = "overview" >
< h1 > Scaffolding< / h1 >
2011-11-30 08:56:01 +01:00
< p class = "lead" > Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.< / p >
2012-01-25 04:19:50 +01:00
< div class = "subnav" >
< ul class = "nav pills" >
2012-01-25 10:22:29 +01:00
< li > < a href = "#grid-system" > Grid system< / a > < / li >
< li > < a href = "#layouts" > Layouts< / a > < / li >
< li > < a href = "#responsive" > Responsive design< / a > < / li >
2012-01-25 04:19:50 +01:00
< / ul >
< / div >
2011-10-27 08:11:56 +02:00
< / header >
2011-10-29 03:38:06 +02:00
2011-10-27 08:11:56 +02:00
<!-- Grid system
================================================== -->
< section id = "grid-system" >
< div class = "page-header" >
< h1 > Grid system < small > 12 columns with a responsive twist< / small > < / h1 >
< / div >
< h2 > Default 940px grid< / h2 >
< div class = "row show-grid" >
2011-12-22 03:42:43 +01:00
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
< div class = "span1" > 1< / div >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "row show-grid" >
2011-12-22 03:42:43 +01:00
< div class = "span4" > 4< / div >
< div class = "span4" > 4< / div >
< div class = "span4" > 4< / div >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "row show-grid" >
2011-12-22 03:42:43 +01:00
< div class = "span4" > 4< / div >
< div class = "span8" > 8< / div >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "row show-grid" >
2011-12-22 03:42:43 +01:00
< div class = "span6" > 6< / div >
< div class = "span6" > 6< / div >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "row show-grid" >
2011-12-22 03:42:43 +01:00
< div class = "span12" > 12< / div >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "row" >
< div class = "span4" >
< p > The default grid system provided as part of Bootstrap is a < strong > 940px-wide, 12-column grid< / strong > .< / p >
2012-01-29 23:07:14 +01:00
< p > It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "span4" >
< pre class = "prettyprint linenums" >
< div class="row">
< div class="span4"> ...< /div>
< div class="span8"> ...< /div>
< /div>
< / pre >
< / div >
< div class = "span4" >
< p > As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.< / p >
< / div >
< / div > <!-- /row -->
2012-01-27 22:20:02 +01:00
< br >
2011-10-27 08:11:56 +02:00
< h2 > Offsetting columns< / h2 >
< div class = "row show-grid" >
< div class = "span4" > 4< / div >
< div class = "span4 offset4" > 4 offset 4< / div >
< / div > <!-- /row -->
< div class = "row show-grid" >
< div class = "span3 offset3" > 3 offset 3< / div >
< div class = "span3 offset3" > 3 offset 3< / div >
< / div > <!-- /row -->
< div class = "row show-grid" >
< div class = "span8 offset4" > 8 offset 4< / div >
< / div > <!-- /row -->
2012-01-27 22:20:02 +01:00
< pre class = "prettyprint linenums" >
< div class="row">
< div class="span4"> ...< /div>
< div class="span4 offset4"> ...< /div>
< /div>
< / pre >
2011-10-27 08:11:56 +02:00
< br >
< h2 > Nesting columns< / h2 >
< div class = "row" >
< div class = "span6" >
< p > With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new < code > .row< / code > and set of < code > .span*< / code > columns within an existing < code > .span*< / code > column.< / p >
< h4 > Example< / h4 >
< div class = "row show-grid" >
< div class = "span6" >
Level 1 of column
< div class = "row show-grid" >
< div class = "span3" >
Level 2
< / div >
< div class = "span3" >
Level 2
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "span6" >
< pre class = "prettyprint linenums" >
< div class="row">
< div class="span12">
Level 1 of column
< div class="row">
< div class="span6"> Level 2< /div>
< div class="span6"> Level 2< /div>
< /div>
< /div>
< /div>
< / pre >
< / div >
< / div >
< h2 > Grid customization< / h2 >
2012-01-18 08:39:18 +01:00
< table class = "table table-bordered table-striped" >
2011-10-27 08:11:56 +02:00
< thead >
< tr >
< th > Variable< / th >
< th > Default value< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > @gridColumns< / code > < / td >
2011-11-30 07:35:03 +01:00
< td > 12< / td >
2011-12-11 11:05:50 +01:00
< td > Number of columns< / td >
2011-10-27 08:11:56 +02:00
< / tr >
< tr >
< td > < code > @gridColumnWidth< / code > < / td >
2011-11-30 07:35:03 +01:00
< td > 60px< / td >
2011-12-11 11:05:50 +01:00
< td > Width of each column< / td >
2011-10-27 08:11:56 +02:00
< / tr >
< tr >
< td > < code > @gridGutterWidth< / code > < / td >
< td > 20px< / td >
2011-12-11 11:05:50 +01:00
< td > Negative space between columns< / td >
2011-10-27 08:11:56 +02:00
< / tr >
< tr >
< td > < code > @siteWidth< / code > < / td >
< td > < em > Computed sum of all columns and gutters< / em > < / td >
2012-01-26 00:03:44 +01:00
< td > Counts number of columns and gutters to set width of the < code > .container-fixed()< / code > mixin< / td >
2011-10-27 08:11:56 +02:00
< / tr >
< / tbody >
< / table >
< div class = "row" >
< div class = "span4" >
< h3 > Variables in LESS< / h3 >
2012-01-11 00:58:44 +01:00
< p > Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "span4" >
< h3 > How to customize< / h3 >
2012-01-25 03:26:45 +01:00
< p > Modifying the grid means changing the three < code > @grid*< / code > variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the < a href = "#compiling" > four ways documented to recompile< / a > . If you're adding more columns, be sure to add the CSS for those in grid.less.< / p >
2011-10-27 08:11:56 +02:00
< / div >
< div class = "span4" >
< h3 > Staying responsive< / h3 >
< p > Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.< / p >
< / div >
< / div > <!-- /row -->
< / section >
<!-- Layouts (Default and fluid)
================================================== -->
< section id = "layouts" >
< div class = "page-header" >
< h1 > Layouts < small > Basic templates to create webpages< / small > < / h1 >
< / div >
< div class = "row" >
< div class = "span6" >
< h2 > Fixed layout< / h2 >
2011-10-31 04:14:27 +01:00
< p > The default and simple 940px-wide, centered layout for just about any website or page provided by a single < code > < div class="container"> < / code > .< / p >
2011-10-27 08:11:56 +02:00
< div class = "mini-layout" >
< div class = "mini-layout-body" > < / div >
< / div >
< pre class = "prettyprint linenums" >
< body>
< div class="container">
...
< /div>
< /body>
< / pre >
< / div > <!-- /col -->
< div class = "span6" >
< h2 > Fluid layout< / h2 >
2011-10-27 08:24:22 +02:00
< p > < code > < div class="fluid-container"> < / code > gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.< / p >
2011-10-27 08:11:56 +02:00
< div class = "mini-layout fluid" >
< div class = "mini-layout-sidebar" > < / div >
< div class = "mini-layout-body" > < / div >
< / div >
< pre class = "prettyprint linenums" >
< body>
2012-01-08 10:54:59 +01:00
< div class="fluid-container sidebar-left">
< div class="fluid-sidebar">
2011-10-27 08:11:56 +02:00
...
< /div>
2012-01-08 10:54:59 +01:00
< div class="fluid-content">
2011-10-27 08:11:56 +02:00
...
< /div>
< /div>
< /body>
< / pre >
< / div > <!-- /col -->
< / div > <!-- /row -->
< / section >
<!-- Responsive design
================================================== -->
< section id = "responsive" >
< div class = "page-header" >
< h1 > Responsive design < small > Media queries for various devices and resolutions< / small > < / h1 >
< / div >
<!-- Supported devices -->
< div class = "row" >
< div class = "span4" >
< img src = "assets/img/responsive-illustrations.png" alt = "Responsive devices" >
< / div >
< div class = "span8" >
< h2 > Supported devices< / h2 >
< p > Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:< / p >
2012-01-18 08:39:18 +01:00
< table class = "table table-bordered table-striped" >
2011-10-27 08:11:56 +02:00
< thead >
< tr >
< th > Label< / th >
< th > Layout width< / th >
< th > Column width< / th >
< th > Gutter width< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Smartphones< / td >
< td > 480px and below< / td >
< td class = "muted" colspan = "2" > Fluid columns, no fixed widths< / td >
< / tr >
< tr >
< td > Portrait tablets< / td >
< td > 480px to 768px< / td >
< td class = "muted" colspan = "2" > Fluid columns, no fixed widths< / td >
< / tr >
< tr >
< td > Landscape tablets< / td >
< td > 768px to 940px< / td >
< td > 44px< / td >
< td > 20px< / td >
< / tr >
< tr >
< td > Default< / td >
< td > 940px and up< / td >
< td > 60px< / td >
< td > 20px< / td >
< / tr >
< tr >
< td > Large display< / td >
< td > 1210px and up< / td >
< td > 70px< / td >
< td > 30px< / td >
< / tr >
< / tbody >
< / table >
< h3 > What they do< / h3 >
< p > Media queries allow for custom CSS based on a number of conditions— ratios, widths, display type, etc— but usually focuses around < code > min-width< / code > and < code > max-width< / code > .< / p >
< ul >
< li > Modify the width of column in our grid< / li >
< li > Stack elements instead of float wherever necessary< / li >
< li > Resize headings and text to be more appropriate for devices< / li >
< / ul >
< / div >
< / div >
< br >
<!-- Media query code -->
< h2 > Using the media queries< / h2 >
< div class = "row" >
< div class = "span5" >
< p > Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:< / p >
< ol >
2012-01-27 03:10:36 +01:00
< li > Use the compiled responsive version, bootstrap-responsive.css< / li >
2011-10-27 08:11:56 +02:00
< li > Add @import "responsive.less" and recompile Bootstrap< / li >
2012-01-25 18:57:40 +01:00
< li > Modify and recompile responsive.less as a separate< / li >
2011-10-27 08:11:56 +02:00
< / ol >
< p > < strong > Why not just include it?< / strong > Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.< / p >
< / div >
< div class = "span7" >
< pre class = "prettyprint linenums" >
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
2012-01-25 18:57:40 +01:00
@media (max-width: 768px) { ... }
2011-10-27 08:11:56 +02:00
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 940px) { ... }
// Large desktop
2012-01-29 05:34:07 +01:00
@media (min-width: 1200px) { .. }
2011-10-27 08:11:56 +02:00
< / pre >
< / div >
< / div >
< / section >
2012-01-26 19:00:09 +01:00
2012-01-27 06:48:46 +01:00
2012-01-24 00:17:32 +01:00
<!-- Footer
2011-10-27 08:11:56 +02:00
================================================== -->
< footer class = "footer" >
< p class = "pull-right" > < a href = "#" > Back to top< / a > < / p >
2011-12-11 11:03:16 +01: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 >
2011-10-27 08:11:56 +02:00
< / footer >
2012-01-23 23:14:16 +01:00
2011-10-27 08:11:56 +02:00
< / div > <!-- /container -->
2012-01-23 23:14:16 +01:00
2012-01-26 19:00:09 +01:00
<!-- Le javascript
================================================== -->
2011-10-27 08:11:56 +02:00
<!-- Placed at the end of the document so the pages load faster -->
2012-01-26 19:00:09 +01:00
< script type = "text/javascript" src = "http://platform.twitter.com/widgets.js" > < / script >
2012-01-23 23:14:16 +01:00
< script src = "../js/tests/vendor/jquery.js" > < / script >
2011-10-27 08:11:56 +02:00
< script src = "assets/js/google-code-prettify/prettify.js" > < / script >
2011-12-22 03:42:43 +01:00
< script src = "../js/bootstrap-transition.js" > < / script >
2012-01-23 23:14:16 +01:00
< script src = "../js/bootstrap-alert.js" > < / script >
< script src = "../js/bootstrap-modal.js" > < / script >
2012-01-13 18:55:15 +01:00
< script src = "../js/bootstrap-dropdown.js" > < / script >
2012-01-23 23:14:16 +01:00
< script src = "../js/bootstrap-scrollspy.js" > < / script >
< script src = "../js/bootstrap-tab.js" > < / script >
< script src = "../js/bootstrap-tooltip.js" > < / script >
< script src = "../js/bootstrap-popover.js" > < / script >
< script src = "../js/bootstrap-button.js" > < / script >
< script src = "../js/bootstrap-collapse.js" > < / script >
< script src = "../js/bootstrap-carousel.js" > < / script >
< script src = "../js/bootstrap-typeahead.js" > < / script >
2011-10-27 08:11:56 +02:00
< script src = "assets/js/application.js" > < / script >
< / body >
< / html >
