.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. PreEssentials与MFC集成使用

    ProEssentials是Gigasoft公司开发的一个功能十分强大的分发免费的工控图表.它提供了几乎所有的曲线显示形式,支持多种开发工具,提供以下接口供开发者调用:.NET(WinForm).AS ...

  2. djongo form.is_valid 返回false的解决方法

    在用djongo编写网站时,有时点击提交按钮之后,并未提交,通过debug会发现是form.is_valid()返回false造成的.但是,具体原因往往并不容易找. 这时在提交的html中添加如下代码 ...

  3. parcelable 和 serializable 区别

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha serializable 是 java 中的 序列化 接口. parcelable 是 ...

  4. 线性表之顺序表C++实现

    线性表之顺序表 一.头文件:SeqList.h //顺序线性表的头文件 #include<iostream> ; //定义顺序表SeqList的模板类 template<class ...

  5. [BZOJ4561][JLOI2016]圆的异或并(扫描线)

    考虑任何一条垂直于x轴的直线,由于圆不交,所以这条直线上的圆弧构成形似括号序列的样子,且直线移动时圆之间的相对位置不变. 将每个圆拆成两边,左端加右端删.每次加圆时考虑它外面最内层的括号属于谁.用se ...

  6. BZOJ 3956: Count 主席树 可持久化线段树 单调栈

    https://www.lydsy.com/JudgeOnline/problem.php?id=3956 从描述可以得到性质: 每个好点对 ( 除了差值为1的好点对 ) 中间的数 ( i , j ) ...

  7. BZOJ.2428.[HAOI2006]均分数据(随机化贪心/模拟退火)

    题目链接 模拟退火: 模拟退火!每次随机一个位置加给sum[]最小的组. 参数真特么玄学啊..气的不想调了(其实就是想刷刷最优解) 如果用DP去算好像更准.. //832kb 428ms #inclu ...

  8. HDU 5137 How Many Maos Does the Guanxi Worth 最短路 dijkstra

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  9. NSAttributedString描述

    字符属性 字符属性可以应用于 attributed string 的文本中. NSString *const NSFontAttributeName;(字体) NSString *const NSPa ...

  10. Python编程练习题学习汇总

    实例一:数学计算 简述:这里有四个数字,分别是:1.2.3.4提问:能组成多少个互不相同且无重复数字的三位数?各是多少? Python解题思路分析:可填在百位.十位.个位的数字都是1.2.3.4.组成 ...