<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        .table-hover{background-color: #e29c84;}
    </style>
</head>
<body>
<div class="container">
    <h1>带条纹</h1>
    <table class="table table-striped">
        <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
    </table>

    <h1>带边框</h1>
    <table class="table table-bordered table-striped">
        <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
    </table>
    <h1>悬停</h1>
    <table width="600" class="table table-bordered table-striped table-hover">
        <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
    </table>

    <h1>紧凑/行内样式</h1>
    <table class="table table-bordered table-condensed">
        <tr class="info"><th>序号</th><th>姓名</th><th>年龄</th></tr>
        <tr class="success"><td>1</td><td>张三</td><td>22</td></tr>
        <tr class="warning"><td>1</td><td>张三</td><td>22</td></tr>
        <tr class="danger"><td>1</td><td>张三</td><td>22</td></tr>
        <tr class="active"><td>1</td><td>张三</td><td>22</td></tr>
        <tr><td>1</td><td>张三</td><td>22</td></tr>
    </table>

    <hr/>
    <hr />
    <div class="row">
        <div class="col-sm-4">
            <h1>响应式表格要放在div里</h1>
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
                    <tr><td>1</td><td>张三</td><td>22</td></tr>
                    <tr><td>1</td><td>张三</td><td>22</td></tr>
                    <tr><td>1</td><td>张三</td><td>22</td></tr>
                    <tr><td>1</td><td>张三</td><td>22</td></tr>
                    <tr><td>1</td><td>张三</td><td>22</td></tr>
                </table>
            </div>
        </div>

    </div>
</div>
</body>
</html>

⑤bootstrap表格使用基础案例的更多相关文章

  1. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  2. 【10】了解Bootstrap栅格系统基础案例（5）

    这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...

  3. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  4. 【8】了解Bootstrap栅格系统基础案例（3）

    这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...

  5. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  6. ⒂bootstrap组件 折叠 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. ⒀bootstrap组件 选项卡 基础案例

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  8. ④bootstrap列表使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ③bootstrap文本使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 一个综合实例讲解vue的基础知识点。

    本文通过一个简单的实例来讲解一下vue的基本知识点.通过这个综合实例的讲解,vue的基础知识就会掌握的差不多了. 首先看一下项目的效果:

  2. JS 数据处理技巧及小算法汇总( 一）

    前言: 金秋九月的最后一天,突然发现这个月博客啥也没更新,不写点什么总觉得这个月没啥长进,逆水行舟,不进则退,前进的路上贵在坚持,说好的每个月至少一到两篇,不能半途而废!好多知识写下来也能加深一下自身 ...

  3. JSP入门 Filter

    Filter,它的名字是过滤器,可以批量拦截修改servlet的请求和响应. 需要实现接口Filter 配置 <filter> <filter-name>EncodingFil ...

  4. UI自动化测试（三）对页面中定位到的元素对象做相应操作

    前两天分别讲述了UI自动化测试基础以及对页面元素该如何进行定位,这一篇自然就是对定位到的页面元素对象进行相应操作啦. 阅读目录 1.常用操作元素对象的方法 2.鼠标事件操作 3.键盘事件操作 4.We ...

  5. asp.net core封装layui组件示例分享

    用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更 ...

  6. 我从.net转别的语言的遭遇，现在貌似又要回头（一）

    从2016年开始,作为公司最后的一个.net部门,被迫转向了php. php里面装得一手什么逼呢? 首先,你要来几本入门的书,linux,mysql,php基础语法,nginx或apache.哥那时候 ...

  7. NodeJS 初学之安装配置环境

    [TOC] 1.环境安装 操作系统: Ubuntu 16.04.2 LTS 1.1安装nvm ryan@ryan-900X5L:~/temp$ curl https://raw.githubuserc ...

  8. Hello World -- 第一篇博客

    今年注定是不寻常的一年,因为技术,接触了许多大牛.通过一篇篇博文,看到了大牛们勤奋好学.孜孜不倦的精神,于是决定也开个博客,向大牛学习. 博客开了,写点什么呢?奈何肚子里墨水不多,吐出来也多是白沫,不 ...

  9. 容器平台选型的十大模式：Docker、DC/OS、K8S 谁与当先？

    作者:刘超   来自:网易云 基础服务 无论是在社区,还是在同客户交流的过程中,总会被问到到底什么时候该用 Docker?什么时候用虚拟机?如果使用容器,应该使用哪个容器平台? 显而易见,我不会直接给 ...

  10. 斐讯 FIR151M 频繁掉线（OpenWRT解决方案）

    0. 现象与前言 在使用斐讯 FIR151M 路由器连接网络时,传输数据时频繁掉线. 官方固件刷了两个版本,问题未解决. 建议高级用户看本教程,要做好不能使用 Web 管理界面的心理准备. 1. 准备 ...