Home >Web Front-end >HTML Tutorial >Bootstrap grid system_html/css_WEB-ITnose
Bootstrap grid system_html/css_WEB-ITnose
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
- 2016-06-24 12:05:191146browse
As of version 2.3.2, Bootstrap provides two types of grids, the default grid system and the fluid grid system. The default grid system is 940px wide and 12 columns. This article mainly explains the first type.
- First let’s see how to apply the default grid system
<!DOCTYPE html><html> <head> <title>Fixed layout example with Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
Bootstrap uses CSS classes "row" to create horizontal rows, and the CSS class "spanx" (x values from 1 to 12) to create vertical columns. Using these two, you can create a three-column grid (each column contains some text content), and the HTML looks like this
<!DOCTYPE html><html> <head> <title>Fixed layout example with Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </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> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
The syntax for creating a grid is as follows:
<div class="row"><div class="spanx">inline elements like span, block level elements like p, div.</div> <div>
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 Example
<!DOCTYPE html> <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="booststrap/css/bootstrap.min.css" rel="stylesheet"> <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="/static/imghwm/default1.png" data-src="images/html5_logo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="html5 logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/javascript-logo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="javascript logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/json.gif" class="lazy" style="max-width:90%" style="max-width:90%" alt="JSON logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/php.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="PHP logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/mysql-logo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="MySQL logo" /></p> </div><div class="span2"><p><img src="/static/imghwm/default1.png" data-src="images/browser-statistics.png" class="lazy" style="max-width:90%" style="max-width:90%" 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="/static/imghwm/default1.png" data-src="images/gplus.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="GPlus logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/twitter.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Twitter logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/orkut.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Orkut logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/ipad.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="iPad logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/digo.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Digo logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/zapface.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Zapface logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/facebook.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="facebook logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/netvibes.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Netvibes logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/linkedin.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="LinkedIn logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/newsvine.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Newsvine logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/blogger.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="Blogger logo" /></p> </div><div class="span1"><p><img src="/static/imghwm/default1.png" data-src="images/reditt.png" class="lazy" style="max-width:90%" style="max-width:90%" 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> The effect is as follows:
Offset column: Default grid
By using offsets, you can move a column to the right of its original position. This is accomplished by adding a left margin to the column. With Bootstrap, you can use the "offsetx" (where the value of x is a positive integer) class and the class "spany" (where the value of y is a positive integer). Depending on the value of 'x' in 'offestx', the relevant column is shifted to the right by 'x' column widths.
The offset width is defined in Bootstrap CSS. The highest left margin of offset12 is 980px, and the lowest left margin of offset1 is 100px.
Since the default grid system is pixel based, when applying an offset you must know which pixels you want to use for the offset and which pixels you want to use for the columns. These two combined must not exceed the number of pixels in your horizontal viewport.
In the example below, we will create a two-column grid. In it, we move the left column 4 columns to the right. The HTML code is as follows:
<!DOCTYPE html><html> <head> <title>Bootstrap offsetting column example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <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> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
The rendering is as follows:
Nested columns: Default grid
Using Bootstrap's default grid, columns can be nested. You simply create a row within the columns and create as many columns as you want nested within the row. At the same time, you must remember that the total number of columns used to nest other columns must not exceed the number of columns mentioned when you created the parent column.
The following example shows how to nest columns in Bootstrap's default grid.
<!DOCTYPE html><html> <head> <title>Bootstrap nested columns example</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <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> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
The effect is as follows:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn