bootstrap-less源码分析：容器

流体容器和固定容器的公共样式
.container-fixed(@gutter: @grid-gutter-width) {//@grid-gutter-width为默认取值，值为30px
margin-right: auto;
margin-left: auto;
padding-left: floor((@gutter / 2));//向下取整
padding-right: ceil((@gutter / 2));
&:extend(.clearfix all);//继承clearfix的全部
}
流体容器
.container-fluid {
.container-fixed();
}
固定容器
.container {
.container-fixed();
//以下三个顺序不能动，必须从小到大
@media (min-width: @screen-sm-min) {// @screen-sm-min的值为768px(在variables里面找到)
width: @container-sm;
}
@media (min-width: @screen-md-min) {//@screen-md-min为992px
width: @container-md;
}
@media (min-width: @screen-lg-min) {//@screen-lg-min为1200px
width: @container-lg;
}
}
总结
lg 大屏pc
md 中屏pc
sm 平板
xs 移动手机
@grid-gutter-width为槽宽，值为30px

bootstrap-less源码分析：容器相关推荐

Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
Appium Server源码分析之作为Bootstrap客户端
Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...
Spring IOC 容器源码分析系列文章导读
1. 简介前一段时间,我学习了 Spring IOC 容器方面的源码,并写了数篇文章对此进行讲解.在写完 Spring IOC 容器源码分析系列文章中的最后一篇后,没敢懈怠,趁热打铁,花了3天时间阅 ...
Spring IOC 容器源码分析 - 余下的初始化工作
1. 简介本篇文章是"Spring IOC 容器源码分析"系列文章的最后一篇文章,本篇文章所分析的对象是 initializeBean 方法,该方法用于对已完成属性填充的 bea ...
Spring IOC 容器源码分析 - 填充属性到 bean 原始对象
1. 简介本篇文章,我们来一起了解一下 Spring 是如何将配置文件中的属性值填充到 bean 对象中的.我在前面几篇文章中介绍过 Spring 创建 bean 的流程,即 Spring 先通过反 ...
Spring IOC 容器源码分析 - 循环依赖的解决办法
1. 简介本文,我们来看一下 Spring 是如何解决循环依赖问题的.在本篇文章中,我会首先向大家介绍一下什么是循环依赖.然后,进入源码分析阶段.为了更好的说明 Spring 解决循环依赖的办法,我 ...
Spring IOC 容器源码分析 - 创建原始 bean 对象
1. 简介本篇文章是上一篇文章(创建单例 bean 的过程)的延续.在上一篇文章中,我们从战略层面上领略了doCreateBean方法的全过程.本篇文章,我们就从战术的层面上,详细分析doCreat ...
Spring IOC 容器源码分析 - 创建单例 bean 的过程
1. 简介在上一篇文章中,我比较详细的分析了获取 bean 的方法,也就是getBean(String)的实现逻辑.对于已实例化好的单例 bean,getBean(String) 方法并不会再一次去 ...
Spring IOC 容器源码分析 - 获取单例 bean
1. 简介为了写 Spring IOC 容器源码分析系列的文章,我特地写了一篇 Spring IOC 容器的导读文章.在导读一文中,我介绍了 Spring 的一些特性以及阅读 Spring 源码的一 ...
手机自动化测试：appium源码分析之bootstrap八
手机自动化测试:appium源码分析之bootstrap八 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...

bootstrap-less源码分析：容器

bootstrap-less源码分析：容器相关推荐

最新文章

热门文章