bootstrap之文本排版

释放双眼，带上耳机，听听看~！

首先要知道：

bootstrap4.x默认
font-size:16px,line-height:1.5,font-family:"Helvetica Neue",Helvetica, Arial, sans-serif
所有的 <p> 元素
margin-top: 0 、 margin-bottom: 1rem (16px)。

head头部分


1
2
3
4
5
6
7
8
9
10
11
12
13
1&lt;head&gt;

2&lt;meta charset=&quot;utf-8&quot;&gt;

3&lt;!--为了保证HTML页面在移动设备上进行合适的绘制和触屏缩放，在&lt;head.../&gt;元素中添加viewport元数据标签--&gt;

4&lt;!--width=device-width 表示宽度是设备屏幕的宽度,initial-scale=1 表示初始的缩放比例,shrink-to-fit=no 

5自动适应手机屏幕的宽度--&gt;

6&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,shrink-to-fit=no&quot;&gt;

7&lt;title&gt;文字排版1&lt;/title&gt;

8&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../../../bootstrap-4.1.3-dist/css/bootstrap.min.css&quot;&gt;

9&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-2.2.4.min.js&quot;&gt;&lt;/script&gt;

10&lt;script type=&quot;text/javascript&quot; src=&quot;../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js&quot;&gt;&lt;/script&gt;

11&lt;script type=&quot;text/javascript&quot; src=&quot;../../../bootstrap-4.1.3-dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

12&lt;/head&gt;

13

1、<h1>—<h6>
bootstrap<定义所有的HTML标题（h1 到 h6）的样式规则

margin-bottom:0.5rem;font-weight:500;line-height:1.2;


1
2
3
4
5
6
7
8
9
1&lt;div class=&quot;container&quot;&gt;

2   &lt;h1&gt;h1(2.5rem = 40px)&lt;/h1&gt;

3   &lt;h2&gt;h2(2rem = 32px)&lt;/h2&gt;

4   &lt;h3&gt;h3(1.75rem = 28px)&lt;/h3&gt;

5   &lt;h4&gt;h4(1.5rem = 24px)&lt;/h4&gt;

6   &lt;h5&gt;h5(1.25rem = 20px)&lt;/h5&gt;

7   &lt;h6&gt;h6(1rem = 16px)&lt;/h6&gt;

8&lt;/div&gt;

9

bootstrap之文本排版

2、Display 标题类
.display-1, .display-2, .display-3, .display-4共四个控制标题的样式-

font-weight:300;line-height:1.2;


1
2
3
4
5
6
7
8
9
1&lt;div class=&quot;container&quot;&gt;

2   &lt;p&gt;Display 标题可以输出更大更粗的字体样式&lt;/p&gt;

3   &lt;h4&gt;标题（0）&lt;/h4&gt;

4   &lt;h4 class=&quot;display-1&quot;&gt;标题（6rem）&lt;/h4&gt;

5   &lt;h4 class=&quot;display-2&quot;&gt;标题（5.5rem）&lt;/h4&gt;

6   &lt;h4 class=&quot;display-3&quot;&gt;标题（4.5rem）&lt;/h4&gt;

7   &lt;h4 class=&quot;display-4&quot;&gt;标题（3.5rem）&lt;/h4&gt;

8&lt;/div&gt;

9

bootstrap之文本排版

3、<small…/>
用于创建字号更小的颜色更浅的文本
font-size:80%;font-weight:400;

bootstrap之文本排版

4、<!–<mark…/>–>

<!–用于显示HTML页面中需要重点“关注”的内容 –>
<!–padding:0.2em;background-color:\#fcf8e3;–>

bootstrap之文本排版

5、<!–<abbr…/>–>

<!–用于表示一个缩写–>
<!–cursor:help;–>

bootstrap之文本排版

6、<blockquote…/>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1&lt;!--&lt;blockquote.../&gt;--&gt;

2&lt;!--用于定义一段长的引用文本--&gt;

3&lt;!--margin:0 0 1rem 0;line-height:1.5;--&gt;

4&lt;!--.blockquote--&gt;

5&lt;!--margin-bottom:1rem;font-size:1.25rem;--&gt;

6&lt;!--.blockquote-footer--&gt;

7&lt;!--display:block;font-size:80%;color:#6c757d;--&gt;

