Bootstrap4.x布局系统的示例分析

这篇文章主要为大家展示了“Bootstrap4.x布局系统的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Bootstrap4.x布局系统的示例分析”这篇文章吧。

　　布局介绍

　　Bootstrap4.x提供了.container和.container-fluid两种方式。这两种方式是启用布局栅格系统最基本的元素。

　　.container是固体自适应方式，宽度固定

　　.container-fluid是流体100%自适应方式，宽度随着屏幕的增大而增大。

　　Bootstrap4.x自适应的响应方式如下：

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

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

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

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

　　栅格系统

　　Bootstrap4.x 基于12列的布局，5种响应尺寸。具体采用div容器的行、列和对齐内容来构建响应式布局。所占格栅位正好是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个栅格等级，具体如下表：

　　如果同时使用两个或以上的级别，则遵循移动优先的原则；

<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布局系统的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！