bootstrap栅格系统源码,不完整待续

/*

*仿BS container

*/

.container{

padding-left: 15px;

padding-right:15px;

margin-left: auto;

margin-right: auto;

}

@media (min-width: 768px) {

.container{

width:750px;            /*页面宽度大于768px时盒子宽度*/

}

}

@media (min-width: 992px) {

.container{

width:970px;            /*页面宽度大于992px时盒子宽度*/

}

}

@media (min-width: 1200px) {

.container{

width:1170px;            /*页面宽度大于1200px时盒子宽度 设置时注意代码顺序、执行顺序不一致将导致代码不生效 */

}

}

/*

*仿BS row

*/

*{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}/*column百分比宽度计算时不计算父容器内外边距,width百分比可以沾满一行而不溢出*/

.row{

margin-left: -15px;

margin-right: -15px;

}

.row:before,.row:after,.container:before,.container:after{

display: table;

content: " ";

}/*解决子元素float后撑不开父元素的问题,CSS3清除浮动大法*/

.row:after,.container:after{

clear: both;

}/*解决子元素float后撑不开父元素的问题,CSS3清除浮动大法*/

/*

*仿BS column

*/

.col-md-4,.col-xs-12{

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

float: left;

}

.col-xs-12{

width: 100%;

}

@media (min-width: 992px){

.col-md-4{

width: 33.3333%;

}

}

:after, :before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}/*这一行我也不知道什么意思,这两个伪类是CSS3的,功能异常强大*/

复制黏贴到你的sass或者less,然后@import到你的main.css中,添加类名就能正常使用!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,728评论 3 184
  • 制作简约CSS栅栏布局 众所周知,Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着显示屏幕或视...
    七天_假阅读 11,035评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,382评论 0 11
  • 实现原理 初始化 进程启动流程简述 客户端进程启动 -> ActivityThread#main -> Activ...
    HelloCsl阅读 4,363评论 0 8