Bootstrap（二）：CSS--排版
1.标题 : <h1>、<h2> …… <h6> & <small>
<h1>h1. Bootstrap <small> heading </small></h1> <h2>h2. Bootstrap <small> heading </small></h2> <h3>h3. Bootstrap <small> heading </small></h3> <h4>h4. Bootstrap <small> heading </small></h4> <h5>h5. Bootstrap <small> heading </small></h5> <h6>h6. Bootstrap <small> heading </small></h6>
2.页面主体
字体格式为14PX、行高1.428、<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）；
4.中心内容 : .lead
<p>Nullam quis risus ...... vehicula.</p> <p>Cum sociis natoque ...... fringilla.</p> <p class="lead"> Maecenas ...... nec elit.</p> <p>Maecenas ...... io sem nec elit.</p>
5.内联文本元素 <mark>
<p>You can use the mark tag to highlight text.</p> <p>You can use the mark tag to highlight text.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p>You can use the mark tag to highlight text.</p> <p>You can use the mark tag to highlight text.</p>
6.被删除的文本 <del>
<p>This line of text is meant to be treated as deleted text.</p> <p>This line of text is meant to be treated as deleted text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p>This line of text is meant to be treated as deleted text.</p> <p>This line of text is meant to be treated as deleted text.</p> <p>This line of text is meant to be treated as deleted text.</p>
7.无用文本 ： <s>
? --> 无用文本<s>与被删除文本<del>有什么区别呢？
<p>This line of text is meant to be treated as no longer accurate.</p> <p>This line of text is meant to be treated as no longer accurate.</p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p>This line of text is meant to be treated as no longer accurate.</p> <p>This line of text is meant to be treated as no longer accurate.</p>
8.插入文本 ： <ins>
<p>This line of text is meant to be treated as an addition to the document.</p> <p>This line of text is meant to be treated as an addition to the document.</p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p>This line of text is meant to be treated as an addition to the document.</p> <p>This line of text is meant to be treated as an addition to the document.</p>
9.带下划线的文本 <u>
<p>This line of text will render as underlined</p> <p>This line of text will render as underlined</p> <p><u>This line of text will render as underlined</u></p> <p>This line of text will render as underlined</p> <p>This line of text will render as underlined</p>
10.小号文本<small>
<p>This line of text is meant to be treated as fine print.</p> <p>This line of text is meant to be treated as fine print.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p>This line of text is meant to be treated as fine print.</p> <p>This line of text is meant <small>to be treated as</small> fine print.</p>
11.着重文字 ： <strong>
<p>The following snippet of text is rendered as bold text.</p> <p>The following snippet of text is rendered as bold text.</p> <p>The following snippet of text is <strong>rendered as bold text.</strong></p> <p>The following snippet of text is rendered as bold text.</p> <p>The following snippet of text is rendered as bold text.</p>
12.斜体 ： <em>
<p>The following snippet of text is rendered as italicized text.</p> <p>The following snippet of text is rendered as italicized text.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>The following snippet of text is rendered as italicized text.</p> <p>The following snippet of text is rendered as italicized text.</p>
13.文本对齐 ： CSS --> text-left、text-center、text-right、text-justify、text-nowrap
<!-- 左对齐 --> <p class="text-left text-warning" >这段文字居中对齐:Shanghai is the largest city by population in the People's Republic of China (PRC)
and the largest city proper by population in the world. It is one of the four province-level municipalities of the PRC, with a total
population of over 23 million as of 2010. It is a global city, with influence in commerce, culture, finance, media, fashion, technology,
and transport. It is a major financial center and the busiest container port in the world.</p> <!-- 居中 --> <p class="text-center text-info">这段文字居中对齐:Shanghai is the largest city by population in the People's Republic of China (PRC)
and the largest city proper by population in the world. It is one of the four province-level municipalities of the PRC, with a total
population of over 23 million as of 2010. It is a global city, with influence in commerce, culture, finance, media, fashion, technology,
and transport. It is a major financial center and the busiest container port in the world.</p> <!-- 右对齐 --> <p class="text-right text-success">这段文字右对齐:Shanghai is the largest city by population in the People's Republic of China (PRC)
and the largest city proper by population in the world. It is one of the four province-level municipalities of the PRC, with a total
population of over 23 million as of 2010. It is a global city, with influence in commerce, culture, finance, media, fashion, technology,
and transport. It is a major financial center and the busiest container port in the world.</p> <!-- 两端对齐 --> <p class="text-justify text-primary">这段文字两端对齐:Shanghai is the largest city by population in the People's Republic of China (PRC)
and the largest city proper by population in the world. It is one of the four province-level municipalities of the PRC, with a total
population of over 23 million as of 2010. It is a global city, with influence in commerce, culture, finance, media, fashion, technology,
and transport. It is a major financial center and the busiest container port in the world.</p> <!-- 不换行 --> <p class="text-nowrap">这段文字不换行:Shanghai is the largest city by population in the People's Republic of China (PRC)
and the largest city proper by population in the world. It is one of the four province-level municipalities of the PRC, with a total
population of over 23 million as of 2010. It is a global city, with influence in commerce, culture, finance, media, fashion, technology,
and transport. It is a major financial center and the busiest container port in the world.</p>
14.大小写 CSS--> text-lowercase 、text-uppercase 、text-capitalize
<!-- 原文字 --> <p >Lowercased text.</p> <!-- 全部改为小写 --> <p class="text-lowercase">Lowercased text.</p> <!-- 全部改为大写 --> <p class="text-uppercase">Uppercased text.</p> <!-- 单词首字符大写 --> <p class="text-capitalize">Capitalized text.</p>
15.缩略语 : <abbr>
添加上 .initialism 样式会使得缩略语的字体大小略小一点；
<p><abbr title="HyperText Markup Language" class="">HTML</abbr>is the best thing since sliced bread.</p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr>is the best thing since sliced bread.</p>
16.地址 : <address>
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
17.引用 ： <blockquote>
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
<blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
18.列表
①无序列表
<ul> <li>果汁</li> <li>牛奶</li> <li>咖啡 <ul> <li>蓝山</li> <li>拿铁</li> <li>玛奇朵</li> </ul> </li> <li>啤酒</li> <li>白酒</li> <li>矿泉水</li> </ul>
②有序列表
<ol> <li>果汁</li> <li>牛奶</li> <li>咖啡 <ul> <li>蓝山</li> <li>拿铁</li> <li>玛奇朵</li> </ul> </li> <li>啤酒</li> <li>白酒</li> <li>矿泉水</li> </ol>
④无样式列表
<ul class="list-unstyled"> <li>果汁</li> <li>牛奶</li> <li>咖啡 <ul> <li>蓝山</li> <li>拿铁</li> <li>玛奇朵</li> </ul> </li> <li>啤酒</li> <li>白酒</li> <li>矿泉水</li> </ul>
⑤内联列表
<ul class="list-inline"> <li>果汁</li> <li>牛奶</li> <li>咖啡 </li> <li>啤酒</li> <li>白酒</li> <li>矿泉水</li> </ul>
19.描述
①垂直排列
<dl> <dt>果汁</dt> <dd>这里是对果汁的描述。</dd> <dt>什么是咖啡</dt> <dd>这里是对咖啡的描述。</dd> </dl>
②水平排列
<dl class="dl-horizontal"> <dt>果汁</dt> <dd>这里是对果汁的描述。</dd> <dt>啤酒的基本介绍啤酒的基本介绍</dt> <dd>啤酒是人类最古老的酒精饮料之一，是水和茶之后世界上消耗量排名第三的饮料。啤酒于二十世纪初传入中国，属外来酒种。
啤酒是根据英语Beer译成中文“啤”，称其为“啤酒”，沿用至今。</dd> <dt>什么是咖啡</dt> <dd>这里是对咖啡的描述。</dd> </dl>
