Bootstrap的栅格系统是什么？栅格系统详细说明

什么是栅格系统？

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中

注意：

”行（row）“ 必须包含在 .container (固定宽度) 或 .container-fluid(100%宽度)中。

		<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>

表示一个 p 占3列。

栅格参数

现在有一个需求：

如果是大屏幕，一行显示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份再计算。

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

以上就是Bootstrap的栅格系统是什么？栅格系统详解的详细内容，更多请关注php中文网其它相关文章！