.table——基础表格样式。

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>CSS全局样式_表格</title>

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

    <style type="text/css">

    </style>

</head>

<body>

<div class="container table-responsive">

    <table class="table table-striped table-bordered table-hover table-condensed">

        <thead>

            <tr class="active">

                <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th>

                <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th>

                <th>谈吴曦受伤舜天新帅直摇头 专门练过定位球破门</th>

            </tr>

        </thead>

        <tbody>

            <tr class="info">

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

            </tr>

            <tr class="success">

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

            </tr>

            <tr class="warning">

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

            </tr>

            <tr class="danger">

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

                <td>辽足主帅:输球主要责任在我 坚信可以保级成功</td>

            </tr>

        </tbody>

    </table>

</div>

</body>

</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. CF946D Timetable 动态规划

    预处理出每一行去掉$k$个1能获得的最小代价 之后做一次分组背包$dp$即可 预处理可以选择暴力枚举区间... 复杂度$O(n^3)$ #include <set> #include &l ...

  2. 【字符串哈希】The 16th UESTC Programming Contest Preliminary F - Zero One Problem

    题意:给你一个零一矩阵,q次询问,每次给你两个长宽相同的子矩阵,问你它们是恰好有一位不同,还是完全相同,还是有多于一位不同. 对每行分别哈希,先一行一行地尝试匹配,如果恰好发现有一行无法对应,再对那一 ...

  3. Alpha7

    难受

  4. 【洛谷】1494：[国家集训队]小Z的袜子【莫队】

    P1494 [国家集训队]小Z的袜子 题目描述 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… ...

  5. bzoj 1209

    三维凸包裸题. 1.通过volume计算有向体积,判断点与面的位置关系. 2.噪声 /********************************************************* ...

  6. 4、Redis中对List类型的操作命令

    写在前面的话:读书破万卷,编码如有神 -------------------------------------------------------------------- ------------ ...

  7. Spotlight on linux 监控 linux服务器资源

    步骤一:在window主机上安装spotlight 下载地址:http://worlddownloads.quest.com.edgesuite.net/Repository/www.quest.co ...

  8. Oracle | 给表和字段添加注释

    comment  on  column  表名.字段名   is  '注释内容'; comment on column OPERATOR_INFO.MAIN_OPER_ID is '归属操作员'; c ...

  9. How far away ？(DFS)

    How far away ? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  10. 3.3V与5V电平双向转换

    http://www.amobbs.com/thread-5541344-1-2.html 3.3V转5V:S3输入为0V时,NMOS管导通,S5＝S3＝0V:S3输入为3.3V时,NMOS管截止,S ...