Bootstrap栅栏布局

Time:2020-01-06 / View:20

前言

一句话概括,就是根据显示屏幕宽度的大小,自动的选用对应的类的样式。

释义

  • col是column简写:列;
  • xs是maxsmall简写:超小, sm是small简写:小,  md是medium简写:中等, lg是large简写:大;
  • -* 表示占列数,即占每行row分12列栅格系统比;

详细

  • .col-xs-* 超小屏幕如手机 (<768px)时使用;
  • .col-sm-* 小屏幕如平板 (768px ≤ 宽度 <992px)时使用;
  • .col-md-* 中等屏幕如普通显示器 (992px ≤ 宽度 < 1200px)时使用;
  • .col-lg-* 大屏幕如大显示器 (≥1200px)时使用。

*代表具体数字, 如果我们要在移动端并排显示3个div(12/3个=每个占4 列 ),则col-xs-4;在PC端上显示6个div(12/6个=每个占2列 ) ,则 col-md-2

发布评论