bootstrap源码分析----栅格系统

最新推荐文章于 2022-03-17 18:03:34 发布

weixin_30497527

最新推荐文章于 2022-03-17 18:03:34 发布

阅读量92

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ldmblog/p/6216055.html

本文介绍了Bootstrap提供的响应式、移动设备优先的流式栅格系统。该系统通过媒体查询自动调整布局，在不同屏幕尺寸下分为1至12列。文章详细解释了如何使用.col-sm-xx类设置不同屏幕尺寸下的元素宽度。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

bootstrap通过媒体查询解决不同分辨率屏幕下，页面主内容的宽度问题：

@media (min-width: 1200px){.container:width: 1170px;}

@media (min-width: 992px){.container :width: 970px;}

@media (min-width: 768px){ .container :width: 750px}

.container {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}

栅格参数

以class-----col-sm-xx为例子

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {width: 100%; }
  .col-sm-11 {width: 91.66666667%; }
  .col-sm-10 {width: 83.33333333%;}
  .col-sm-9 { width: 75%;}
  .col-sm-8 {width: 66.66666667%;}
  .col-sm-7 { width: 58.33333333%;}
  .col-sm-6 { width: 50%;}
  .col-sm-5 { width: 41.66666667%;}
  .col-sm-4 { width: 33.33333333%;}
  .col-sm-3 {width: 25%;}
  .col-sm-2 {width: 16.66666667%;}
  .col-sm-1 {width: 8.33333333%;}
}

　根据媒体查询和宽度百分比设置，设置相应class，就能够设置相应宽度

转载于:https://www.cnblogs.com/ldmblog/p/6216055.html