Bootstrap的栅格系统有哪些？栅格系统详解

本篇文章就给大家带来Bootstrap的栅格系统是啥？栅格系统详解，让大家理解Bootstrap栅格系统、栅格参数是啥，列偏移、列嵌套如何设定。有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。假如大家想要学习和猎取更多的bootstrap相关视频教程也可以拜访：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列。

栅格参数

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行动	总是水平摆列	开端是堆叠在一起的，当大于这些阈值时将变为水平摆列C
.container 最大宽度	None （主动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	主动	~62px	~81px	~97px
槽（gutter）宽	30px （每列摆布均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

此刻有一个需求：

假如是大屏幕，一行显示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的栅格系统是啥？栅格系统详解的具体内容，更多请关注百分百源码网其它相关文章！