这篇文章主要为大家展示了“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个栅格等级，具体如下表：
| 超小屏幕 | 小屏幕
| 中等屏幕
| 大屏幕
| 超大屏幕
|
| 尺寸 | <576px | >=576px | >=768px | >=992px | .>=1200px |
| 前缀 | .col- | .col-sm | .col-md- | .col-lg- | col-xl- |
如果同时使用两个或以上的级别，则遵循移动优先的原则；
<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布局系统的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注天达云行业资讯频道！