深度了解bootstrap源码之sass篇(十三)

前言

这一章主要学习print(当前是打印预览模式的打印页样式)。

研究对象

print.scss;bootstrap的初始化依赖样式表有三个、分别是normalize、print、glyphicons。normalize标签标准化,print打印预览页模式样式,glyphicons字体图标规范。

源文:

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
100
101
102
103
104
105
106
107
108
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
// ==========================================================================
// Print styles.
// 内联函数 避免额外的http请求
// ==========================================================================
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; // 黑色字访问输出更快
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")"; // 字面理解是 获取href的值。但是我印象里sass没有attr函数啊
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// 不显示片段标识符的链接,
// 或者使用'javascript':伪协议
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote { // blockquote标签拥有浏览器默认样式,包含(外边距和标记了块元素)
border: 1px solid #999;
page-break-inside: avoid; // 避免在元素内部插入分页符。该属性仅支持Oprea,默认值为auto(允许元素内部插入分页符),还有一个值是inherid.
}
thead { // 定义表格的表头,通常和tbody,tfood配合使用
display: table-header-group; // 注②,作为一个或多个行的分组来显示:h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 { // 一下俩属性都是打印(print)属性
orphans: 3; // 当元素内部发生分页时必须在页面底部保留最少3行。
widows: 3; // 当元素内部发生分页时必须在页面顶部保留最少3行
}
h2,
h3 {
page-break-after: avoid;
}
// Bootstrap组件在print模式下的调整
//
// 有关chorme样式修复链接://github.com/twbs/bootstrap/issues/11245
// 一旦确定,这段样式会被删除
select {
background: #fff !important;
}
// Bootstrap 组件样式调整
.navbar {
display: none;
}
.btn,
.dropup > .btn {
> .caret {
border-top-color: #000 !important;
}
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
td,
th {
background-color: #fff !important;
}
}
.table-bordered {
th,
td {
border: 1px solid #ddd !important;
}
}
// 调整结束
}

相关说明

  • 注①: media 属性
    • html的style下用法: media = “print”
    • css的style下用法: @media print {}
    • media有以下值:
      • screen 计算机屏幕(默认值)。
      • tty 电传打字机以及使用等宽字符网格的类似媒介。
      • tv 电视类型设备(低分辨率、有限的屏幕翻滚能力)。
      • projection 放映机。
      • handheld 手持设备(小屏幕、有限的带宽)。
      • print 打印预览模式 / 打印页。
      • braille 盲人用点字法反馈设备。
      • aural 语音合成器。
      • all 适合所有设备。
  • 注②:全面了解display属性值