BootStrap3 Study Notes (1) -- mesh system, bootstrap3 Study Notes

BootStrap3 Study Notes (1) -- mesh system, bootstrap3 Study Notes

Code and table from: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

If a grid is displayed, the Code should look like this:

<div class="container">    <div class="row">        <div class="col-md-4"><p>Box 1</p></div>        <div class="col-md-4"><p>Box 2</p></div>        <div class="col-md-4"><p>Box 3</p></div>        <div class="col-md-4"><p>Box 4</p></div>        <div class="col-md-4"><p>Box 5</p></div>        <div class="col-md-4"><p>Box 6</p></div>        <div class="col-md-4"><p>Box 7</p></div>        <div class="col-md-4"><p>Box 8</p></div>        <div class="col-md-4"><p>Box 9</p></div>        <div class="col-md-4"><p>Box 10</p></div>        <div class="col-md-4"><p>Box 11</p></div>        <div class="col-md-4"><p>Box 12</p></div>    </div></div>

Col-* indicates the column width occupied by the grid system for different types of devices.

	Extremely small Mobile phone (<768px)	Small Flat Panel (≥768px)	Medium Computer (≥992px)	Large Computer (≥0000px)
Maximum container width	None (auto)	750px	970px	1170px
Class name prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Maximum column width	Auto	~62px	~81px	~97px
Column gap	15px(I. e.30px)

When the column height is different, because the float function will damage the structure of the grid, you can avoid it by using the response class. The following is a complete grid code:

<div class="container">    <div class="row">        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>        <div class="clearfix visible-sm-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>        <div class="clearfix visible-md-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>        <div class="clearfix visible-sm-block"></div>        <div class="clearfix visible-lg-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>        <div class="clearfix visible-sm-block"></div>        <div class="clearfix visible-md-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>        <div class="clearfix visible-sm-block"></div>        <div class="clearfix visible-lg-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>        <div class="clearfix visible-md-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>        <div class="clearfix visible-sm-block"></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>        <div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>    </div></div>

Visible-* indicates the display attribute under which devices are displayed. Because the display attribute is displayed in a single column by default, no response class customization is required.

Response classes can also be used in common tags, such as the following code:

<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p><p class="visible-sm-block">This paragraph is visible only on small devices.</p><p class="visible-md-block">This paragraph is visible only on medium devices.</p><p class="visible-lg-block">This paragraph is visible only on large devices.</p>

Similarly, you can use den-* To hide the settings on a specific device:

<p class="hidden-xs">This paragraph is hidden only on extra small devices.</p><p class="hidden-sm">This paragraph is hidden only on small devices.</p><p class="hidden-md">This paragraph is hidden only on medium devices.</p><p class="hidden-lg">This paragraph is hidden only on large devices.</p>

You can also set the format for printing through the response class:

Class	Description
.visible-print-block	Block elements are hidden during browsing and displayed upon Printing
.visible-print-inline	Hide inline elements during browsing and display upon Printing
.visible-print-inline-block	Inline block elements are hidden during browsing and displayed upon Printing
.hidden-print	Display while browsing, print hidden