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.表格行的类

10-2.基础表格 注意

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

10-3.响应式表格

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

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

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

版权声明：本文为博主原创文章，谢谢参考！有问题的地方，欢迎纠正，一起进步。