Bootstrap2 文本处理

1.段落处理

1.1 标题

1.通过h1,h2,h3…h6类实现了标题效果

2.副标题 small标签。
3.设置更大的标题用display-1、2、3、4类

<p class="h1">我是一级标签<small>我是副标题</small></p>
<p class="h2">我是二级标签<a class="small">我是副标题</a></p>
<p class="h3">我是三级标签</p>
<p class="h4">我是四级标签</p>
<p class="h5">我是五级标签</p>
<p class="h6">我是六级标签</p>

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

1.2 特殊的段落内容样式

1.文字颜色
通常根据消息的等级划分字体的颜色。
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
更多元素颜色信息可以看这个官方文档
https://v4.bootcss.com/docs/4.0/utilities/colors/

<p class="text-muted">本行内容是一个 mute class</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

2.文字的特殊样式
（1）加粗 strong标签
（2）斜体 em标签
（3）下划线 u标签或ins标签
（4）删除线 del标签或s标签
（5）高亮 mark标签或mark类
（6）小字 small标签或small类
实例

<p>我是文字的<strong>加粗1</strong>部分</p>
<p>我是文字的<em>斜体</em>部分</p>
<p>我是文字的<del>删除线1</>部分</p>
<p>我是文字的<s>删除线2</s>部分</p>
<p>我是文字的<ins>下滑线1</ins>部分</p>
<p>我是文字的<u>下滑线2</u>部分</p>
<p>我是文字的<mark>高亮1</mark>部分</p>
<p>我是文字的<a class="mark">高亮2</a>部分</p>
<p>我是文字的<small>缩小字体1</small>部分</p>
<p>我是文字的<a class="small">缩小字体2</a>部分</p>

3.特殊类型的文字
（1）缩写 abbr标签，有特殊的缩小样式
<1>其中title属性用来显示缩写显示的内容
<2>如果想要让缩写写的更小，把他认为是initialism类

<abbr title="显示内容">简写</abbr><br/>
<abbr title="更小的显示,内容" class="initialism">简写</abbr><br/>

（2）引用 blockquote标签，有特殊的样式
<1>必须声明他是blockquote类
<2>声明引言来源footer标签，并且这个标签有个 blockquote-footer类。通常在表示出处的地方用cite标签设置鼠标移动到它上面时的内容。

<blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

（3）地址 address标签,有特殊的样式，现在看来好像还没有具体效果。

<address>Beijing</address>

1.3 段落对齐方式

1.通过各种类修饰
（1）text-center 文本居中
（2）text-left 文本左对齐
（3）text-right 文本右对齐
（4）text-justify 文本左右对齐，这个效果需要文字很长才能看出来。通过使用空格使文字看的左右对齐。

<p class="text-center">居中的文本</p>
<p class="text-left">左对齐的文本</p>
<p class="text-right">右对其的文本</p>
<p class="text-justify">两边对齐的文本asdfasdffffffffsadfasdfwaefasdfsadfasdfasdfsadfasdfasdfsadfsadfasdfasdfsadfasdfasdfaserqwrqerghdfvgasdfadfsasdfasdffffffffsadfasdfwaefasdfsadfasdfasdfsadfasdfasdfsadfsadfasdfasdfsadfasdfasdfaserqwrqerghdfvgasdfadfsasdfasdffffffffsadfasdfwaefasdfsadfasdfasdfsadfasdfasdfsadfsadfasdfasdfsadfasdfasdfaserqwrqerghdfvgasdfadfsasdfasdffffffffsadfasdfwaefasdfsadfasdfasdfsadfasdfasdfsadfsadfasdfasdfsadfasdfasdfaserqwrqerghdfvgasdfadfs</p>

2加粗样式 代码块处理

2.1 内联代码块 code标签

<p>我是<code>code</code>标签</p>

2.2 代码段 pre标签

1.基础，就是同通过pre标签
2.有滚动条，为pre标签添加一个类 pre-scrollable。代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

<p>下面是一段代码<pre class="pre-scrollable">aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa<br/>
    aaaaaa</pre></p>

2.3 类似于编程中的代码功能

1.表示变量，var标签
2.表示输入，kbd标签
3.表示输出，samp标签

<p>我是<var>var a=1</var>标签</p>
<p>我是<kbd>kbd 输入</kbd>标签</p>
<p>我是<samp>samp 输出</samp>标签</p>

2.4 如果html网页中需要表示<或者>怎么办

在代码中碰到小于号（<）要使用硬编码“&lt;”来替代，大于号(>)使用“&gt;”来替代。

<p>这是一个&ltp&gt标签</p>

3.列表项处理

3.1 列表基础复习

1.ol标签有序列表order list，ul标签无序列表unorder list。li列表元素list item。
2.dl描述列表describtion list。dt元素描述，dd元素内容

<ol>
    <li>有序第一项</li>
    <li>有序第二项</li>
    <li>有序第三项</li>
</ol>
<ul>
    <li>无序第一项</li>
    <li>无序第二项</li>
    <li>无序第三项</li>
</ul>
<dl>
    <dt>描述1</dt>
    <dd>内容1</dd>
    <dt>描述2</dt>
    <dd>内容2</dd>
</dl>

3.2 列表样式

1.未定义样式列表list-unstyled类。原本的列表还有些样式，现在一点样式也没有，好像普通文本。就算是有序列表也没有序号。

<ol class="list-unstyled">
    <li>有序第一项</li>
    <li>有序第二项</li>
    <li>有序第三项</li>
</ol>

2.内联样式列表,list-inline类

<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

3.水平的定义列表，dl-horizontal类。

<dl class="dl-horizontal">
    <dt>描述1</dt>
    <dd>内容1</dd>
    <dt>描述2</dt>
    <dd>内容2</dd>
</dl>