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

发表于

前言

这一章主要学习breadcrumb和close和Code。这三分组件的代码量较少，易读。

研究对象

  • breadcrumb（路径导航）
  • close（关闭图标）

  • Code （pre、kbd、code标签）

    实例图及作用域

    通常用于表示当前页面在导航结构中的所处层次。

close实例图

Code实例图

标签，inline和block类型都可以。为了正确的展示代码，要将尖括号做转义处理。

标签，inline类型，用于键盘输入表示。

标签，inline类型，用于展示单行代码

bootstrap里还有和标签，分别用于显示变量代码和程序输出。

源文：

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
//
// 路径导航
// --------------------------------------------------
.breadcrumb {
  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
  margin-bottom: $line-height-computed;//注① 
  list-style: none;
  background-color: $breadcrumb-bg;
  border-radius: $border-radius-base;
  > li {
	display: inline-block;
	+ li:before {
	  content: "#{$breadcrumb-separator}\00a0"; //注②： content属性要使用Unicode编码才能显示出想要的"/"字符。#{}：调用带引号的字符串
	  padding: 0 5px;
	  color: $breadcrumb-color;
	}
  }
  > .active {
	color: $breadcrumb-active-color;
  }
}

close.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
//
// 关闭图标
// --------------------------------------------------
.close {
  float: right;
  font-size: ($font-size-base * 1.5);
  font-weight: $close-font-weight;
  line-height: 1; //精准定位的技巧，font-size为文本size的1.5倍，float影响了行高的定位，设置值为1。巧妙的定位在文本中间。
  color: $close-color;
  text-shadow: $close-text-shadow;
  @include opacity(.2);
  &:hover,
  &:focus {
    color: $close-color;
    text-decoration: none;
    cursor: pointer;
    @include opacity(.5);
  }
  // bootstrap将close和按钮下的close分离了出来。
}
// 按钮下的close需要额外一些属性值
// IOS下的按钮元素会替换锚点定位标签，如果需要锚点定位文本，则需要属性`href="#"`.
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

code.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
 //
// Code (inline类型、block类型)
// --------------------------------------------------
// inline-block
code,
kbd,
pre,
samp {
  font-family: $font-family-monospace;
}
// code样式 用于inline 
code {
  padding: 2px 4px;
  font-size: 90%;
  color: $code-color;
  background-color: $code-bg;
  border-radius: $border-radius-base;
}
// kbd样式 用于inline
kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: $kbd-color;
  background-color: $kbd-bg;
  border-radius: $border-radius-small;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  kbd {
    padding: 0;
    font-size: 100%;
    font-weight: bold;
    box-shadow: none;
  }
}
// pre样式 用于block
pre {
  display: block;
  padding: (($line-height-computed - 1) / 2);
  margin: 0 0 ($line-height-computed / 2);
  font-size: ($font-size-base - 1); // 14px to 13px
  line-height: $line-height-base;
  word-break: break-all;
  word-wrap: break-word;
  color: $pre-color;
  background-color: $pre-bg;
  border: 1px solid $pre-border-color;
  border-radius: $border-radius-base;
  // 用于多行代码
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap; //正常换行、保留空白
    background-color: transparent;
    border-radius: 0;
  }
}
// 可横向滚动的代码块。
.pre-scrollable {
  max-height: $pre-scrollable-max-height; //默认340px
  overflow-y: scroll; // 支持横向滚动
}

相关说明

  • 注①：
    • 行高默认值计算方式： floor(($font-size-base * $line-height-base)) !default;
    • floor(),向下取整。
    • $font-size-base为14px 默认
    • $line-height-base为 1.428571429 默认
    • 变量$line-height-computed用于设置margin值、padding值。
  • 注②：
    • #{} 用于调用带引号的字符串；
    • \00a0是Unicode编码。