这篇文章主要为大家展示了“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:

　　一行三列的布局

<divclass="container"><!--表示启用栅格行--><divclass="row"><!--启用栅格列--><divclass="col-sm">第一列</div><divclass="col-sm">第二列</div><divclass="col-sm">第三列</div></div></div>　　栅格等级

　　Bootstrap4.x有5个栅格等级，具体如下表：


超小屏幕

小屏幕


中等屏幕


大屏幕


超大屏幕


尺寸<576px>=576px>=768px>=992px.>=1200px前缀.col-.col-sm.col-md-.col-lg-col-xl-

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

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

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