bootstrap入门指引

（1）强调类名

(2)对齐类名

例

效果如下

3)改变文本字体的大小写

4）列表类名

默认情况下，bootstrap中的无序列表和有序列表带有项目符号，利用类.list-unstyled去除项目符号

类名.list-inlinc用来实现内联列表，也就是将垂直列表幻城水平列表，并去掉项目符号，保持水平显示，其为制作水平导航而生

定义列表，bootstrap没有太大的调整，只是调整了行间距，外边距和字体效果

水平定义列表就像内联列表一样，bootstrap添加类.dl-horizontal即可，但是只有在屏幕大于768px的时候才有效

引用

表格式Bootstrap中的一个基础组件之一，bootstrap为表格设置了一种基础样式和四种附加样式以及一个响应式的表格

bootstrap还为<tr>提供了5种不同的类名

传送门：中文 http://getbootstrap.com/components/#glyphicons

传送门：英文 http://v3.bootcss.com/components/

首先, 你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table. html在这不过多说明. 既然看这篇文章, 肯定都能够理解. 然后现在就把bootstrap中的table来详细说明一下. 基础的table如下:

下面了解一下bootstrap中table, 没有什么大道理可以讲解. 唯有一点, 通过表格的方式展示页面. 首先有必要样式.table. 和一些选用样式. 举例说明必要样式. 首先要搭建一个基础框架, 请看系列经验第一篇.

在搭建的基础框架里面的body部分填写table信息. 然后在table的标签上加上基础样式.table的css样式. 你立刻发现, 界面瞬间好看多了.

说明一下除了必要的.table之外, 还有很多可选的class. 不同的可选class. 是可以联合使用的.

1.我们常用的就有边框的table. 只需要使用.table-bordered 查看效果图.

2.斑马线, 也就是隔行相同颜色的一个样式. 使用.table-striped样式.

注意点有2个:

(1)斑马线是对tbody中的行起作用

(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的.

3.鼠标悬停在行上, 改变行的背景颜色. 使用.table-hover样式.

注意: 这个需要多行的时候, 这种效果更加明显.

4.让表格更加紧凑的样式.table-condensed, 它是让表格单元格中的内部（padding）减半.展现更多的内容, 和更多的显示内容.

其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式. 每个样式都是一种提醒方式. 这些方式也可以放到table中. 只需要使用class即可.

上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的. 下面的举例说明.

注意点: 在使用这个样式的时候不能使用.table-striped的样式, 会出现不能正常显示的问题.

还有就是现在比较流行的响应式的table. 只需要在table包含在.table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失.

多上班族在表格中插入表格，小编教你一个很简单的方法。

点击插入单元格下面的对象，然后选择由文件创建。

选择好文件之后，在显示为图标前面的框框里面打勾，然后可以在更改图标里面修改文件的路径。

确定之后再查看原来的表格，发现这个表格已经插入进去了。这样就可以了。在这里面的表格只要双击就可以打开查看里面的数据了。

---