Bootstrap 栅格源码解析(一)
容器
源码部分
// 固定容器
.container {
.container-fixed();
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
// Fluid container 流体容器
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
.container-fixed();
}
对应变量(位于variable.less中):
- @screen-sm-min : 768px
- @screen-md-min : 992px
- @screen-lg-min : 1200px
tips:
- 大于1200px 为大屏pc
- 大于992px 小于1200px 为小屏pc
- 大于768px 小于992px 为平板
- 小于768px 为移动设备
调用了混入
.container-fixed();
.container-fixed(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: floor((@gutter / 2));
padding-right: ceil((@gutter / 2));
&:extend(.clearfix all);
}
对应变量(位于variable.less中):
- @grid-gutter-width : 30px 表现为容器中两边各有15px内边距
继承了.clearfix(位于utilities.less中),用于清除浮动
.clearfix {
.clearfix();
}
调用了混入(位于clearfix.less中)
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
行
// Row
//
// Rows contain and clear the floats of your columns.
.row {
.make-row();
}
调用混入
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
margin-left: ceil((@gutter / -2));
margin-right: floor((@gutter / -2));
&:extend(.clearfix all);
}
对应变量(位于variable.less中):
- @grid-gutter-width : 30px
继承了.clearfix(位于utilities.less中),用于清除浮动
.clearfix {
.clearfix();
}
调用了混入(位于clearfix.less中)
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
主要是添加了左右两边-15px的外边距和清除浮动