## 排版
**标题**
HTML标签中的所有标题标签h1-h6都可以使用，同时bootstrap还提供了.h1到.h6，它们的字体大小和标签h1-h6的字体大小一致，为的是给内联（inline）属性的文本应用到标题的样式
```html
<h1>bootstrap</h1>
<div class="h1">bootstrap</div>
```
在标题内还可以包含 `<small>` 标签或赋予 `.small` 类的元素，可以用来标记副标题
*****
**页面主体**
Bootstrap 将全局 `font-size` 设置为 **14px**，`line-height` 设置为 **1.428**。这些属性直接赋予 `<body>` 元素和所有段落元素。另外，`<p>`（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
```markdown
注意： Bootstrap 3 将行高设置为 1.428，其实目的就是想将行高设置为20px。
```
```html
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
```
*****
**中心内容**
通过添加 `.lead` 类可以让段落突出显示。
```html
<p class="lead">
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
<p>
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。
这些属性直接赋予 body 元素和所有段落元素。
另外，p （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
</p>
```
*****
**内联文本元素**
**1.** .mark 和 \<mark\> 标签 加背景色
```html
<div><mark>.mark</mark>标签 加背景色</div>
<mark>bootstrap</mark>
```
**2.** \<del\> 标签 删除
对于被删除的文本使用`<del>`标签。
```html
<del>对于被删除的文本使用del标签。<del>
```
**3.** \<s\>标签 去掉没用的文本
```html
<s>去掉没用的文本<s>
```
可以看出 s 标签和 del 标签的效果一样，具体使用要看具体文本结构
**4.** \<ins\> 标签额外插入的文本使用。
```html
<ins>插入的文本使用<ins>
```
**5.** \<u\> 标签 文本下划线。
```html
<u>文本下划线<u>
```
可以看出 ins 标签和 u 标签的效果一样，具体使用要看具体文本结构。
**6.** \<strong\>通过增加font-weight值强调一段文本。
```html
<p>通过增加 <strong>font-weight</strong> 值强调一段文本</p>
```
**7.** em 用斜体强调一段文本。
```html
<em>用斜体强调一段文本。</em>
```
*****
**对齐**
通过文本对齐类，可以简单方便的将文字重新对齐。
```html
<div class="text-center">居中对齐</div>
<div class="text-right"> 右对齐</div>
<div class="text-left "> 左对齐</div>
<div class="text-justify "> 字体对齐</div>
<div class="text-nowrap "> 不换行</div>
```
*****
**改变大小写**
通过这几个类可以改变文本的大小写。
```html
<p class="text-lowercase">Lowercased text. 字母小写</p>
<p class="text-uppercase">Uppercased text. 字母大写</p>
<p class="text-capitalize">Capitalized text. 首字母大写</p>
```
*****
**缩略语**
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的`<abbr>`元素的增强样式。一般会在 abbr 标签元素中的 title 属性中定义对缩写词的完整描述。定义 title 属性后，浏览器会在元素下方添加一条浅色的虚线，当鼠标悬停时，会有一个“？”符号，同时还会显示 title 属性所提供的内容。
```html
<abbr title="attribute">attr</abbr>
```
*****
**首字母缩略语**
为 \<abbr\> 元素添加 .initialism 类，可以得到稍小一些的文本，文本会缩小到原来大小的 90%，并且字母全部以大写显示。
```html
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
```
*****
**引用**
在你的文档中引用其他来源的内容。
**1.** 默认样式的引用
将任何HTML元素包裹在`<blockquote>`中即可表现为引用样式。
```html
<blockquote>
<p>将任何 HTML 元素包裹在blockquote 中即可表现为引用样式</p>
</blockquote>
```
**2.** 多种引用样式
第一种样式 **命名来源**
添加`<footer>`用于标明引用来源。来源的名称可以包裹进`<cite>`标签中。
```html
<blockquote>
<p>将任何 HTML 元素包裹在blockquote 中即可表现为引用样式</p>
<footer>该语句出自 <cite title="Source Title">文章来源</cite></footer>
</blockquote>
```
第二种样式 **另一种展示风格**
通过赋予`.blockquote-reverse`类可以让引用呈现内容右对齐的效果。
```html
<blockquote class="blockquote-reverse">
<p>将任何 HTML 元素包裹在blockquote 中即可表现为引用样式</p>
<footer>该语句出自 <cite title="Source Title">文章来源</cite></footer>
</blockquote>
```
*****
**列表**
**1.** 无样式列表
移除了默认的`list-style`样式和左侧外边距的一组元素（只针对直接子元素）。你需要对所有嵌套的列表都添加这个类才能具有同样的样式。
没有添加了`list-unstyled`这个类：
```html
<ul>
<li>移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）</li>
<li>这是针对直接子元素的</li>
<li>也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。</li>
</ul>
```
添加了`list-unstyled`这个类：
```html
<ul class="list-unstyled">
<li>移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）</li>
<li>这是针对直接子元素的</li>
<li>也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。</li>
</ul>
```
**2.** 内联列表
类`.list-inline`通过设置`display: inline-block;`并添加少量的内补（padding），将所有元素放置于同一行，并且移除了默认的`list-style`样式和左侧外边距。
没有添加了`list-inline`这个类：
```html
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
```
添加了`list-inline`这个类：
```html
<ul class="list-inline">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
</ul>
```
**3.** 描述
带有描述的短语列表。
没有添加了`dl-horizontal`这个类：
```html
<dl>
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
<dl>
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
```
添加了`dl-horizontal`这个类：
```html
<dl class="dl-horizontal">
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
<dl>
<dt>标题信息</dt>
<dd>详细标题信息详细标题信息</dd>
</dl>
```
- 第一章 . bootstrap介绍
- 第二章 . 全局CSS样式
- 1、总体注意事项
- 2、栅格系统
- 3、排版
- 4、代码
- 5、表格
- 6、表单
- 7、 按钮
- 8、 图片
- 9、辅助类
- 10、响应式工具
- 第三章 . bootstrap相关CSS应用
- 1、CSS媒体查询 @media
- 2、px,em,rem之间的关系和换算方式
- 第四章 . 组件
- 1、Glyphicons 字体图标
- 2、下拉菜单
- 3、按钮组
- 4、按钮式下拉菜单
- 5、输入框组
- 6、导航
- 7、导航条
- 8、路径导航
- 9、分页
- 10、标签
- 11、徽章
- 12、巨幕
- 13、页头
- 14、缩略图
- 15、警告框
- 16、进度条
- 17、媒体对象
- 18、列表组
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、过渡效果 (transition.js)
- 3、模态框 （modal.js）
- 4、下拉菜单 （dropdown.js）
- 5、滚动监听 （scrollspy.js）
- 6、可切换标签 （tab.js）
- 7、工具提示 （tooltip.js）
- 8、弹出框 （popover.js）
- 9、警告信息 （alert.js）
- 10、按钮 （button.js）
- 11、折叠插件（collapse.js）
- 12、轮播插件（carousel.js）
- 13、Affix插件（affix.js）