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

柵格參數

#.container.col-xs-.col-sm-.col-md-.col-lg-12~97px#30px（每列左右都有15px）是

	超小螢幕 手機(<768px)	小螢幕 平板(≥768px)	中等螢幕 桌面顯示器(≥992px)	#大螢幕 大型桌面顯示器(≥1200px)
		##柵格系統行為	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
	最大寬度None （自動）	750px970px	1170px	類別前綴
				列（column）數
	最大欄位（column）寬度
#~62px	~81px
	槽（gutter）寬
	#可嵌套

######偏移（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的柵格系統是什麼？柵格系統詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！