.table——基础表格样式。

.table-striped——给<tbody>之内的每一行添加斑马条纹样式；

.table-bordered——为表格添加边框；

.table-hover——为<tbody>之内的每一行作悬停效果；

.table-condensed——让表格更加紧凑，单元格中的内补（padding）均会减半。

.active——鼠标悬停在行或单元格上时所设置的颜色；

.success——标识成功或积极的动作。

.info——标识普通的提示信息或动作；

.warning——标识警告或须要用户注意。

.danger——标识危急或潜在的带来负面影响的动作；

.table-responsive——创建响应式表格。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1">
  6.     <title>CSS全局样式_表格</title>
  7.     <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
  8.     <style type="text/css">
  9.  
  10.     </style>
  11. </head>
  12. <body>
  13. <div class="container table-responsive">
  14.     <table class="table table-striped table-bordered table-hover table-condensed">
  15.         <thead>
  16.             <tr class="active">
  17.                 <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th>
  18.                 <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th>
  19.                 <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th>
  20.             </tr>
  21.         </thead>
  22.         <tbody>
  23.             <tr class="info">
  24.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  25.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  26.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  27.             </tr>
  28.             <tr class="success">
  29.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  30.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  31.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  32.             </tr>
  33.             <tr class="warning">
  34.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  35.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  36.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  37.             </tr>
  38.             <tr class="danger">
  39.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  40.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  41.                 <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>
  42.             </tr>
  43.         </tbody>
  44.     </table>
  45. </div>
  46.  
  47. </body>
  48. </html>

Bootstrap全局CSS样式之表格的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  5. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  6. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

  7. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

随机推荐

  1. Linux驱动之IIC总线

    <作用> 电子设备中有很多IIC设备之间需要进行相互通信,这样就产生了IIC总线,常用来实现设备之间的数据通信.   <IIC总线结构> IIC总线只有两条线,一条是串行数据线 ...

  2. type="submit"表单提交理解

    1.默认为form提交表单 . button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作. 2.method=" ...

  3. 【枚举】AtCoder Regular Contest 095 C - Symmetric Grid

    题意:给你一个H*W的字符矩阵,一次操作可以任意将两行或者两列交换.问你是否能通过任意多次操作,使得其变为对称矩阵.对称的含义是:对于任何格子A(i,j),其都等于A(H-i+1,W-j+1). 显然 ...

  4. Github好用的Python库使用学习日记

    开源好用的Python库 Overview 所有内容基本源于下面的两个网站 awesome-python python3官方文档 you-get(命令行操作的媒体下载工具) you-get的git项目 ...

  5. 图解vim常用命令

    VI 即 Visual Interface,可视化接口,VIM是VI的增强版 (improved),两张图总结vim常用命令. 图片来自 https://www.cnblogs.com/yangjig ...

  6. Red Hat Enterprise Linux 7.4上安装Oracle 11.2.0.4

    1. 配置Yum源及关闭SeLinux [root@localhost ~]# mkdir /media/rhel [root@localhost ~]# mount /dev/cdrom /medi ...

  7. C#程序集系列12,C#编译器和CLR如何找寻程序集

    本篇体验C#编译器和CLR运行时如何查找程序集,并自定义CLR运行时查找程序集的方式. □ C#编译器和CLR运行时如何查找程序集 C#编译器在哪里?--在C:\Windows\Microsoft.N ...

  8. android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解，完整实际配置过程记录(原创)

      android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把 ...

  9. C/C++嵌入式开发面试题

    C/C++嵌入式开发面试题 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEA ...

  10. 解决 Ubuntu Software (Software Center) Crash 问题

    问题描述: no application data found 解决方式: sudo apt purge gnome-software ubuntu-software sudo apt autorem ...