bootstrap学习笔记（二）--table

先写一个什么样式也没有的table

<table>
		<thead>
			<tr>
				<th>#</th>
				<th>FirstName</th>
				<th>LastName</th>
				<th>UserName</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Mark</td>
				<td>Otto</td>
				<td>@mdo</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Jacob</td>
				<td>Thornton</td>
				<td>@fat</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Larry</td>
				<td>the Bird</td>
				<td>@twitter</td>
			</tr>
		</tbody>
	</table>

朴素的样子啊！

ok,在table上加上class="table"样式瞧瞧：

看起来一下子就上了一个档次啊，不过貌似大家离开的太远了。。。在外面加个div设置一下宽度就好了。

是不是感觉如果奇偶行能分开颜色比较好，在设置一下！只要给tabel再加一个table-striped样式就好：

带边框的table：增加样式table-bordered

奇偶颜色不一样是因为我没有去掉table-striped这个样式，所以也证明，这几个样式也可以一起用。

随着鼠标指向颜色变化的样式：table-hover

当然点击选中某行某行颜色变化可以用js来控制，设置选中行的td的css的background-color为#f5f5f5。这个是滑动到改行时的背景颜色。

官方文档里还有这个样式：table-condensed,看了半天没看出来有什么用，有道了一下，condensed的意思是浓缩的，一看果然是比上面几个行间距小一点。

官网上没有提供的一种样式，个人觉得经常用到，效果是这样子滴：

就是在外面加了一个div,然后加上昨天写的那个mini-layout样式，当然了，table样式有一个bottom:20px的设置，所以还要加上bottom:0px的样式才能达到这个效果。也很漂亮吧！

总结：

写好table之后，基础样式是class="table",在此基础上根据自己的需求可以添加table-striped（奇偶渐变）table-bordered（带边框）table-hover（滑动效果）table-condensed（减小边距）这些样式中的一个或多个。