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:

　　一行三列的布局

       
                                
                                                
第一列
                        
第二列
                        
第三列
                
        

　　栅格等级

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

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

                        
                                
第一列
                                
第二列
                                
第三列
                        
                

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