bootstrap专栏 03.图文处理 01.文字处理

# 01.文字内容排版

[toc]{type: "ol", level: [3,4,5]}

### 标题
#### 普通标题
- hn **(1-6)**{style="color:grey"}
```html
<h1>h1</h1>
...
```

#### 附属标题
```html
<h2>h2<small>hello world</small>h2</h2>
```

#### 浅色标题
```html
<h3>h3<small class="text-muted">love apple</small>h3</h3>
```
![文字处理-标题](01.文字处理-标题.png)


### 文本
#### 常规设置
##### 文本加醋
```html
<p>It's <strong>a good </strong>idea</p>
```
##### 文本高亮
- 方式1
```html
<p>It's <mark> a good </mark>idea</p>
```
- 方式2
```html
<p>It's <span class="mark">a good</span> idea</p>
```
##### 文本放大
```html
<p class="lead">It's a good idea</p>
```
##### 装饰线
```html
<p><s>It's</s>It's <del>a good</del> <u>idea</u></p>
```
![文字处理-文本-常规设置](01.文字处理-文本-常规设置.png)

#### 英文设置
##### 设置全大写
```html
<div class="text-uppercase">
    It's a good idea
</div>
```
##### 设置全小写
```html
<div class="text-lowercase">
    It's a good idea
</div>
```
##### 首字母大写
```html
<div class="text-capitalize">
    It's a good idea
</div>
```
![文字处理-文本-英文设置](01.文字处理-文本-英文设置.png)

#### 溢出设置
##### 不换行
> 强制超出边框的部分不换行
> 超出部分使用 ... 代替
```html
<div class="border border-success text-nowrap text-truncate" style="width: 100px;">
    I have a good idea. I have a good idea. I have a good idea.
</div>
```
##### 换行
>有空格时，根据空格换行
>没有空格时，填满则换行
```html
<div class="border border-success" style="width: 100px;">
    I have a good idea. I have a good idea. I have a good idea.
</div>
```
![文字处理-文本-溢出设置](01.文字处理-文本-溢出设置.png)

#### 高级设置
##### 文本提示
```html
<p class="text-center">It's <abbr title="提示信息在这里">a good</abbr>idea</p>
```
##### 引用说明
```html
<blockquote class="blockquote text-center">
    <p>It's a good idea</p>
    <footer class="blockquote-footer">
        ark™
    </footer>
</blockquote>
```
![文字处理-文本-高级设置](01.文字处理-文本-高级设置.png)


### 列表
#### 去除样式
```html
<ul class="list-unstyled">
    <li>first</li>
    <li>last</li>
</ul>
```

#### 溢出截取
```html
<ul>
    <li class="text-truncate" style="width: 120px">It's a good idea. I think so.</li>
    <li>It's a good idea. I think so.</li>
</ul>
```

#### 横向排版
```html
<ul class="list-inline">
    <li class="list-inline-item">function</li>
    <li class="list-inline-item">model</li>
</ul>
```
![文字处理-列表](01.文字处理-列表.png)