Grid system 12 columns with a responsive twist
+{{_i}}Grid system 12 columns with a responsive twist{{/i}}
Default 940px grid
@@ -53,8 +53,8 @@The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.
-It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.
+{{_i}}The default grid system provided as part of Bootstrap is a 940px-wide, 12-column grid.{{/i}}
+{{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}
@@ -65,7 +65,7 @@
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.
+{{_i}}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.{{/i}}
-
Nesting columns
+{{_i}}Nesting columns{{/i}}
With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.
Example
+{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}
{{_i}}Example{{/i}}
<div class="row">
<div class="span12">
- Level 1 of column
+ {{_i}}Level 1 of column{{/i}}
<div class="row">
- <div class="span6">Level 2</div>
- <div class="span6">Level 2</div>
+ <div class="span6">{{_i}}Level 2{{/i}}</div>
+ <div class="span6">{{_i}}Level 2{{/i}}</div>
</div>
</div>
</div>
@@ -118,50 +118,50 @@
Grid customization
+{{_i}}Grid customization{{/i}}
| Variable | -Default value | -Description | +{{_i}}Variable{{/i}} | +{{_i}}Default value{{/i}} | +{{_i}}Description{{/i}} |
|---|---|---|---|---|---|
@gridColumns |
12 | -Number of columns | +{{_i}}Number of columns{{/i}} | ||
@gridColumnWidth |
60px | -Width of each column | +{{_i}}Width of each column{{/i}} | ||
@gridGutterWidth |
20px | -Negative space between columns | +{{_i}}Negative space between columns{{/i}} | ||
@siteWidth |
- Computed sum of all columns and gutters | -Counts number of columns and gutters to set width of the .fixed-container() mixin |
+ {{_i}}Computed sum of all columns and gutters{{/i}} | +{{_i}}Counts number of columns and gutters to set width of the .fixed-container() mixin{{/i}} |
Variables in LESS
-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.
+{{_i}}Variables in LESS{{/i}}
+{{_i}}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.{{/i}}
How to customize
-Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.
{{_i}}How to customize{{/i}}
+{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the four ways documented to recompile.{{/i}}
Staying responsive
-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.
+{{_i}}Staying responsive{{/i}}
+{{_i}}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.{{/i}}
Layouts Basic templates to create webpages
+{{_i}}Layouts Basic templates to create webpages{{/i}}
Fixed layout
-The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.
{{_i}}Fixed layout{{/i}}
+{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}
Fluid layout
-<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.
{{_i}}Fluid layout{{/i}}
+{{_i}}<div class="fluid-container"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
Responsive design Media queries for various devices and resolutions
+{{_i}}Responsive design Media queries for various devices and resolutions{{/i}}
Supported devices
-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:
+{{_i}}Supported devices{{/i}}
+{{_i}}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:{{/i}}
| Label | -Layout width | -Column width | -Gutter width | +{{_i}}Label{{/i}} | +{{_i}}Layout width{{/i}} | +{{_i}}Column width{{/i}} | +{{_i}}Gutter width{{/i}} |
|---|---|---|---|---|---|---|---|
| Smartphones | +{{_i}}Smartphones{{/i}} | 480px and below | -Fluid columns, no fixed widths | +{{_i}}Fluid columns, no fixed widths{{/i}} | |||
| Portrait tablets | +{{_i}}Portrait tablets{{/i}} | 480px to 768px | -Fluid columns, no fixed widths | +{{_i}}Fluid columns, no fixed widths{{/i}} | |||
| Landscape tablets | +{{_i}}Landscape tablets{{/i}} | 768px to 940px | 44px | 20px | |||
| Default | +{{_i}}Default{{/i}} | 940px and up | 60px | 20px | |||
| Large display | +{{_i}}Large display{{/i}} | 1210px and up | 70px | 30px | @@ -272,12 +272,12 @@|||
What they do
-Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
{{_i}}What they do{{/i}}
+{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}
-
-
- Modify the width of column in our grid -
- Stack elements instead of float wherever necessary -
- Resize headings and text to be more appropriate for devices +
- {{_i}}Modify the width of column in our grid{{/i}} +
- {{_i}}Stack elements instead of float wherever necessary{{/i}} +
- {{_i}}Resize headings and text to be more appropriate for devices{{/i}}
-
Using the media queries
+{{_i}}Using the media queries{{/i}}
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:
+{{_i}}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:{{/i}}
-
-
- Use the compiled responsive version, bootstrap.reponsive.css -
- Add @import "responsive.less" and recompile Bootstrap -
- Compile responsive.less as a separate file and include that +
- {{_i}}Use the compiled responsive version, bootstrap.reponsive.css{{/i}} +
- {{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}} +
- {{_i}}Compile responsive.less as a separate file and include that{{/i}}
Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.
+{{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}
- // Landscape phones and down
+ // {{_i}}Landscape phones and down{{/i}}
@media (max-width: 480px) { ... }
- // Landscape phone to portrait tablet
+ // {{_i}}Landscape phone to portrait tablet{{/i}}
@media (min-width: 480px) and (max-width: 768px) { ... }
- // Portrait tablet to landscape and desktop
+ // {{_i}}Portrait tablet to landscape and desktop{{/i}}
@media (min-width: 768px) and (max-width: 940px) { ... }
- // Large desktop
+ // {{_i}}Large desktop{{/i}}
@media (min-width: 1210px) { .. }