bootStrap常用样式

1.标题
bootstrap对h1~h6的标题效果进行覆盖，显示出来的效果会变淡。
同时提供了对应的类名,为非标题元素设置样式.h1~ . h6同样可以达到标题的效果

如：

<div class=".h1">666</div>

副标题small标签或. small类名

2.段落
通过. lead类名来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

:小号字
:加粗:斜体

3.强调
.text-muted:提示,使用浅蓝色(#999)

.text-primary:主要,便用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息，使用浅蓝色(#31708f)

.text-warning:警告,使用黄色（#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

给标签添加对应的类名，文本显示相应的颜色

4.对齐效果

在原生css中，我们用text-align设置对齐方式。

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格: .text-left:左对齐.text-center:居中对齐.text-right:右对齐.text-justify:两端对齐。

5.列表

5.1去点列表

通过给列表（ul\ol）添加类名，如class="list-unstyled",就可以将列表前面的点或序号去掉。

5.2内联列表

通过给列表（ul\ol）添加类名，如class="list-inline",就可以将垂直显示转换成水平显示，即水平排列每一个li标签，而且会去掉项目符号，大多用于制作水平导航栏。

5.3定义列表

通过给列表（dl）添加类名，如class="list-horizontal",制作水平样式列表，当li标签中的长度超过160px时，会显示为...。

6.代码效果

在网页中我们想要将文本中的代码部分凸显出来，一般设置为高亮，如我们的博客中添加的代码片段就是这种效果，bootstrap为我们提供了这样的标签<code></code>、<pre></pre>

6.1单行代码<code></code>

适用于一行代码的情况，

<code>this is code</code>

在浏览器运行的效果：

我们写成这样：

<code>
this is code
this is code
</code>

也是默认显示到一行上

6.2多行代码<pre></pre>

在编辑器用<pre></pre>，里面的空格换行浏览器会自动保存

演示：

  <pre>
        this is code1
        this is code2
        this is code3
    </pre>

效果：

6.3快捷键效果

<kbd></kbd>包裹的文本会展示出特殊的效果

代码：

<span>按<kbd>ctrl</kbd>+<kbd>s</kbd>保存</span>

效果：

7.表格

7.1表格样式

Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格:

基础样式
1 .table:基础表格

附加样式
1 .table-striped:斑马线表格

2 .table-bordered:带边框的表格

3 .table-hover:鼠标悬停高亮的表格

4. table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

7.2tr、td、th样式

提供了五种不同的类名，每种类名控制了行的不同背景颜色

.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作

我们分别应用一下：给每个td加上不同的类名

 <table class="table table-bordered" style="width: 400px; height: 50px;"> <!-- 带边框 -->
        <tr >
            <td class="success">111</td>
            <td class="info">222</td>
            <td class="danger">333</td>
        </tr>
        <tr >
            <td class="active">444</td>
            <td class="warning">555</td>
            <td>666</td>
        </tr>
    </table>

效果：

注意：我们想要使用.active .success .info .warning .danger这五个样式，就必须在table标签加上.table类型，告知为基础表格，这些效果才能够生效

相关推荐