BootStrap-CSS样式_排版_表格

table样式:基本表格

table table-striped样式:条纹表格,类似奇数偶数行

table table-bordered样式:带边框表格,添加表边框

table table-hover样式:鼠标悬停效果表格,添加鼠标移入移出事件样式

table table-condensed样式:紧缩型表格,缩小表内边距(padding减半)

table active-激活状态(灰色) success-成功状态(绿色) warning-警告状态(黄色) danger-危险状态(粉红色):状态表格

table-responsive样式:包含在table-responsive容器中即可创建响应表格,会在其小屏幕设备上(小于768px水平滚动),当屏幕大于768px时,水平滚动条消失,适合小屏设备需要滚动条时使用

BootStrap-CSS样式_排版_表格_第1张图片

      BootStrap-CSS样式_排版_表格_第2张图片 





    
    
    
    Bootstrap 101 Template

    
    

    
    
    



    
    
1. 基本表格
FirstName LastName UserName
zhang san 张三
li shi 李四
wang wu 王五
2. 条纹表格
FirstName LastName UserName
zhang san 张三
li shi 李四
wang wu 王五
3. 带边框表格
FirstName LastName UserName
zhang san 张三
li shi 李四
wang wu 王五
4. 鼠标悬停效果表格
FirstName LastName UserName
zhang san 张三
li shi 李四
wang wu 王五
5. 紧缩型表格
FirstName LastName UserName
zhang san 张三
li shi 李四
wang wu 王五
6. 状态表格
FirstName LastName UserName
zhang san 张三
li shi 李四
wang wu 王五
zhao liu 赵六
sheng li 孙李
7. 响应式表格
FirstName LastName UserName Age
zhang san 张三 25
li shi 李四 40
wang wu 王五 36
xiao ming 小名 18

实现效果:

BootStrap-CSS样式_排版_表格_第3张图片

 BootStrap-CSS样式_排版_表格_第4张图片

 BootStrap-CSS样式_排版_表格_第5张图片

 

     

你可能感兴趣的:(BootStrap)