1. 标题

在Bootstrap中使用标题的方式和常规html一样：从

到

分别从大到小安排标题元素，只不过在Bootstrap中重新设置了其默认样式，从源码中可以看到有如下共性：

字体颜色与字体样式继承自父元素，字体粗细为500，且行高全部设为1.1（也就是font-size的1.1倍）

{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;}

在不同大小的标题中有着如下区别：

1. 在Bootstrap中对于不同级别标题字体大小设置为： h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
2. 重新设置了 margin-top 和 margin-bottom 的值， h1~h3 重置后的值都是 20px ； h4~h6 重置后的值都是 10px 。

除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ，还特意定义了 .h1~.h6 六个类名。如下所示：

在Bootstrap中，下面的代码，显示效果相同。

<!--Bootstrap中的标题--><h1>Bootstrap标题一</h1><h2>Bootstrap标题二</h2><h3>Bootstrap标题三</h3><h4>Bootstrap标题四</h4><h5>Bootstrap标题五</h5><h6>Bootstrap标题六</h6><!--Bootstrap中让非标题元素和标题使用相同的样式--><div class="h1">Bootstrap标题一</div><div class="h2">Bootstrap标题二</div><div class="h3">Bootstrap标题三</div><div class="h4">Bootstrap标题四</div><div class="h5">Bootstrap标题五</div><div class="h6">Bootstrap标题六</div>

因为在实际应用中，我们可能经常会遇到除了主标题外，之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单，如下：

<h1>Bootstrap标题一<small>我是副标题</small></h1>

当然毋庸置疑的是，从

到

都可以使用该设置。副标题 有着自己一些独特的样式：

1. 行高全部都设置为了1，而且字体粗细变成了常规效果（不加粗），同时颜色被设置为灰色（ #999 ）。
2. 在h1~h3内的 标签文本，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

2. 正文文本

Bootstrap中的文本全局样式如下：

1. 字体大小为14px
2. 行高为1.42867143（约等于20px）
3. 字体颜色为 #333
4. p标签外部有着10个像素的下外边距 margin-bottom:10px;

当然，你是可以自行设置重置样式的。^_^

3. 强调

字体风格相关

<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 --><i>i</i><!--无特殊意义， 斜体 --><small>small</small><!-- 小号字体--><strong>strong</strong><!-- 语气强烈的强调，粗体 --><em>em</em><!-- 强调，斜体 -->

Copier après la connexion

强调相关的类

在Bootstrap中定义了一系列的这样的类，用于不同的情景，出去text外，还有bg（背景颜色）等等。使用方法类似，只是前面的文本进行了一些改变！所以。 记住这6个单词吧

<p class="text-muted">提示，使用浅灰色（#999）</p><p class="text-primary">主要，使用蓝色（#428bca）</p><p class="text-success">成功，使用浅绿色(#3c763d)</p><p class="text-info">通知信息，使用浅蓝色（#31708f）</p><p class="text-warning">警告，使用黄色（#8a6d3b）</p><p class="text-danger">危险，使用褐色（#a94442）</p>

Copier après la connexion

4. 文本对齐风格

<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">我两端对齐</p>

Copier après la connexion

在Bootstrap中，为了简化操作，方便使用，使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。

5. 列表

在Bootstrap中对于列表的设置与原生的html基本一致，需要注意的有：

1. 在列表之间有10px的下外边距
2. 在嵌套列表中，不含有下边距

Bootstrap当然不会就这么简单做一点点修改，它定义了一些关于列表的类给我们使用。

去点列表 .list-unstyled

.list-unstyled { padding-left: 0; list-style: none;}

Copier après la connexion

从源码中，我们可以看到这样的信息，它除了将项目编号去除之外，还将默认的左边距也清除掉了。

<ol>    <li class="list-unstyled">    项目列表        <ul class="list-unstyled">        <li>带有项目编号</li>        <li>带有项目编号</li>        </ul>    </li></ol>

Copier après la connexion

在这样一段代码中，三个列表项会整齐的 排列在一起 ，且都没有 项目符号

内联列表 .list-inline

除了去点列表之外，Bootstrap还可以通过添加类名“.list-inline”来实现内联列表，简单点说就是 把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。 也可以说内联列表就是为制作水平导航而生。

水平定义列表 .dl-horizontal

现有代码如下：

<dl class="dl-horizontal">    <dt>标题一：</dt>    <dd>描述内容，我很喜欢前端，也很喜欢响应式布局，它能在个不同大小的屏幕下提供很好的体验，我现在是初学者，但是我会越来强的</dd>    <dt>标题二：标题二：标题二：标题二：</dt>    <dd>描述内容</dd></dl>

Copier après la connexion

在浏览器全屏显示中可以看到效果如下：

我们来把屏幕大小进行改变，在遇到一个临界值时（小屏），水平定义列表将回复到原始的状态，如下改变：

这是为什么呢？我们去看看源码吧！

原来在这里添加了一个媒体查询，只有 屏幕大于768px 的时候，添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式：

1. 将dt设置了一个左浮动，并且设置了一个宽度为160px
2. 将dd设置一个margin-left的值为180px，达到水平的效果
3. 当标题宽度超过160px时，将会显示三个省略号

现在再看看上面的效果是不是和这里的描述都是一样的呢？答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格：

1. 使用 来显示单行内联代码——针对于 单个单词或单个句子 的代码
2. 使用

   Copier après la connexion
   来显示多行块代码——针对于 多行代码 （也就是成块的代码）
3. 使用 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!

代码如下：（需要注意的是，**不管使用哪种代码风格，在代码中碰到小于号（ < ）和大于号（ > ）都需要使用转义字符来替代）

code风格：<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre class="brush:php;toolbar:false"></code>和<code><kbd></code></div>pre风格：<div><pre class="brush:php;toolbar:false"><ul>    <li>...</li></ul>

Copier après la connexion