8&lt;div class=&quot;container&quot;&gt;

9  &lt;h3&gt;Blockquotes&lt;/h3&gt;

10  &lt;p&gt;The blockquote element is used to present content from another source:&lt;/p&gt;

11  &lt;blockquote class=&quot;blockquote&quot;&gt;

12    &lt;p&gt;For 50 years, WWF has been protecting the future of nature. The world&#x27;s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.&lt;/p&gt;

13    &lt;footer class=&quot;blockquote-footer&quot;&gt;From WWF&#x27;s website&lt;/footer&gt;

14  &lt;/blockquote&gt;

15&lt;/div&gt;

16

bootstrap之文本排版

7、<dl>


1
2
3
4
5
6
7
8
9
10
11
1&lt;!--&lt;dl&gt;--&gt;

2&lt;!--dt{font-weight:700;}，dd{margin-left:0;margin-bottom:0.5rem;}--&gt;

3&lt;div class=&quot;container&quot;&gt;

4   &lt;dl&gt;

5       &lt;dt&gt;Coffee&lt;/dt&gt;

6       &lt;dd&gt;- black hot drink&lt;/dd&gt;

7       &lt;dt&gt;Milk&lt;/dt&gt;

8       &lt;dd&gt;- white cold drink&lt;/dd&gt;

9   &lt;/dl&gt;

10&lt;/div&gt;

11

bootstrap之文本排版

8、<code…/>


1
2
3
4
5
6
7
8
9
10
11
1&lt;!--&lt;code.../&gt;--&gt;

2&lt;!--用于表示一段计算机代码--&gt;

3&lt;!--font-size: 87.5%;color: #e83e8c;word-break: break-word;--&gt;

4&lt;div class=&quot;container&quot;&gt;

5   &lt;p&gt;

6       java的输出语句，例如:

7       &lt;code&gt;System.out.println(&quot;这是一条语句&quot;);&lt;/code&gt;

8       或&lt;code&gt;System.out.print(&quot;这是一条语句&quot;);&lt;/code&gt;

9   &lt;/p&gt;

10&lt;/div&gt;

11

bootstrap之文本排版

9、<kbd…/>


1
2
3
4
5
6
7
8
9
1&lt;!--&lt;kbd.../&gt;--&gt;

2&lt;!--用于定义键盘文本--&gt;

3&lt;!--padding:0.2rem 0.4rem;font-size:87.5%;color:#fff;background-color:#212529;

4border-radius:0.2rem;--&gt;

5&lt;div class=&quot;container&quot;&gt;

6   &lt;p&gt;下面是一段键盘文本&lt;/p&gt;

7   &lt;p&gt;(1)、&lt;kbd&gt;abcdefg&lt;/kbd&gt;&lt;/p&gt;

8&lt;/div&gt;

9

bootstrap之文本排版

10、<pre…/>


1
2
3
4
5
6
7
8
9
10
11
12
1&lt;!--&lt;pre.../&gt;--&gt;

2&lt;!--pre元素所包含文本的空格、回车、Tab键和其他格式字符都会被保留下来--&gt;

3&lt;!--display: block;font-size: 87.5%;color: #212529;

4margin-top: 0;margin-bottom: 1rem;overflow: auto;--&gt;

5&lt;div class=&quot;container&quot;&gt;

6   &lt;pre&gt;

7       int i=1;

8       i++;

9       System.out.print(i);

10  &lt;/pre&gt;

11&lt;/div&gt;

12

bootstrap之文本排版

11、其他

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
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
1&lt;!--其他--&gt;

2&lt;div class=&quot;container&quot;&gt;

3&lt;!--参照--&gt;

4   &lt;p&gt;参照物&lt;/p&gt;

5&lt;!--font-weight-normal,普通文本,font-weight:400;--&gt;

6   &lt;p class=&quot;font-weight-normal&quot;&gt;普通文本&lt;/p&gt;

7&lt;!--font-weight-bold,加粗文本,font-weight:700;--&gt;

8   &lt;p class=&quot;font-weight-bold&quot;&gt;加粗文本&lt;/p&gt;

9&lt;!--font-weight-light，更细文本,font-weight:300;--&gt;

10  &lt;p class=&quot;font-weight-light&quot;&gt;更细文本&lt;/p&gt;

