深度了解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属性值