W.T.的博客

Every day to be a little better

Bootstrap学习笔记

发表于 更新于 分类于
本文字数： 8.5k 阅读时长 ≈ 8 分钟
Bootstrap中文网

1. 简介

来自Twitter的前端框架

文档下载

https://github.com/twbs/bootstrap/archive/v3.4.1.zip

2. 容器

2.1. 流体容器

2.2. 固定容器

  • 超小屏幕(手机，<768px)：设置宽度为auto
  • 小屏幕(平板，≥768px)：设置宽度为750px
  • 中等屏幕(桌面显示器，≥992px)：设置宽度为970px
  • 大屏幕(大桌面显示器，≥1200x)：设置宽度为1170px

整个屏幕采用栅格系统，平均分为12列

3. 栅格源码分析

3.1. 公共样式

在 /less/mixins/grid.less 中定义两种容器的公共样式

1
2
3
4
5
6
7
8
// Centered container element
.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);
}

参数来自于 /less/variables.less，定义为槽宽

1
2
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;

在 /less/mixins/clearfix.less中定义清除浮动代码

1
2
3
4
5
6
7
8
9
10
.clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

3.2. 固定容器的媒体查询

在 /less/grid.less 中，调用了公共样式，但固定容器中还使用了媒体查询，定义不同设备的宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Container widths
.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
.container-fluid {
  .container-fixed();
}

参数 /less/variables.less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;

@screen-md:                  992px;
@screen-md-min:              @screen-md;

@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;

@grid-gutter-width:         30px;


// Small screen / tablet
@container-tablet:             (720px + @grid-gutter-width);
@container-sm:                 @container-tablet;

// Medium screen / desktop
@container-desktop:            (940px + @grid-gutter-width);
@container-md:                 @container-desktop;

// Large screen / wide desktop
@container-large-desktop:      (1140px + @grid-gutter-width);
@container-lg:                 @container-large-desktop;

3.3. 栅格模型设计精妙之处

容器两边 15px的padding

行两边 -15px的margin

列两边 15px的padding

为了维护槽宽的规则：

​ 列两边必须要有15px的padding

为了能够使列嵌套行：

​ 行两边必须要有-15px的margin

为了能够包裹住行：

​ 容器两边必须要有15px的padding

4. 行

/less/grid.less

1
2
3
4
5
6
7
// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}

/less/mixin/grid.less

1
2
3
4
5
6
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-right: floor((@gutter / -2));
  margin-left: ceil((@gutter / -2));
  &:extend(.clearfix all);
}

5. 列

5.1. .make-grid-columns()

定义所有列为相对定位布局，默认高度为1px，左右内边距为15px

/less/grid.less

1
2
3
4
5
// Columns
//
// Common styles for small and large grid columns

.make-grid-columns();

参数定义 /less/variables.less

1
2
//** Number of columns in the grid.
@grid-columns:              12;

/less/mixins/grid-framework.less

【递归】 - 循环调用 .col(@index, @list) when (@index =< 12) ，

从.col(1)开始：

  1. 调用 .col(@index) 得到 .col((2), .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1); }

  2. 调用 .col(@index, @list) when (@index =< 12) 得到 .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); }

  3. 调用 .col(@index, @list) when (@index =< 12) 得到 .col((4), .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-3, .col-sm-3, .col-md-3, .col-lg-3); }

  4. …

  5. 直到 .col(13,.col-xs-1,.., .col-lg-12) 时，调用 .col(13, col-xs-1,.., .col-lg-12) when (@index > 12)，此时定义所有 .col-xx-x 的样式为

    1
    2
    3
    4
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;

源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  
  //=========初始化=========
  .col(@index) { // initial
    @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;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-right: floor((@grid-gutter-width / 2));
      padding-left: ceil((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}

5.2. .make-grid(xs)

/less/grid.less ，移动优先

1
2
3
4
5
6
7
8
9
10
.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);
}

调用在 /less/mixins/grid-framework.less 中

1
2
3
4
5
6
7
8
// Create grid for specific class
.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);
}

5.2.1. .float-grid-columns(@class)

将所有列定义为左浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

5.2.2. .loop-grid-columns(@index, @class, @type)

递归得到所有 xs,sm,md,lg 不同设备的样式 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.col-@class-@index{
  width: @index/12;
}

/* 改变列左右的顺序 */
.col-@{class}-push-0 {
    left: auto;
}
.col-@class-push-@index{
  left: @index/12;
}

.col-@{class}-pull-0 {
    right: auto;
}
.col-@class-pull-@index{
  right: @index/12;
}

/* 列偏移 */
.col-@class-offset-@index{
  margin-left: @index/12;
}

源码

1
2
3
4
5
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

5.2.3. .calc-grid-column(@index, @class, @type)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
.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;
  }
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

6. 响应式工具

/less/mixins/responsive-visiblity.less

1
2
3
4
5
6
7
8
9
10
11
12
13
// stylelint-disable declaration-no-important

.responsive-visibility() {
  display: block !important;
  table&  { display: table !important; }
  tr&     { display: table-row !important; }
  th&,
  td&     { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
}

/less/responsive-utilities.less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 先所有元素都隐藏
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  .responsive-invisibility();
}

// 在展示特定元素
.visible-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-visibility();
  }
}
.visible-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-visibility();
  }
}
.visible-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-visibility();
  }
}
.visible-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-visibility();
  }
}

// 特定元素隐藏
.hidden-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-invisibility();
  }
}
.hidden-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-invisibility();
  }
}
.hidden-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-invisibility();
  }
}
.hidden-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-invisibility();
  }
}

7. 定制化

修改bootstrap的样式:

  1. 创建 index.less 自定义文件
  2. 引入bootstrap的入口less文件
  3. 添加修改的样式
1
2
@import "./css/bootstrap/less/bootstrap.less";
@grid-gutter-width: 50px;
本文结束  感谢您的阅读
  • 本文作者： Wang Ting
  • 本文链接： /zh-CN/2019/09/20/Bootstrap学习笔记/
  • 发布时间： 2019-09-20 19:47
  • 更新时间： 2023-04-15 16:18
  • 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！