深度了解bootstrap源码之sass篇（十一）

发表于

前言

这一章主要学习jumbotron（巨幕），thumbnails(略缩图),tooltips（提示工具），pagination（分页组件）。

学习到这里，我已大致了解了bootstrap里css框架的形成和设计思路。也摸清了它的优势和弊端。在往后的学习了解过程中，将主要面向组件编写技巧。再一次赞美bootstrap，虽只是了解bootstrap的ui框架，但其展现出来的工程化、设计思路、技巧和解决方案都值得深入研习。

研究对象

jumbotron.scss、thumbnails.scss、tooltips.scss、pagination.scss、_pagination.scss(mixins)

使用方法和图例

jumbotron

thumbnails

tooltips

pagination

jumbotron.scss

源文：

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
 //
 // 巨幕
 // --------------------------------------------------
.jumbotron {
  padding: $jumbotron-padding ($jumbotron-padding / 2);
  margin-bottom: $jumbotron-padding;
  color: $jumbotron-color;
  background-color: $jumbotron-bg;
  // 巨幕下的文字排版，尺寸都稍大些
  h1,
  .h1 {
    color: $jumbotron-heading-color;
  }
  p {
    margin-bottom: ($jumbotron-padding / 2);
    font-size: $jumbotron-font-size;
    font-weight: 200;
  }
  > hr {
    border-top-color: darken($jumbotron-bg, 10%); // #eee 颜色加深10%
  }
  .container &,
  .container-fluid & {
    border-radius: $border-radius-large; // container容器下的巨幕在高屏分辨率下会出现圆角
  }
  .container {
    max-width: 100%;
  }
  // 屏幕可视区宽度大于768px时下巨幕自适应，效果是巨幕更巨了233
  @media screen and (min-width: $screen-sm-min) {
    padding: ($jumbotron-padding * 1.6) 0;
    .container & {
      padding-left:  ($jumbotron-padding * 2);
      padding-right: ($jumbotron-padding * 2);
    }
    h1,
    .h1 {
      font-size: ($font-size-base * 4.5);
    }
  }
}

thumbnails.scss

源文：

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
 //
// Thumbnails 略缩图组件样式
// --------------------------------------------------
// 此组件通常与流视布局配合使用，
.thumbnail {
  display: block;
  padding: $thumbnail-padding;
  margin-bottom: $line-height-computed;
  line-height: $line-height-base;
  background-color: $thumbnail-bg;
  border: 1px solid $thumbnail-border;
  border-radius: $thumbnail-border-radius;
  @include transition(border .2s ease-in-out); // hover后vorder的过渡效果
  > img,
  a > img {
    @include img-responsive; // 上一篇有提到_image.scss的mixins，主要是响应式img的作用。作为难点，暂时先放着。
    margin-left: auto;
    margin-right: auto;
  }
  // Image captions样式
  .caption {
    padding: $thumbnail-caption-padding;
    color: $thumbnail-caption-color;
  }
}
// bootstrap对a标签添置了许多选择器选中样式，新增额外的thumbnail选择器选中效果
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: $link-color;
}

## tooltips.scss
 源文：
 
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 //
// Tooltips (提示工具)
// --------------------------------------------------
// 基础样式，
.tooltip {
  position: absolute;
  z-index: $zindex-tooltip;
  display: block;
  visibility: visible;
  font-size: $font-size-small;
  line-height: 1.4;
  @include opacity(0);
  // 这里padding的原因是tooltip的三角符号是绝对定位，为5个像素。而margin是与工具提示以外的内容拉出3个像素的间距。
  // 工具提示有上下左右四个选项。
  &.in     { @include opacity($tooltip-opacity); }
  &.top    { margin-top:  -3px; padding: $tooltip-arrow-width 0; } // $tooltip-arrow-width :5px !default
  &.right  { margin-left:  3px; padding: 0 $tooltip-arrow-width; }
  &.bottom { margin-top:   3px; padding: $tooltip-arrow-width 0; }
  &.left   { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
}
// 工具提示的内容的样式
.tooltip-inner {
  max-width: $tooltip-max-width; // 200px 默认
  padding: 3px 8px;
  color: $tooltip-color; // #fff 默认
  text-align: center;
  text-decoration: none;
  background-color: $tooltip-bg; // #000 默认
  border-radius: $border-radius-base; // 4px 默认
}
// 三角箭头公共样式
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
// 三角箭头定位；  块标签 + 0高宽 + boder 是三角样式的关键属性。
.tooltip {
  &.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  &.top-left .tooltip-arrow {
    bottom: 0;
    left: $tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  &.top-right .tooltip-arrow {
    bottom: 0;
    right: $tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
    border-top-color: $tooltip-arrow-color;
  }
  &.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
    border-right-color: $tooltip-arrow-color;
  }
  &.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -$tooltip-arrow-width;
    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-left-color: $tooltip-arrow-color;
  }
  &.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -$tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
  &.bottom-left .tooltip-arrow {
    top: 0;
    left: $tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
  &.bottom-right .tooltip-arrow {
    top: 0;
    right: $tooltip-arrow-width;
    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
    border-bottom-color: $tooltip-arrow-color;
  }
}

pagination.scss

源文：

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 //
// Pagination (翻页组件)
// --------------------------------------------------
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: $line-height-computed 0;
  border-radius: $border-radius-base;
  > li {
    display: inline; // 移除默认blobk属性和样式。
    > a,
    > span {
      position: relative;
      float: left; // 无内容时 该元素无法撑开
      padding: $padding-base-vertical $padding-base-horizontal;
      line-height: $line-height-base;
      text-decoration: none;
      color: $pagination-color;
      background-color: $pagination-bg;
      border: 1px solid $pagination-border;
      margin-left: -1px; // 消除双边距
    }
    &:first-child {
      > a,
      > span {
	margin-left: 0;
	@include border-left-radius($border-radius-base);
      }
    }
    &:last-child {
      > a,
      > span {
	@include border-right-radius($border-radius-base);
      }
    }
  }
  > li > a,
  > li > span {
    &:hover,
    &:focus {
      color: $pagination-hover-color; // $pagination-hover-color对应的值是链接文本颜色
      background-color: $pagination-hover-bg;
      border-color: $pagination-hover-border;
    }
  }
  // bootstrap绑定了 .pagination li >a 和 .pagination .active>a 和 .pagination .disabled>a 样式，好处是灵活dom结构，表示非li标签也能实现翻页样式。
  > .active > a,
  > .active > span {
    &, // 当前元素样式
    &:hover,
    &:focus {
      z-index: 2;
      color: $pagination-active-color;
      background-color: $pagination-active-bg;
      border-color: $pagination-active-border;
      cursor: default;
    }
  }
  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      color: $pagination-disabled-color;
      background-color: $pagination-disabled-bg;
      border-color: $pagination-disabled-border;
      cursor: $cursor-disabled;
    }
  }
}
// 分页样式尺寸
// --------------------------------------------------
// 调用pagination-size方法，传入四个参数，分别代表内横向内边距，纵向内边距，字号，边框线圆角
// 大号
.pagination-lg {
  @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large);
}
// 小号
.pagination-sm {
  @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $border-radius-small);
}

_pagination.scss

源文：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 // 用于分页的方法，接受四个参数，分别指定横向内边距，竖向内边距，字号，边框线圆角
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  > li {
    > a,
    > span {
      padding: $padding-vertical $padding-horizontal;
      font-size: $font-size;
    }
    &:first-child {
      > a,
      > span {
	@include border-left-radius($border-radius);
      }
    }
    &:last-child {
      > a,
      > span {
	@include border-right-radius($border-radius);
      }
    }
  }
}