多语言展示
当前在线:1481今日阅读:27今日分享:41

Bootstrap栅格系统的基本用法

Bootstrap栅格系统的基本用法
方法/步骤
1

Bootstrap中的网格布局其实就是行和列的组合,根据屏幕大小的不同分为了4种不同的使用方式。在基础用法中使用1600px的屏幕,如图所示。

2

在屏幕为1600px的情况下,页面中看到的效果如图所示。

3

在屏幕小于1200px的情况下显示效果如图所示。

4

从上面的效果可以看出,当小于屏幕临界值之后,所有的内容会堆在一起。当col-lg-*和col-sm-*同时使用时,屏幕小于最小临界值时内容会堆在一起,代码如下:

5

不论1600分辨率、1200分辨率下全部是满屏显示,效果如下

推荐信息