发布时间:2024-06-25 文章分类:WEB开发 投稿人:樱花 字号: 默认 | | 超大 打印

(1)概括一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式。(2)关键字段
1、col是column简写:列;

2、xs是maxsmall简写:超小, sm是small简写:小, md是medium简写:中等, lg是large简写:大;

3、-* 表示占列数,即占每行row分12列栅格系统比;

4、.col-xs-* 超小屏幕如手机 (<768px)时使用;

.col-sm-* 小屏幕如平板 (768px ≤ 宽度 <992px)时使用;

.col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 < 1200px)时使用;

.col-lg-* 大屏幕如大显示器 (≥1200px)时使用。

(3)解释

为了更好的理解Bootstrap框架的网格系统工作原理,我们来看一张草图:

 

最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在Bootstrap框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是768px、992px和1220px。