Boostrap入门+样式学习--贰--（慕课网大漠《玩转bootstrap》[基础]）

1. 标题样式

除了有标签 h1~h6 之外，bootstrap还提供了对应的六个类名：.h1~.h6

重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。

所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。

固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

2.副标题 small标签

行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）

内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%

3.段落P强调内容 lead类样式

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

用法：

<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>

4.粗体

在Bootstrap中，可以使用

<b>和<strong>

标签让文本直接加粗。

5. 斜体

斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签

<em>或<i>

来实现。

6.强调相关的类

在Bootstrap中除了使用标签

<strong>、<em>

等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

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

7.文本对齐风格

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

8.列表

去点列表：通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

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

水平定义列表：Bootstrap可以给添加类名“.dl-horizontal”给定义列表实现水平显示效果。

9.代码相关

使用

<code></code>

来显示单行内联代码

使用

<pre></pre>

来显示多行块代码

使用

<kbd></kbd>

来显示用户输入代码

Y轴出现滚动条：在pre标签上添加类名“.pre-scrollable”

10.表格

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格

10-1.表格行的类

类名	描述
.active	表示当前活动的信息
.success	表示成功或者正确的行为
.info	表示中立的信息或行为
.warning	表示警告，需要特别注意
.danger	er 表示危险或者可能是错误的行为

10-2.基础表格 注意

在Bootstrap中，对于基础表格是通过类名“.table”来控制。如果在元素中不添加任何类名，表格是无任何样式效果的。10-3.响应式表格

在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将置于这个容器当中，这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。