本篇文章就給大家?guī)��?lái)Bootstrap的柵格系統(tǒng)是什么？柵格系統(tǒng)詳解，讓大家了解Bootstrap柵格系統(tǒng)、柵格參數(shù)是什么，列偏移、列嵌套怎么設(shè)置。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。如果大家想要學(xué)習(xí)和獲取更多的bootstrap相關(guān)視頻教程也可以訪問(wèn)：bootstrap教程！

什么是柵格系統(tǒng)？

Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

柵格系統(tǒng)用于通過(guò)一系列的行（row）與列（col）的組合來(lái)創(chuàng)建頁(yè)面布局，內(nèi)容就可以放入這些創(chuàng)建好的布局中

注意：

”行（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>

表示一個(gè) p 占3列。

柵格參數(shù)

	超小屏幕 手機(jī) (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統(tǒng)行為	總是水平排列	開(kāi)始是堆疊在一起的，當(dāng)大于這些閾值時(shí)將變?yōu)樗�平排列C
.container 最大寬度	None （自動(dòng)）	750px	970px	1170px
類(lèi)前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數(shù)	12
最大列（column）寬	自動(dòng)	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

現(xiàn)在有一個(gè)需求：

如果是大屏幕，一行顯示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-*

" * " 偏移幾個(gè)位置

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

在大屏幕的頁(yè)面下偏移兩個(gè)格子

列嵌套

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

在列里面再進(jìn)行一次嵌套，會(huì)把列的大小平均分成12份再計(jì)算。

總結(jié)：以上就是本篇文的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。

以上就是Bootstrap的柵格系統(tǒng)是什么？柵格系統(tǒng)詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！