Bootstrap grid system
Brief introduction
In this tutorial, you will learn how to create Bootstrap grid system (Grid System).
As you may know, in the graphic design, the grid system is a two-dimensional structure, by the horizontal and vertical axes intersect regional components for building content. It is widely applied to the design layout and content structure of graphic design. In web design, it is a fast and efficient way to create a consistent layout very effective way by using HTML and CSS. Thus, the grid system has become an important component / module frame or web design workflow.
Simply put, web design, we use HTML and CSS to create rows and columns to achieve a grid. And the column contains the actual content.
From version 2.3.2 onwards, Bootstrap offers two types of mesh. The default grid system is 940px wide and 12. You can add Responsive stylesheet as it presented the viewport to adjust the width of 724px and 1170px.
There is also a flow grid system, which is based on a percentage, rather than pixel-based. And it may be extended to the same as the default fixed grid responsive. In this tutorial we will discuss the default grid through some examples, flow grid system will be explained in a separate tutorial.
Please download the latest version of Bootstrap files from "http://twitter.github.io/bootstrap/assets/bootstrap.zip" on. You can in our introductory tutorial to understand the relevant file structure.
Getting from the default grid
Let's start with a basic HTML begin to see how the above application default grid.
<! DOCTYPE html>
<Html>
<Head>
<Title> using Bootstrap fixed layout examples </ title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<-! Bootstrap ->
<Link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
</ Head>
<Body>
</ Body>
</ Html>
Bootstrap using the CSS class "row" to create horizontal lines of CSS class "spanx" (the value of x is from 1 to 12) to create a vertical column. Through these two can create a three-column grid (each column contains some text), HTML as follows
<! DOCTYPE html> <Html> <Head> <Title> using Bootstrap fixed layout examples </ title> <Meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <-! Bootstrap -> <Link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen"> <Script src = "http://code.jquery.com/jquery.js"> </ script> <Script src = "bootstrap / js / bootstrap.min.js"> </ script> </ Head> <Body> <Div class = "container"> <Div class = "row"> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> <Div class = "span4"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. < / p> </ div> </ Div> </ Div> </ Body> </ Html>
Below is a graphical representation of the grid system
In this way, we can by using the "span4" class for each column, created a three-column grid. "Container" class is used to hold the entire structure. Here you can view the online instance . From this, we can deduce the given CSS class used to create the column number of the general syntax.
Create grid general syntax:
<Div class = & quot; row & quot;> <Div class = & quot; spanx & quot;> inline elements like span, block level elements like p, div. </ Div> repeat <div class = & quot; spanx & quot;> y times.
Where y is the number of columns you want to create, and x is equal to 12 (which is the maximum number of columns that you can create) combined. x must be a positive integer, and the value must be from 1-12.
For example, if you have three equal-width columns, each column is a class = "span4", but if you want the first column larger than the other two, the first column can use class = "span6" The other two columns using class = "span3".
How to create a row in a fixed grid
Then, before we move on to other examples, let's take a look at a fixed grid to create rows and columns of CSS rules.
row class as follows
.row {
margin-left: -20px;
* Zoom: 1;
}
Setting the left margin to a negative 20px, and set "* zoom: 1;". Here, "*" indicates the zoom attribute all the elements are set to 1, to fix IE6 / 7 of the bug. Set the zoom property to 1, which set up an internal property called hasLayout for repair IE6 / 7 Many zoom / rendering issues.
.row: before,
.row: after {
display: table;
line-height: 0;
content: "";
}
Bootstrap using the previous CSS code to create the line. It uses ": before" and ": after" CSS property. These two pseudo-elements. ": Before" is used before the target element into something, ": after" is used to insert some content after the target element. "Display: table;" so that the elements presented in tabular form. By setting the "line-height: 0;" to ensure that each row do not own the row height by using the 'content: ""' to ensure that the content is not inserted into the front and rear elements.
Then use the following rules to ensure to the left and right sides of a given element is not floating element.
.row: after {
clear: both;
}
How to create a column in a fixed grid
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
This is a CSS rule to use. '[Class * = "span"]' select the class attribute values for all elements in the 'span' began. Now use "float: left;" to locate each column adjacent to each other. Use "min-height: 1px" to make all the columns have a minimum height of 1px, use the "margin-left: 20px;" set the left margin to 20px.
Use a separate CSS rule to set the column width. Specifically as shown in the table below
| CSS 代码 | 解释 |
|---|---|
.span12 {
width: 940px;
}
|
如果该行有一个单一的列，列宽为 940px。 |
.span11 {
width: 860px;
}
|
如果该行有一个由 11 列合并的列，列宽为 860px。 |
.span10 {
width: 780px;
}
|
如果该行有一个由 10 列合并的列，列宽为 780px。 |
.span9 {
width: 700px;
}
|
如果该行有一个由 9 列合并的列，列宽为 700px。 |
.span8 {
width: 620px;
}
|
如果该行有一个由 8 列合并的列，列宽为 620px。 |
.span7 {
width: 540px;
}
|
如果该行有一个由 7 列合并的列，列宽为 540px。 |
.span6 {
width: 460px;
}
|
如果该行有一个由 6 列合并的列，列宽为 460px。 |
.span5 {
width: 380px;
}
|
如果该行有一个由 5 列合并的列，列宽为 380px。 |
.span4 {
width: 300px;
}
|
如果该行有一个由 4 列合并的列，列宽为 300px。 |
.span3 {
width: 220px;
}
|
如果该行有一个由 3 列合并的列，列宽为 220px。 |
.span2 {
width: 140px;
}
|
如果该行有一个由 2 列合并的列，列宽为 140px。 |
.span1 {
width: 60px;
}
|
单个列宽为 60px。 |
Bootstrap default grid instance
This example demonstrates how to create a column, two columns, six columns, 12 columns and four columns (in that order).
Also note that all columns that are created are surrounded by "container" class, "container" is to create a fixed layout using Bootstrap.
Examples
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> Bootstrap grid system example - w3cschool Bootstrap Tutorial </ title>
<Meta name = "description" content = "Creating a 16 columns Grid with Bootstrap. Learn with examples to create a Grid System in Bootstrap.">
<Link href = "bootstrap / css / bootstrap.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://code.jquery.com/jquery.js"> </ script>
<Script src = "bootstrap / js / bootstrap.min.js"> </ script>
<Style>
.span12 h1 {color: # FE6E4C; font-weight: bold; padding: 5px;}
h3 {margin: 10px 0 10px 0;}
</ Style>
</ Head>
<Body>
<Div class = "container">
<Div class = "row">
<Div class = "span12">
<H1> w3cschool.cc is a web design and development tutorial. </ H1>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span12">
<P> w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content. With 3000+ unique content pages and thousands of examples, we are comprehensive. We have online practice editors to play around with the example codes. </ p>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span12">
<H3> Some of the topics and more ...: </ h3>
</ Div>
<Div class = "span2">
<P> <img src = "images / html5_logo.png" width = "140" height = "86" alt = "html5 logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / javascript-logo.png" width = "140" height = "86" alt = "javascript logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / json.gif" width = "140" height = "86" alt = "JSON logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / php.png" width = "140" height = "86" alt = "PHP logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / mysql-logo.png" width = "140" height = "86" alt = "MySQL logo" /> </ p>
</ Div>
<Div class = "span2">
<P> <img src = "images / browser-statistics.png" width = "140" height = "86" alt = "Browser Statistics logo" /> </ p>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span12">
<H3> Social networking sites to share: </ h3>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span1">
<P> <img src = "images / gplus.png" width = "50" height = "49" alt = "GPlus logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / twitter.png" width = "50" height = "38" alt = "Twitter logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / orkut.png" width = "50" height = "55" alt = "Orkut logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / ipad.png" width = "50" height = "53" alt = "iPad logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / digo.png" width = "50" height = "54" alt = "Digo logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / zapface.png" width = "51" height = "53" alt = "Zapface logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / facebook.png" width = "48" height = "53" alt = "facebook logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / netvibes.png" width = "51" height = "53" alt = "Netvibes logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / linkedin.png" width = "49" height = "54" alt = "LinkedIn logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / newsvine.png" width = "48" height = "53" alt = "Newsvine logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / blogger.png" width = "51" height = "53" alt = "Blogger logo" /> </ p>
</ Div>
<Div class = "span1">
<P> <img src = "images / reditt.png" width = "48" height = "57" alt = "Reddit logo" /> </ p>
</ Div>
</ Div>
<Div class = "row">
<Div class = "span3">
<H3> Fontend Development: </ h3>
<P> HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript </ p>
</ Div>
<Div class = "span3">
<H3> Backend Developemt: </ h3>
<P> PHP, Ruby, Python, Java, ASP.NET, SCALA </ p>
</ Div>
<Div class = "span3">
<H3> Database Management: </ h3>
<P> SQL, MySQL POstgreSQL, NoSQL, MongoDB </ p>
</ Div>
<Div class = "span3">
<H3> APIs, Tools and Tips: </ h3>
<P> Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG </ p>
</ Div>
</ Div>
</ Div>
</ Body>
</ Html>
Here is what you will create
View Online
See example above in a different browser window.
Please click here to download all of the above examples of HTML, CSS, JS and image files.
Add responsive to the default grid
If you want to add to the default grid Bootstrap response performance, only after the native CSS HTML file to add
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
To view the default grid with responsive, click here to view the online demo . Click here to download the code .
Default grid system plays the response there are two conditions. When the viewport (mesh rendering of free space) is greater than 1200px [via @media (min-width: 1200px) obtained] when the viewport is larger than 768px but less than 979px [via @media (min-width: 768px) and ( max-width: 979px) settings].
Offset columns: default grid
By using the offset, you can move the right side of the column to its original position. This is done by adding a column to the left margin to achieve. By Bootstrap, you can use the "offsetx" (where the value of x is a positive integer) class and class "spany" (where the value of y is a positive integer). Depends 'offestx' 'x' is the value of the associated mobile column 'x' column width to the right.
The width of the offset is defined in the Bootstrap CSS. Offset12 top left margin is 980px, the minimum distance is left offset1 100px.
Since the default grid system is based on the pixel, when the application is shifted, you must know that you want to use an offset pixel and pixel columns to be used. Both the number of pixels added together must not exceed your level viewport.
In the following example, we will create a two-column grid. Among them, we move to the right so that the left column four columns. HTML code as follows:
Examples
<Div class = "row">
<Div class = "span4 offset4">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus . Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
<Div class = "span3">
<P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus . Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros. </ p>
</ Div>
</ Div>
</ Div>
Click here to view the online demo Click here to download the code .
You can add in the original CSS responsive CSS, you can also be offset by the use of a column to add to the default response grid.
Nested columns: default grid
Bootstrap using the default grid, the column can be nested. You simply need to create a row in the column, and the number of columns you want to create nested row. At the same time, you must remember that the total number of columns for nested column other columns, to ensure that no more than the number of columns when you create a parent column mentioned.
The following example demonstrates how to nest in the default columns in the grid Bootstrap.
Examples
<Div class = "row">
<Div class = "span7">
<Div class = "row">
<Div class = "span4">
<P> Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
<Div class = "span3">
<P> Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
<Div class = "span5">
<P> Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede. </ p>
</ Div>
</ Div>
</ Div>
Click here to view the online demo Click here to download the code .
In the example above, the line in the container has two columns were defined as 'class = "span7"' and 'class = "span5"'. Making a total of 12 columns. Now, we add a row in the left column, then create two columns, which are defined as 'class = "span4"' and 'class = "span3"'. Therefore, the total number of columns in which to comply with its provisions parent column (3 + 4 = 7).
You can also add here the response performance.
in conclusion
In this tutorial, we have discussed the default Bootstrap grid system. This tutorial is based on Bootstrap V2.3.2. The following is a summary of the main points related to this tutorial:
- Bootstrap grid system default is 940px wide, and with 12 columns.
- In the grid, row by 'class = "row"' Create a column by 'class = "spanx"' Create, where x is a positive integer. X sum of all columns must not exceed 12.
- By adding the Bootstrap Responsive CSS, you can add a response to the default grid.
- Use Offset to create additional space to the columns. By using the 'class = "offsetx"', wherein x is a positive integer. If you use an offset, total number of columns, the number includes an offset for use not more than 11.
- Columns can be nested. If you use a nested column, when the total number of computational grid (container line) in a column, nested column should be included.
- You can also use nested column offset.