bootstrap 基础知识学习（列表+表格）

一、标题

二、段落

=》如果想让一个段落p突出显示，

添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理

=》文本状态

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

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

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

=》文本的对齐方式

.text-left：左对齐

.text-center：居中对齐

.text-right：右对齐

.text-justify：两端对齐

三、列表（ul/ol/dl）

1、基本样式



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

》通过添加类名“.list-inline”来实现内联列表，即水平导航

》给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。



2、列表组（ .list-group 列表容器 .list-group-item 列表具体项）



列表组的状态

四、代码展示

1、bootstrap提供的三种代码展示风格（常用于博客，）

》使用<code></code>来显示单行内联代码

》使用<pre></pre>来显示多行块代码

》使用<kbd></kbd>来显示用户输入代码



2、<pre>元素一般用于显示大块的代码，当代码过多时，可以添加滚动条，添加“.pre-scrollable”类名就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

五、表格

1、基本样式

.table：基础表格(“.table”主要有三个作用：

给表格设置了margin-bottom:20px以及设置单元内距,

在thead底部设置了一个2px的浅灰实线,

每个单元格顶部设置了一个 1px的浅灰实线)

.table-striped：斑马线表格

.table-bordered：带边框的表格

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

.table-condensed：紧凑型表格

.table-responsive：响应式表格

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水

平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。







除了”.active”之外，其他四个类名和”.table-hover”配合使用时，Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置，直接在table上加class=“table-hover”就行

注：不管制作哪种表格都离不开类名“table”