Bootstrap4.x布局系統(tǒng)的示例分析

這篇文章主要為大家展示了“Bootstrap4.x布局系統(tǒng)的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Bootstrap4.x布局系統(tǒng)的示例分析”這篇文章吧。

　　布局介紹

　　Bootstrap4.x提供了.container和.container-fluid兩種方式。這兩種方式是啟用布局柵格系統(tǒng)最基本的元素。

　　.container是固體自適應(yīng)方式，寬度固定

　　.container-fluid是流體100%自適應(yīng)方式，寬度隨著屏幕的增大而增大。

　　Bootstrap4.x自適應(yīng)的響應(yīng)方式如下：

　　@media (min-width:576px) 小屏幕

　　@media(min-width:768px) 中等屏幕

　　@media(min-width:992px) 大屏幕

　　@media(min-width:1200px) 超大屏幕

　　柵格系統(tǒng)

　　Bootstrap4.x 基于12列的布局，5種響應(yīng)尺寸。具體采用div容器的行、列和對齊內(nèi)容來構(gòu)建響應(yīng)式布局。所占格柵位正好是12列，超過12列則自動換行，小于12列則不能100%

　　Eg:

　　一行三列的布局

	<div class="container">
		<!--表示啟用柵格行-->
		<div class="row">
			<!--啟用柵格列-->
			<div class="col-sm">第一列</div>
			<div class="col-sm">第二列</div>
			<div class="col-sm">第三列</div>
		</div>
	</div>

　　柵格等級

　　Bootstrap4.x有5個柵格等級，具體如下表：

　　如果同時使用兩個或以上的級別，則遵循移動優(yōu)先的原則；

<div class="container-fluid">
			<div class="row">
				<div class="col-sm-4 col-lg-6 col-xl-12">第一列</div>
				<div class="col-sm-4 col-lg-6 col-xl-12">第二列</div>
				<div class="col-sm-4 col-lg-12 col-xl-12">第三列</div>
			</div>
		</div>

以上是“Bootstrap4.x布局系統(tǒng)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！