Bootstrap学习笔记--表格-白红宇

先来个总体概括：

还有一个响应式表

实践出真知：

类：.table

一个轻的填充物和只有水平分隔符。

看代码：


               
      
                                          Firstname                  Lastname                  Email               
           
                                          John                  Doe                  john@example.com               
                               Mary                  Moe                  mary@example.com               
                               July                  Dooley                  july@example.com

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

看效果图：

类：.table-striped

将斑马条纹添加到表格中：


     
       改成

效果图：

.类：table-bordered

加边框：


     
       改成

效果图：

类：.table-hover

允许上表中的行悬停状态：基础的和table只有水平线一样但是当鼠标停留在列表的时候此行会变灰色但是不能点击


     
       改成

效果图：

类：.table-condensed

没啥区别和table 只有水平线一样只是变得更紧凑而已


     
           改成

这里不贴效果图了……差别不大。

为表格行（）或表格单元格（）着色


     
                                       Firstname                 Lastname                 Email              
          
                                       John                 Doe                 john@example.com              
                             Mary                 Moe                 mary@example.com              
                             July                 Dooley                 july@example.com

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

效果图：

颜色选择：

还可以建造响应表：

类：.table-responsive

表格将在小设备上水平滚动（768px以下）。当查看大于768px宽的任何东西时，没有区别

...

栗子：


                 
      
                                          #                  Firstname                  Lastname                  Age                  City                  Country               
           
                                          1                  Anna                  Pitt                  35                  New York                  USA

#	Firstname	Lastname	Age	City	Country
1	Anna	Pitt	35	New York	USA

效果图：

这个是响应式的之前那些类都没有滑轮缩小后或者有更通用

table要包含在
     
       里