11&lt;!--font-italic,斜体文本,font-style:italic;--&gt;

12  &lt;p class=&quot;font-italic&quot;&gt;斜体文本&lt;/p&gt;

13  &lt;p class=&quot;lead&quot;&gt;让段落更突出&lt;/p&gt;

14  &lt;p class=&quot;small&quot;&gt;指定更小的文本（父元素的85%）&lt;/p&gt;

15  &lt;p class=&quot;text-left&quot;&gt;左对齐&lt;/p&gt;

16  &lt;p class=&quot;text-center&quot;&gt;居中&lt;/p&gt;

17  &lt;p class=&quot;text-right&quot;&gt;右对齐&lt;/p&gt;

18  &lt;p class=&quot;text-justify&quot;&gt;设定文本对齐，段落中超出屏幕部分文字自动换行&lt;/p&gt;

19  &lt;p class=&quot;text-nowrap&quot;&gt;段落中超出屏幕部分不换行&lt;/p&gt;

20  &lt;p class=&quot;text-lowercase&quot;&gt;设定文本小写 JavaScript&lt;/p&gt;

21  &lt;p class=&quot;text-uppercase&quot;&gt;设定文本大写 JavaScript&lt;/p&gt;

22  &lt;p class=&quot;text-capitalize&quot;&gt;设定单词首字母大写 javascript&lt;/p&gt;

23  &lt;p&gt;

24      &lt;h4&gt;显示在&lt;abbr&gt;元素中的文本以小号字体(90%)展示，且可以将小写字母转换为大写字母&lt;/h4&gt;

25      &lt;abbr title=&quot;World Health Organization&quot;&gt;WHo&lt;/abbr&gt;&lt;br/&gt;

26      &lt;abbr title=&quot;World Health Organization&quot; class=&quot;initialism&quot;&gt;WHo&lt;/abbr&gt;

27  &lt;/p&gt;

28  &lt;p&gt;

29      &lt;h4&gt;移除默认的列表样式，列表项中左对齐(&lt;ul&gt; 和&lt;ol&gt;中)。&lt;br/&gt;这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)&lt;/h4&gt;

30      &lt;ul class=&quot;list-unstyled&quot;&gt;

31          &lt;li&gt;HTML、HTML5&lt;/li&gt;

32          &lt;li&gt;CSS、CSS3&lt;/li&gt;

33          &lt;li&gt;JavaScript&lt;/li&gt;

34      &lt;/ul&gt;

35  &lt;/p&gt;

36  &lt;p&gt;

37      &lt;h4&gt;将所有列表项放置同一行&lt;/h4&gt;

38      &lt;ol class=&quot;list-inline&quot;&gt;

39          &lt;li class=&quot;list-inline-item&quot;&gt;HTML、HTML5&lt;/li&gt;

40          &lt;li class=&quot;list-inline-item&quot;&gt;CSS、CSS3&lt;/li&gt;

41          &lt;li class=&quot;list-inline-item&quot;&gt;JavaScript&lt;/li&gt;

42      &lt;/ol&gt;

43  &lt;/p&gt;

44  &lt;p&gt;

45      &lt;h4&gt;使&lt;pre&gt;元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条&lt;/h4&gt;

46      &lt;pre class=&quot;pre-scrollable&quot;&gt;

47Code

48

49For multiple lines of code, use the pre element:

50

51Text in a pre element

52  is displayed in a fixed-width

53  font, and it preserves

54  both      spaces and

55  line breaks.

56

57If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:

58

59Text in a pre element

60  is displayed in a fixed-width

61  font, and it preserves

62  both      spaces and

63  line breaks.

64&lt;/pre&gt;

65  &lt;/p&gt;

66

源代码：


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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
1&lt;!doctype html&gt;

2&lt;html&gt;

3&lt;head&gt;

4&lt;meta charset=&quot;utf-8&quot;&gt;

5&lt;!--为了保证HTML页面在移动设备上进行合适的绘制和触屏缩放，在&lt;head.../&gt;元素中添加viewport元数据标签--&gt;

6&lt;!--width=device-width 表示宽度是设备屏幕的宽度,initial-scale=1 表示初始的缩放比例,shrink-to-fit=no 

