Bootstrap全局样式之栅格布局系统-总结

发表于   |  

Bootstrap全局CSS之栅格布局系统

WEB开发中页面布局方式演进：

  1. Table布局
  2. CSS+DIV布局
  3. Bootstrap栅格布局系统

栅格系统特点

  1. 所有的行必须放在容器中：.container或者.contain-fluid
  2. 分为多行，一行平均分为12个col;
  3. 网页内容只能放在col中，不能直接放在row中

.container的宽度问题：

  • 超大屏，屏宽>1200px（）：容器宽1170px
  • 普通大屏，屏宽>992px（）：容器宽950px
  • 小屏，屏宽>768px（）：容器宽750px
  • 超小屏，屏宽<768px（）：容器宽auto

.container-fluid的宽度问题：

  • width永远100%

Bootstrap布局的特点是什么？

  1. 宽度做了媒体查询，适应不同的屏幕；
  2. 添加了前置和后置内容生成，可防止子元素margin越界、浮动造成的影响；

回顾CSS的经典问题一：父元素下第一个子元素的margin-top越界问题以及末个子元素margin-bottom的越界问题？

  1. 为父元素加边框，防止子元素延伸。副作用是边框；
  2. 将margin换做padding；副作用是padding-top的值要加padding；
  3. 父元素overflow，副作用是将溢出部分隐藏掉可能不满足需求；

  4. 将父元素的第一个元素之前加一个无高度的display:table元素，无副作用！！！

    .parent:before{
    content:' ';
    display:table;
}

回顾CSS的经典问题二：如何解决所有子元素浮动以后，父元素高度为0的问题？

  1. 为父元素设置固高，副作用：如果子元素是动态数据，没法确定子元素高；
  2. 为父元素指定overflow:hidden；副作用:

  3. 为父元素添加后置内容生成选择器，无副作用。

    .parent:after{
    content:' ';
    display:table;
    clear:both;
}

热评文章