[Bootstrap]全局样式（二）

具体排版

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-width: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>