7自动适应手机屏幕的宽度--&gt;

8&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,shrink-to-fit=no&quot;&gt;

9&lt;title&gt;文字排版1&lt;/title&gt;

10&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;../../../bootstrap-4.1.3-dist/css/bootstrap.min.css&quot;&gt;

11&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-2.2.4.min.js&quot;&gt;&lt;/script&gt;

12&lt;script type=&quot;text/javascript&quot; src=&quot;../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js&quot;&gt;&lt;/script&gt;

13&lt;script type=&quot;text/javascript&quot; src=&quot;../../../bootstrap-4.1.3-dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

14&lt;/head&gt;

15&lt;!--bootstrap4默认font-size:16px,line-height:1.5,

16font-family:&quot;Helvetica Neue&quot;,Helvetica, Arial, sans-serif

17所有的 &lt;p&gt; 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

18--&gt;

19&lt;body&gt;

20&lt;!--&lt;h1&gt;-&lt;h6&gt;--&gt;

21&lt;!--定义所有的HTML标题（h1 到 h6）的样式规则--&gt;

22&lt;!--margin-bottom:0.5rem;font-weight:500;line-height:1.2;--&gt;

23&lt;div class=&quot;container&quot;&gt;

24  &lt;h1&gt;h1(2.5rem = 40px)&lt;/h1&gt;

25  &lt;h2&gt;h2(2rem = 32px)&lt;/h2&gt;

26  &lt;h3&gt;h3(1.75rem = 28px)&lt;/h3&gt;

27      &lt;h4&gt;h4(1.5rem = 24px)&lt;/h4&gt;

28      &lt;h5&gt;h5(1.25rem = 20px)&lt;/h5&gt;

29      &lt;h6&gt;h6(1rem = 16px)&lt;/h6&gt;

30&lt;/div&gt;

31&lt;!--Display 标题类--&gt;

32&lt;!-- .display-1, .display-2, .display-3, .display-4共四个控制标题的样式--&gt;

33&lt;!--font-weight:300;line-height:1.2;--&gt;

34&lt;div class=&quot;container&quot;&gt;

35  &lt;p&gt;Display 标题可以输出更大更粗的字体样式&lt;/p&gt;

36  &lt;h4&gt;标题（0）&lt;/h4&gt;

37  &lt;h4 class=&quot;display-1&quot;&gt;标题（6rem）&lt;/h4&gt;

38  &lt;h4 class=&quot;display-2&quot;&gt;标题（5.5rem）&lt;/h4&gt;

39  &lt;h4 class=&quot;display-3&quot;&gt;标题（4.5rem）&lt;/h4&gt;

40  &lt;h4 class=&quot;display-4&quot;&gt;标题（3.5rem）&lt;/h4&gt;

41&lt;/div&gt;

42&lt;!--&lt;small.../&gt;--&gt;

43&lt;!--用于创建字号更小的颜色更浅的文本--&gt;

44&lt;!--font-size:80%;font-weight:400;--&gt;

45&lt;div class=&quot;container&quot;&gt;

46  &lt;h3&gt;文本（0）&lt;/h3&gt;

47  &lt;h3&gt;&lt;small&gt;文本22.4px;（font-size:80%;）&lt;/small&gt;&lt;/h3&gt;

48  &lt;small&gt;文本12.8px;（font-size:80%;）&lt;/small&gt;

49&lt;/div&gt;

50&lt;!--&lt;mark.../&gt;--&gt;

51&lt;!--用于显示HTML页面中需要重点“关注”的内容 --&gt;

52&lt;!--padding:0.2em;background-color:#fcf8e3;--&gt;

53&lt;div class=&quot;container&quot;&gt;

54  &lt;h4&gt;高亮显示&lt;/h4&gt;

55  &lt;p&gt;本网页是为了演示&lt;mark&gt;文本排版&lt;/mark&gt;&lt;/p&gt;

56&lt;/div&gt;

57&lt;!--&lt;abbr.../&gt;--&gt;

58&lt;!--用于表示一个缩写--&gt;

59&lt;!--cursor:help;--&gt;

60&lt;div class=&quot;container&quot;&gt;

61  &lt;p&gt;本网页是为了演示&lt;abbr title=&quot;text layout&quot;&gt;文本排版&lt;/abbr&gt;&lt;/p&gt;

