<!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. Python迭代器，生成器--精华中的精华

    1. 迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大 ...

  2. Java并发之线程中断

    前面的几篇文章主要介绍了线程的一些最基本的概念,包括线程的间的冲突及其解决办法,以及线程间的协作机制.本篇主要来学习下Java中对线程中断机制的实现.在我们的程序中经常会有一些不达到目的不会退出的线程 ...

  3. Java的基本程序设计结构【2】

    注释 与大多数程序设计语言一样,Java 中的注释也不会出现在可执行程序中.因此,可以在源程序中根据需要添加任意多的注释,而不必担心可执行代码会膨胀.在Java 中,有三种书写注释的方式. 最常用的方 ...

  4. 运行Chromium浏览器缺少google api密钥无法登录谷歌账号的解决办法

    管理员身份运行CMD,然后依次输入以下三行内容: setx GOOGLE_API_KEY "AIzaSyAUoSnO_8k-3D4-fOp-CFopA_NQAkoVCLw"setx ...

  5. How many Knight Placing? UVA - 11091

    How many Knight Placing? Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %l ...

  6. JavaWeb（六）之MVC与三层架构设计

    前言 这段时间要学习hadoop,但是也希望把自己的web知识复习起来.所以花自己休息的时间把这些web的知识好好的巩固一下!没有什么可以阻挡我前进的脚步. 首先我们先了解一下: C/S:客户端 / ...

  7. 英特尔：不再公布PC处理器多核睿频数据

    据了解,以往英特尔官方有三个频率数据:基础主频:Turbo 2.0(多核)频率:以及Turbo 3.0(单核)频率.现在被隐匿的则是Turbo 2.0(多核)频率. 对此,英特尔在回应媒体时表示,给出 ...

  8. Unity3D - Animator Controller循环依赖

    问题 假设有2个Animator Controller,分别命名为TestControllerLhs.controller以及TestControllerRhs.controller.在TestCon ...

  9. 使用 Hibernate 和 MySQL 需要知道的五件事

    https://www.thoughts-on-java.org/5-things-you-need-to-know-when-using-hibernate-with-mysql/ 作者:Thorb ...

  10. Andrid 高级程序员面试题

    ==========================20150518===================================一. Acitvity组件 1. 生命周期&kille ...