bootstrap has several grids

bootstrap has 12 grids. Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides the page into up to 12 grids as the screen or viewport size increases.

The operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

Bootstrap provides a set of responsive and mobile devices Prioritized fluid grid system (grip system), as the screen or viewport size increases, the system will automatically divide the page into up to 12 grids, and the page can be divided according to these twelve grids, which is suitable for writing adaptive The page is very convenient. You only need to match the .row class and the .col class. .col-xs-ultra-small screen mobile phone (

For example: If you want to achieve the effect of the following pictures on the page, just divide the grid into three parts, each with 4 grids

If you want to select the number of displayed lines based on the size of your computer, tablet, or mobile phone, you can use the col-*-* written above to allocate, for example

This means that the grid is divided into 2 parts on the mobile phone screen, each part has 6 grids, and is displayed as two columns on the device, while on the tablet and computer desktop It is divided into 3 parts, each part has 4 grids, and is displayed as three columns on the device (there is a grid view below). In other words, .col is divided into control pages based on col-device parameters-number of grids.

.col must be included in .row to be used, and .col and .row must be used in .container. There are examples below for reference and understanding:

<div class="container">
	<h1 class="page-header">标签1<small>使用bootstrap网格系统布局网页</small></h1>
	<p>标签3</p>
	<div class="row">
		<div class="col-xs-12 col-sm-4">
			<h1>列表1</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表2</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表3</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
		<div class="col-xs-12 col-sm-4">
			<h1>列表3</h1>
			<p>内容内容内容内容内内内内内容内容内容内容容内容内容内容容内容内容内容容内容内容内容容内容内容内容</p>
		</div>
	</div>
</div>

[Related recommendations: "bootstrap tutorial"]

The above is the detailed content of bootstrap has several grids. For more information, please follow other related articles on the PHP Chinese website!