具体排版
1、标题和标题类 <h1> ~<h6>和.h1~h6｜副标题<small>和.small
font-size margin-top margin-bottom
h1 36px 20px 10px
h2 30px 20px 10px
h3 24px 20px 10px
h4 18px 10px 10px
h5 14px 10px 10px
h6 12px 10px 10px
e.g.:<h*>这是标题<small>这是副标题</small></h*>
2、内容、p段落 font-size:14px; line-height:20px;margin-bottom:10px;
e.g.:<p>这是段落</p>
3、强调突出内容 .leader{margin-bottom:20px;font-size:16px(min-768:21px);font-weight:300;}
e.g.:<p class="leader">这是段落 突出显示</p>
4、标记文本<mark>和.mark {padding/background-color}
e.g.:<mark>这是标记文本</mark>||<* class="mark">这是已标记显示的文本</*>
5、删除的文本<del> 浏览器自带样式
e.g.:<del>这是删除的文本</del>
6、无用的文本<s> 浏览器自带样式
e.g.:<s>这是无用的文本</s>
7、插入的文本<ins> 浏览器自带样式
e.g.:<ins>这是插入的文本</ins>
8、带下划线文本<u> 浏览器自带样式
e.g.:<u>这是下划线的文本</u>
9、小号文本<small>和.small {font-size:85%;}
e.g.:<small>这是小号文本</small>||<* class="small">这是已小号显示的文本</*>
10、着重<strong> 浏览器自带样式 有语气
e.g.:<strong>这是着重的文本 加粗显示</strong>
11、斜体<em> 浏览器自带样式 有语气
e.g.:<em>这是着重的文本 斜体显示</em>
12、高亮文本<b> 浏览器自带样式 不带语气
e.g.:<b>这是加粗的文本</b>
13、斜体<i> 浏览器自带样式 不带语气 一般用于技术词汇、发言
e.g.:<i>这是斜体的文本</i>
14、文本对齐 .text-left .text-center .text-right .text-justify .text-nowrap
e.g.:<p class="text-left">文本左对齐</p>||<p class="text-center">文本居中对齐</p>||<p class="text-right">文本右对齐</p>||<p class="text-justify">文本两端对齐</p>||<p class="text-nowrap>文本禁止换行</p>
15、字母大小写 .text-lowercase .text-uppercase .text-capitalized
e.g.:<p class="text-lowercase">字母转换小写显示<p>||<p class="text-uppercase">字母转换大写显示<p>||<p class="text-capitalized">字母首字母大写显示<p>
16、缩略语 <abbr title=””> {cursor/border-bottom}
e.g.:<abbr>提示文本 鼠标经过显示title内容</abbr>
17、首字母缩略语 <abbr title .initialism> {font-size:90%/uppercase}
e.g.:<p><abbr class="initialism">首字母内容</abbr>首字母后面内容</p>
18、地址 <address> {font-style}
e.g.:<address>姓名<br/>地址<br>号码</address> 一般配合<br />使用
19、引用 <blockquote> {padding/font-size/border-left}
e.g.:<blockquote><p>这是引用文本</p></blockqoute> 直接引用一般配合<p>使用
20、引用＋命名来源 <footer> <cite>
e.g.:<blockquote>这是引用文本<footer>这是引用来源描述<cite>这是引用名称</cite></footer></blockquote>
21、引用反向风格 .blockquote-reverse
e.g.:<blockquote class="blockquote-reverse">这是引用文本<footer>这是引用来源描述<cite>这是引用名称</cite></footer></blockquote> 右对齐显示
22、无序列表 <ul> {margin-top/margin-bottom}
e.g.:<ul><li>这是无序列表内容</li></ul>
23、有序列表 <ol> {margin-top/margin-bottom}
e.g.:<ol><li>这是有序列表内容</li></ol>
24、无样式列表 .list-unstyled {padding-left/list-style}
e.g.:<ul class="list-unstyled"><li>这是无序列表 层叠默认样式显示</li></ul>||<ol class="list-unstyled"><li>这是有序列表 层叠默认样式显示</li></ol>
25、内联样式 .list-inline {padding-left/margin-left/list-style} {display/padding}
e.g.:<ul class="list-inline "><li>这是无序列表 一行显示</li></ul>||<ol class="list-inline "><li>这是有序列表 一行显示</li></ol>
26、定义列表 <dl> {margin-top/margin-bottom} {font-weight} {margin-left}
e.g.:<dl><dt>定义标题</dt><dd>定义内容</dd></dl>
27、定义列表水平排列 .dl-horizontal
e.g.:<dl class="dl-horizontal"><dt>定义标题</dt><dd>定义内容</dd></dl> 标题和内容在一行显示
28、代码 <code> {padding/font-size/color/background-color/border-radius}
e.g.:<code>代码片段</code> 特殊字符一般以字符实体表示
29、用户输入 <kbd> {padding/font-size/color/background-color/border-radius /box-shadow}
e.g.:<kbd>键盘输入的内容</kbd>
30、代码块 <pre> {padding/margin/font-size/color/background-color/word-break/word-wrap/border/border-radius}
e.g.:<pre>代码块内容</pre> 特殊字符一般以字符实体表示
31、变量 <var> 浏览器自带样式
e.g.:<var>程序中的变量</var>
32、程序输出 <samp> {font-family}
e.g.:<samp>程序输出的内容</samp>