62&lt;/div&gt;

63&lt;!--&lt;blockquote.../&gt;--&gt;

64&lt;!--用于定义一段长的引用文本--&gt;

65&lt;!--margin:0 0 1rem 0;line-height:1.5;--&gt;

66&lt;!--.blockquote--&gt;

67&lt;!--margin-bottom:1rem;font-size:1.25rem;--&gt;

68&lt;!--.blockquote-footer--&gt;

69&lt;!--display:block;font-size:80%;color:#6c757d;--&gt;

70&lt;div class=&quot;container&quot;&gt;

71  &lt;h3&gt;Blockquotes&lt;/h3&gt;

72  &lt;p&gt;The blockquote element is used to present content from another source:&lt;/p&gt;

73  &lt;blockquote class=&quot;blockquote&quot;&gt;

74    &lt;p&gt;For 50 years, WWF has been protecting the future of nature. The world&#x27;s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.&lt;/p&gt;

75    &lt;footer class=&quot;blockquote-footer&quot;&gt;From WWF&#x27;s website&lt;/footer&gt;

76  &lt;/blockquote&gt;

77&lt;/div&gt;

78&lt;!--&lt;dl&gt;--&gt;

79&lt;!--dt{font-weight:700;}，dd{margin-left:0;margin-bottom:0.5rem;}--&gt;

80&lt;div class=&quot;container&quot;&gt;

81  &lt;dl&gt;

82      &lt;dt&gt;Coffee&lt;/dt&gt;

83      &lt;dd&gt;- black hot drink&lt;/dd&gt;

84      &lt;dt&gt;Milk&lt;/dt&gt;

85      &lt;dd&gt;- white cold drink&lt;/dd&gt;

86  &lt;/dl&gt;

87&lt;/div&gt;

88&lt;!--&lt;code.../&gt;--&gt;

89&lt;!--用于表示一段计算机代码--&gt;

90&lt;!--font-size: 87.5%;color: #e83e8c;word-break: break-word;--&gt;

91&lt;div class=&quot;container&quot;&gt;

92  &lt;p&gt;

93      java的输出语句，例如:

94      &lt;code&gt;System.out.println(&quot;这是一条语句&quot;);&lt;/code&gt;

95      或&lt;code&gt;System.out.print(&quot;这是一条语句&quot;);&lt;/code&gt;

96  &lt;/p&gt;

97&lt;/div&gt;

98&lt;!--&lt;kbd.../&gt;--&gt;

99&lt;!--用于定义键盘文本--&gt;

100&lt;!--padding:0.2rem 0.4rem;font-size:87.5%;color:#fff;background-color:#212529;

101border-radius:0.2rem;--&gt;

102&lt;div class=&quot;container&quot;&gt;

103 &lt;p&gt;下面是一段键盘文本&lt;/p&gt;

104 &lt;p&gt;(1)、&lt;kbd&gt;abcdefg&lt;/kbd&gt;&lt;/p&gt;

105&lt;/div&gt;

106&lt;!--&lt;pre.../&gt;--&gt;

107&lt;!--pre元素所包含文本的空格、回车、Tab键和其他格式字符都会被保留下来--&gt;

108&lt;!--display: block;font-size: 87.5%;color: #212529;

109margin-top: 0;margin-bottom: 1rem;overflow: auto;--&gt;

110&lt;div class=&quot;container&quot;&gt;

111 &lt;pre&gt;

112     int i=1;

113     i++;

114     System.out.print(i);

115 &lt;/pre&gt;

116&lt;/div&gt;

117&lt;!--其他--&gt;

118&lt;div class=&quot;container&quot;&gt;

119&lt;!--参照--&gt;

120 &lt;p&gt;参照物&lt;/p&gt;

121&lt;!--font-weight-normal,普通文本,font-weight:400;--&gt;

122 &lt;p class=&quot;font-weight-normal&quot;&gt;普通文本&lt;/p&gt;

123&lt;!--font-weight-bold,加粗文本,font-weight:700;--&gt;

124 &lt;p class=&quot;font-weight-bold&quot;&gt;加粗文本&lt;/p&gt;

125&lt;!--font-weight-light，更细文本,font-weight:300;--&gt;

