一、版式排版
- 标题
- 页面主体
- 内联文本元素
- 对齐
- 改变大小写
- 缩略语
- 地址
- 引用
- 列表
- 描述
二、代码实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <mata http-equiv="X-UA-Compatible" content="IE=edge">
7 <link rel="stylesheet" href="css/bootstrap.css">
8 <script src="js/bootstrap.js"></script>
9 <script src="js/jquery.js"></script>
10 <title>bootstrap</title>
11 <style>
12 hr{
13 border: 1px solid gray;
14 }
15 </style>
16 </head>
17 <body>
18 <!-- 标题 -->
19 <h1>你好Bootstrap</h1>
20 <h2>你好Bootstrap</h2>
21 <h3>你好Bootstrap</h3>
22 <h4>你好Bootstrap</h4>
23 <h5>你好Bootstrap</h5>
24 <h6>你好Bootstrap</h6>
25 <hr>
26 <!-- 页面主体 通过添加.lead 类可以让段落突出显示-->
27 <p>这是页面主体</p>
28 <p class="lead">这是页面主体</p>
29 <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
30 <hr>
31 <!-- 内联文本元素 -->
32 <span>普通文本</span>
33 <mark>标记文本</mark>
34 <del>被删除的文本</del>
35 <s>无用文本</s>
36 <ins>插入文本</ins>
37 <u>带下划线的文本</u>
38 <span>普通文本</span><small>小号文本</small>
39 <strong>着重</strong>
40 <em>斜体</em>
41 <hr>
42 <!-- 对齐 -->
43 <p class="text-left">左对齐</p>
44 <p class="text-center">居中对齐</p>
45 <p class="text-right">右对齐</p>
46 <p class="text-justify">两端对齐</p>
47 <p class="text-nowrap">文本超出后不换行</p>
48 <hr>
49 <!-- 改变大小写 -->
50 <p class="text-lowercase">Lowercased text.</p>
51 <p class="text-uppercase">Uppercased text.</p>
52 <p class="text-capitalize">Capitalized text.</p>
53 <hr>
54 <!-- 缩略语 -->
55 <abbr title="attribute的缩写">attr</abbr>
56 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
57 <hr>
58 <!-- 地址 -->
59 <address>
60 <strong>Twitter, Inc.</strong><br>
61 1355 Market Street, Suite 900<br>
62 San Francisco, CA 94103<br>
63 <abbr title="Phone">P:</abbr> (123) 456-7890
64 </address>
65 <address>
66 <strong>Monica.zhao</strong><br>
67 <a href="mailto:#">first.last@example.com</a>
68 </address>
69 <hr>
70 <!-- 引用 -->
71 <blockquote>
72 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
73 </blockquote>
74 <blockquote class="blockquote-reverse">
75 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
76 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
77 </blockquote>
78 <hr>
79 <!-- 列表 -->
80 <ul>
81 <li>111</li>
82 <li>222</li>
83 <li>333</li>
84 </ul>
85 <br>
86 <ol>
87 <li>111</li>
88 <li>222</li>
89 <li>333</li>
90 </ol>
91 <br>
92 <ul class="list-unstyled">
93 <li>无样式列表</li>
94 <li>无样式列表</li>
95 </ul>
96 <br>
97 <ul class="list-inline">
98 <li>内联列表</li>
99 <li>内联列表</li>
100 </ul>
101 <br>
102 <!-- 描述 -->
103 <dl>
104 <dt>粗体标题1</dt>
105 <dd>标准描述性文字</dd>
106 </dl>
107 <dl>
108 <dt>粗体标题2</dt>
109 <dd>标准描述性文字</dd>
110 </dl>
111 <!-- 描述（水平排列） -->
112 <dl class="list-group-horizontal-sm">
113 <dt class="list-group-item">粗体标题1</dt>
114 <dd class="list-group-item">标准描述性文字,屏幕尺寸大于768显示</dd>
115 </dl>
116 </body>
117 </html>