What is Bootstrap's grid system? Detailed explanation of grid system

This article will tell you what is Bootstrap’s grid system? Detailed explanation of the grid system, let everyone understand the Bootstrap grid system, what the grid parameters are, and how to set column offset and column nesting. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. If you want to learn and get more bootstrap related video tutorials, you can also visit: bootstrap tutorial!

What is a grid system?

Bootstrap has a built-in responsive, mobile-first fluid grid system. As the screen device or viewport size increases, The system will automatically divide it into up to 12 columns.

The grid system is used to pass a series of rows and columns## Use combinations of # to create page layouts, and content can be placed in these created layouts

Note:

"Row" must be contained in .container (fixed width) or .container-fluid (100% width).

		<p class="container">
			<p class="row">	
				<p class="col-md-3">我是文本</p>
				<p class="col-md-3">我是文本</p>
				<p class="col-md-3">我是文本</p>
				<p class="col-md-3">我是文本</p>
			</p>
		</p>

means that a p occupies 3 columns.

Raster parameters

	Super small screen Mobile phone (<768px)	Small screen Tablet (≥768px)	Medium screen Desktop monitor (≥992px)	Large screen Large desktop monitor (≥1200px)
Grid system behavior	Always arranged horizontally	Starts to be stacked together, and will become horizontally arranged when greater than these thresholdsC
.container Maximum width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Number of columns	12
Maximum column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on the left and right of each column)
Nestable	is
Offsets	is
Column sorting	yes

现在有一个需求：

如果是大屏幕，一行显示6列

如果是中屏幕，一行显示4列

如果是小屏幕，一行显示3列

如果是超小屏幕，一行显2列

		<p class="container">
			<p class="row">	
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
				<p class="col-lg-2 col-md-3 col-sm-4 col-xs-6">我是文本</p>
			</p>
		</p>

列偏移

.col-lg-offset-*

" * " 偏移几个位置

		<p class="container">
			<p class="row">	
				<p class="col-lg-2 col-lg-2">我是文本</p>
			</p>
		</p>

在大屏幕的页面下偏移两个格子

列嵌套

		<p class="container">
			<p class="row">	
				<p class="col-lg-5">
					<p class="row">
						<p class="col-lg-2">我是文本</p>
						<p class="col-lg-2">我是文本</p>
					</p>
				</p>
			</p>
		</p>

在列里面再进行一次嵌套，会把列的大小平均分成12份再计算。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

The above is the detailed content of What is Bootstrap's grid system? Detailed explanation of grid system. For more information, please follow other related articles on the PHP Chinese website!