Bootstrap響應式前端框架筆記一——強大的柵格佈局

時間 2019-11-12

標籤 bootstrap 響應前端框架筆記強大柵格佈局欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap響應式前端框架筆記一——強大的柵格佈局

1、Bootstrap？

Bootstrap是一款HTML，Css和JavaScript開發框架，其也支持開發者進行自定義構建，開發者也能夠只打包本身須要的功能模塊使用。Bootstrap的中文網址以下：css

http://v3.bootcss.com/。html

Bootstrap是一款響應式的編程框架，所謂響應式，是指在不一樣屏幕尺寸的設備上，使用Bootstrap開發的項目能夠自動進行佈局調整適配。其響應式佈局的核心是柵格系統，柵格系統將瀏覽器分隔成必定數量的行和列。默認柵格系統將瀏覽器窗口分爲12列，開發者能夠爲元素設置其在對應設備尺寸中所佔的列數。前端

2、均分與尺寸適配

Bootstrap將瀏覽器尺寸分爲4個等級，分別爲xs，sm，md和lg。xs是指瀏覽器寬度小於768時的狀態，通常對應移動手機設備，sm指瀏覽器寬度大於768且小於992時的狀態，其通常對應平板設備，md指瀏覽器寬度大於768且小於1200時的狀態，通常對應正常的我的電腦，lg是指瀏覽器寬度大於1200時的狀態。以下表所示：git

在開發者使用柵格類對標籤進行定義的時候，須要注意，若是隻設置了高等級的柵格類，則在此等級如下的瀏覽器尺寸都將採用豎直堆疊，此等級及以上等級的瀏覽器尺寸中都將水平排列。例如，若是配置了兩個標籤的類都爲爲col-md-6，則在992如下尺寸的的瀏覽器中豎直堆疊佈局，在992即以上尺寸的瀏覽器中都將水平均分一行。github

柵格系統的一行中被分紅了12列，默認一行中也最多能夠添加12個列，以下代碼演示了豎直堆疊佈局與水平佈局在柵格系統中的應用：編程

<body class="container">
		<p>將md以上尺寸窗口寬度分爲12份，md一下尺寸的窗口將豎直堆疊排列</p>
		<div class="row">
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
		</div>
		<hr />
		<p>將md以上尺寸的窗口寬度進行2等分，md一下尺寸的窗口將豎直堆疊排列</p>
		<div class="row">
			<div class="col-md-6">.col-md-6</div>
			<div class="col-md-6">.col-md-6</div>
		</div>
		<hr />
		<p>將md以上尺寸的窗口寬度進行2:1等分，md一下尺寸的窗口將豎直堆疊排列</p>
		<div class="row">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-4">.col-md-4</div>
		</div>
		<hr />
		<p>將xs以上尺寸的窗口寬度進行6等分，xs爲最小等級</p>
		<div class="row">
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
		</div>
	</body>

上面代碼在窗口尺寸大於等於992時的效果以下所示：瀏覽器

將瀏覽器窗口縮小，能夠看到，除了第4行能夠繼續保持6等分外，其它行等變成了豎直堆疊佈局：前端框架

若是須要對移動設備和桌面是被進行佈局的區別化，能夠爲某個標籤配置多套不一樣等級下的柵格類，示例以下：框架

<p>在md及以上尺寸窗口中進行4等分，在md如下尺寸sm以上尺寸窗口進行2等分佈局，在sm如下儲存窗口進行豎直堆疊佈局</p>
		<div class="row">
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
		</div>

須要注意，默認Bootstrap中一行最多能夠包含12列，若是列數超出12，將另起一行進行佈局，示例以下：佈局

<p>Bootstrap最多一行能夠分配12列，超出將另起一行，例以下面三個div，寬度分別爲8，3，4，第3個div將另起一行佈局</p>
		<div class="row">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-3">.col-md-3</div>
			<div class="col-md-4 ">.col-md-4</div>
		</div>

效果以下圖：

3、列的調整

不少場景下，每列元素的高度並不必定均等，在列高度不均等狀況下的柵格佈局，極可能會出現開發者意想不到的佈局差錯，示例代碼以下：

<p>列高度不均等形成的佈局錯亂</p>
		<div class="row">
			<div class="col-md-6">.col-md-4 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
			<div class="col-md-6">.col-md-4</div>
			<div class="col-md-4 ">.col-md-4</div>
		</div>

上面代碼的柵格佈局效果以下：

如圖所示，開發者本意是將第3個div另起一行進行佈局，因爲前兩個div高度的不均等，致使第3個div直接佈局在了第2個div下面，能夠經過visible-md-block等類來進行強制另起一行，示例以下：

<p>解決列高度不均等形成的佈局錯亂</p>
		<div class="row">
			<div class="col-md-6">.col-md-4 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
			<div class="col-md-6">.col-md-4</div>
			<div class="clearfix visible-md-block"></div>
			<div class="col-md-4 ">.col-md-4</div>
		</div>

效果以下：

在使用柵格佈局時，開發者也不須要將每一行中的12列都佔滿，能夠經過列偏移設置來進行列的定位，示例以下：

<p>進行列偏移操做</p>
		<p>將佔1/3行的一列向右便宜1/3行 使其固定在中間</p>
		<div class="row">
			<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
		</div>
		<div class="row">
			<div class="col-md-2">.col-md-2</div>
			<div class="col-md-2 col-md-offset-8">.col-md-2 .col-md-offset-8</div>
		</div>

效果以下：

Bootstrap的柵格系統也支持進行列的嵌套，須要注意，在嵌套中也不能夠超過12列，示例以下：

<p>進行列的嵌套</p>
		<div class="row">
			<div class="col-md-8">.col-md-8
				<div class="row">
					<div class="col-md-6">.col-md-6</div>
					<div class="col-md-6">.col-md-6</div>
				</div>
			</div>
		</div>

效果以下圖所示：

.col-md-push-* 和 .col-md-pull-*兩個類能夠方便的實現對列的移動，示例以下：

<p>進行列的移動</p>
		<div class="row">
			<div class="col-md-2 col-md-push-8">.col-md-8 向右移動8格</div>
			<div class="col-md-2 col-md-pull-2">.col-md-2 向左移動2格</div>
		</div>

效果以下：

另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/gridSystem.html。