目录
1.bootstrap是什么?
2.栅格模型设计的精妙之处.
3.预备知识
4.栅格系统的框架
4.1bootstrap容器
4.1.1固定容器与流体容器公共样式
4.1.2固定容器样式
4.2.bootstrap行与列
4.2.1行
4.2.2列
4.3.bootstrap列排序与列偏移
4.3.1列偏移
4.3.2列排序
5.栅格源码分析
1.bootstrap是什么?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
2.栅格模型设计的精妙之处.
容器两边具有15px的padding:为了让容器可以包裹住行
行两边具有-15px的margin:为了能使列嵌套行
列两边具有15px的padding:为了维护槽宽的规则
3.预备知识
1.栅格中容器有两类之分,一类是流体容器,一类是固定容器.
2.固定容器有阈值
表示 |
阈值 |
width |
适用 |
lg |
大于等于1200 |
1170(1140+槽宽30) |
大屏pc |
md |
大于等于992小于1200 |
970(940+槽宽30) |
中屏pc |
sm |
大于等于768小于992 |
750(920+槽宽30) |
平板 |
xs |
小于等于768 |
auto |
移动手机 |
注:槽宽可以自定义
4.栅格系统的框架
1.需要容器
2.需要行
3.需要列 (默认一行12列)
代码与案例如下:
<body>
<!-- 这里是容器 -->
<div class="container">
<!-- 这里是行 -->
<div class="row">
<!-- 这里是列 lg表示阈值 -->
<div class="col-lg-10">col-lg-10</div>
<!-- 一行默认12列 -->
<div class="col-lg-2">col-lg-2</div>
</div>
</div>
</body>
效果图如下,将一行分为两列,一列占10,一列占2
接下来我们再多增加几行划分不同的列。
<body>
<!-- 这里是容器 -->
<div class="container">
<!-- 这里是行 -->
<div class="row">
<!-- 这里是列 lg表示阈值 -->
<div class="col-lg-10">col-lg-10</div>
<!-- 一行默认12列 -->
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-9">col-lg-9</div>
<div class="col-lg-8">col-lg-8</div>
<div class="col-lg-4">col-lg-4</div>
</div>
</div>
</body>
效果如下:
4.1bootstrap容器
4.1.1固定容器与流体容器公共样式
1.我们在源码中可以grid.less,代码如下
<!--- 固定容器与流体容器的公共样式-->
.container-fixed(@gutter: @grid-gutter-width) {
padding-right: ceil((@gutter / 2));
padding-left: floor((@gutter / 2));
margin-right: auto;
margin-left: auto;
&:extend(.clearfix all);
}
2.在 variables.less中我们可以查询到@grid-gutter-width 这就是槽宽30px。
3.接下来我们分析 ,ceil表示向上取整 ,floor表示向下取整,即为15px。
padding-right: ceil((@gutter / 2));
padding-left: floor((@gutter / 2));
4.1.2固定容器样式
1.在grid.less中找到固定容器的定义。
.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;
}
}
2.在 variables.less中我们可以查询到 @screen-sm-min @screen-md-min @screen-lg-min 分别为
720px+槽宽,940px+槽宽,1140px+槽宽。
// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
4.2.bootstrap行与列
4.2.1行
1.在grid.less中找到行的定义。
.row {
.make-row();
}
// @grid-gutter-width为槽宽 30px
.make-row(@gutter: @grid-gutter-width) {
margin-right: floor((@gutter / -2));
margin-left: ceil((@gutter / -2));
&:extend(.clearfix all);
}
2.经过分析可知margin-right:-15px;
margin-left : -15px;
4.2.2列
列的第一步:
1.在grid.less中找到列的定义。
.make-grid-columns();
.make-grid(xs);
@media (min-width: @screen-sm-min) {
.make-grid(sm);
}
@media (min-width: @screen-md-min) {
.make-grid(md);
}
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}
2.在grid-framework中找到.make-grid-columns();
.make-grid-columns() {
.col(@index) { //index 为1
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
min-height: 1px;
padding-right: floor((@grid-gutter-width / 2));
padding-left: ceil((@grid-gutter-width / 2));
}
}
.col(1); // kickstart it
}
3.其中有三个混合,第一个混合调用.col(2,".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1")
第二个混合为递归,第二个混合调用
.col(3,.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2)
....
.col(13,str)
str:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2
....
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
第三个混合调用,将
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1 .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2 ....col-xs-12, .col- sm-12, .col-md-12, .col-lg-12变成选择器
列的第二步:
1.在grid-framework中找到.make-grid(xs),.make-grid(sm),..make-grid(md),make-grid(lg);
.make-grid(@class) {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
2.找到.float-grid-columns 进行分析
.float-grid-columns(@class) {
.col(@index) {
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) {
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
3.其中有三个混合, 第二个混合为递归,分别得到 .col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12,
第三个混合调用,将 .col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12,变成选择器.
列的第三步:
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.calc-grid-column(@index, @class, @type);
// next iteration
.loop-grid-columns((@index - 1), @class, @type);
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
分析:其中index=12,class为学生,type为width的情况,递归结果如下。
.col-xs-12{ width:12/12%}
.col-xs-11{ width:11/12%}
.col-xs-10{ width:10/12%}
...
.col-xs-1{ width:1/12%}
4.3.bootstrap列排序与列偏移
4.3.1列偏移
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
4.3.2列排序
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
.col-@{class}-push-0 {
left: auto;
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
.col-@{class}-pull-0 {
right: auto;
}
}
以上俩种情况分析同type为width时, 不同在于可以取到0,并且取到0时的设置不同。
5.栅格源码分析
1.固定容器与流体容器的公共样式
padding-right: 15
padding-left:15
margin-right: auto;
margin-left: auto;
2.固定容器特定样式
顺序不可变
@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;
}
3.行的固定样式
margin-right:-15px;
margin-left : -15px;
4.列的固定样式
//列的第一步
.make-grid-columns()----->
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2
....
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
position: relative;
min-height: 1px;
padding-right:15px;
padding-left: 15px;
}
//列的第二步
.make-grid(xs)--------->
.float-grid-columns(xs);
.col-xs-1, .col-xs-2, .col-xs-3, ... .col-xs-12{
float: left;
}
//列的第三步
.loop-grid-columns(@grid-columns, @class, width)----->
.col-xs-12{ width:12/12%}
.col-xs-11{ width:11/12%}
.col-xs-10{ width:10/12%}
...
.col-xs-1{ width:1/12%}
.loop-grid-columns(@grid-columns, @class, pull);
.loop-grid-columns(@grid-columns, @class, push);
.loop-grid-columns(@grid-columns, @class, offset);
}
5.列偏移的样式
.col-xs-offset-12{margin-left:12/12}
.col-xs-offset-11{margin-left:11/12}
.col-xs-offset-10{margin-left:10/12}
...
.col-xs-offset-1{margin-left:1/12}
.col-xs-offset-0{margin-left:0}
6.列排序的样式
push |
pull |
.col-xs-push-12{ left:12/12%} |
.col-xs-pull-12{ right:12/12%} |
.col-xs-push-11{ left:11/12%} |
.col-xs-pull-11{ right:11/12%} |
.col-xs-push-10{ left:10/12%} |
.col-xs-pull-10{ right:10/12%} |
... |
... |
.col-xs-push-1{ left:1/12%} |
.col-xs-pull-1{ right:1/12%} |
.col-xs-push-0{ left:auto} |
.col-xs-pull-0{ right:auto} |