126 &lt;p class=&quot;font-weight-light&quot;&gt;更细文本&lt;/p&gt;

127&lt;!--font-italic,斜体文本,font-style:italic;--&gt;

128 &lt;p class=&quot;font-italic&quot;&gt;斜体文本&lt;/p&gt;

129 &lt;p class=&quot;lead&quot;&gt;让段落更突出&lt;/p&gt;

130 &lt;p class=&quot;small&quot;&gt;指定更小的文本（父元素的85%）&lt;/p&gt;

131 &lt;p class=&quot;text-left&quot;&gt;左对齐&lt;/p&gt;

132 &lt;p class=&quot;text-center&quot;&gt;居中&lt;/p&gt;

133 &lt;p class=&quot;text-right&quot;&gt;右对齐&lt;/p&gt;

134 &lt;p class=&quot;text-justify&quot;&gt;设定文本对齐，段落中超出屏幕部分文字自动换行&lt;/p&gt;

135 &lt;p class=&quot;text-nowrap&quot;&gt;段落中超出屏幕部分不换行&lt;/p&gt;

136 &lt;p class=&quot;text-lowercase&quot;&gt;设定文本小写 JavaScript&lt;/p&gt;

137 &lt;p class=&quot;text-uppercase&quot;&gt;设定文本大写 JavaScript&lt;/p&gt;

138 &lt;p class=&quot;text-capitalize&quot;&gt;设定单词首字母大写 javascript&lt;/p&gt;

139 &lt;p&gt;

140     &lt;h4&gt;显示在&lt;abbr&gt;元素中的文本以小号字体(90%)展示，且可以将小写字母转换为大写字母&lt;/h4&gt;

141     &lt;abbr title=&quot;World Health Organization&quot;&gt;WHo&lt;/abbr&gt;&lt;br/&gt;

142     &lt;abbr title=&quot;World Health Organization&quot; class=&quot;initialism&quot;&gt;WHo&lt;/abbr&gt;

143 &lt;/p&gt;

144 &lt;p&gt;

145     &lt;h4&gt;移除默认的列表样式，列表项中左对齐(&lt;ul&gt; 和&lt;ol&gt;中)。&lt;br/&gt;这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)&lt;/h4&gt;

146     &lt;ul class=&quot;list-unstyled&quot;&gt;

147         &lt;li&gt;HTML、HTML5&lt;/li&gt;

148         &lt;li&gt;CSS、CSS3&lt;/li&gt;

149         &lt;li&gt;JavaScript&lt;/li&gt;

150     &lt;/ul&gt;

151 &lt;/p&gt;

152 &lt;p&gt;

153     &lt;h4&gt;将所有列表项放置同一行&lt;/h4&gt;

154     &lt;ol class=&quot;list-inline&quot;&gt;

155         &lt;li class=&quot;list-inline-item&quot;&gt;HTML、HTML5&lt;/li&gt;

156         &lt;li class=&quot;list-inline-item&quot;&gt;CSS、CSS3&lt;/li&gt;

157         &lt;li class=&quot;list-inline-item&quot;&gt;JavaScript&lt;/li&gt;

158     &lt;/ol&gt;

159 &lt;/p&gt;

160 &lt;p&gt;

161     &lt;h4&gt;使&lt;pre&gt;元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条&lt;/h4&gt;

162     &lt;pre class=&quot;pre-scrollable&quot;&gt;

163Code

164

165For multiple lines of code, use the pre element:

166

167Text in a pre element

168  is displayed in a fixed-width

169  font, and it preserves

170  both      spaces and

171  line breaks.

172

173If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:

174

175Text in a pre element

176  is displayed in a fixed-width

177  font, and it preserves

178  both      spaces and

179  line breaks.

180&lt;/pre&gt;

181 &lt;/p&gt;

182&lt;/div&gt;

183&lt;/body&gt;

184&lt;/html&gt;

185

186

结果：

bootstrap之文本排版

{{userData.name}}已认证

bootstrap之文本排版

源代码：

BASH脚本

C++ 高性能服务器网络框架设计细节

{{userData.name}}已认证

源代码：

Related posts:

BASH脚本

C++ 高性能服务器网络框架设计细节

JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

javascript中的null,空串和undefined

JavaScript内置对象

当 Rust 遇上 Fedora