W.T.的博客

Every day to be a little better

前端-学习笔记-Bootstrap

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

1. 简介

2. 版本

  • 2.x.x：停止维护，兼容性好，代码不够简洁，功能不够完善
  • 3.x.x：目前使用最多，稳定但是放弃了IE6-IE7。对IE8支持，但是界面效果不好，偏向于用于开发响应式布局，移动设备优先的web项目
  • 4.x.x：最新版，目前不流行

3. 容器

  • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器
  • 注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套
    • .container 类用于固定宽度并支持响应式布局的容器
    • .container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器
container类 container-fluid类
超小屏(<768px)：设置宽度为auto 流式布局容器，auto
小屏(≥768px)：设置宽度为750px 占据全部视口(viewport)的容器
中屏(≥992px)：设置宽度为970px 适合于单独做移动端开发
大屏(≥1200x)：设置宽度为1170px

4. 栅格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中

4.1. 栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12 12 12 12
  • “行（row）”必须包含在 .container （固定宽度）中
  • 列的平均划分需要给列添加类前缀
  • xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；
  • 列大于12，多余的列所在元素被作为一个整体另起一行排列
  • 每一列默认有左右15px的padding
  • 可以同时为一列指定多个设备的类名，以便划分不同份数，故可以为class=”col-md-4 col-sm-6”

4.2. 嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）

嵌套中加入一个row就可以取消父元素的padding值而且高度自动和父级一样高

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

4.3. 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度

4.4. 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序

push-往右

pull-往左

1
2
3
4
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

4.5. 不同设备中隐藏或显示元素

.hidden-*

.visible-*

4.6. 栅格源码分析

4.6.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;
  }
}

4.6.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;

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

容器两边 15px的padding

行两边 -15px的margin

列两边 15px的padding

为了维护槽宽的规则：

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

为了能够使列嵌套行：

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

为了能够包裹住行：

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

5. 行

/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);
}

6. 列

6.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
}

6.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);
}

6.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
}

6.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);
}

6.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));
  }
}

7. 响应式工具

/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();
  }
}

8. 定制化

修改bootstrap的样式:

  1. 创建 index.less 自定义文件
  2. 引入bootstrap的入口less文件
  3. 添加修改的样式
1
2
@import "./css/bootstrap/less/bootstrap.less";
@grid-gutter-width: 50px;
本文结束  感谢您的阅读