<!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. http content-type accept的区别

    1.Accept属于请求头, Content-Type属于实体头. Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http报头结构:通用报头|请求报头|实体报头 响应方的http报 ...

  2. 51nod 1451 合法三角形 判斜率去重，时间复杂度O（n^2）

    题目: 这题我WA了3次,那3次是用向量求角度去重算的,不知道错在哪了,不得不换思路. 第4次用斜率去重一次就过了. 注意:n定义成long long,不然求C(3,n)时会溢出. 代码: #incl ...

  3. Centos 7.4 下初探Zabbix安装

    工作一波停一波起,感觉离开.net好久了. 最近工作中发现服务器监视都是用了zabbix,对于我这类不懂的狠狠弥补了一下知识. 无意发现zabbix带有api,就想开发个工具调用api来着.可是api ...

  4. VirtualBox 磁盘容量调整

    起因 此前用VBox,初始时动态或固定分配的磁盘容量用完了就再重新建一个磁盘,但是有个虚拟机的系统分区容量不够了,把整个磁盘都分成系统盘仍然不够,于是研究了下磁盘容量调整问题. 正文 1,从当前虚拟机 ...

  5. DotNetCore跨平台~一起聊聊Microsoft.Extensions.DependencyInjection

    写这篇文章的心情:激动 Microsoft.Extensions.DependencyInjection在github上同样是开源的,它在dotnetcore里被广泛的使用,比起之前的autofac, ...

  6. FPGA在AD采集中的应用

    AD转换,也叫模数转换,是将模拟信号转换为数字信号.目前包括电脑CPU,ARM,FPGA,处理的信号都只能是数字信号,所以数据信号在进入处理芯片前必须要进行AD转换. 在高速的AD转换中,FPGA以其 ...

  7. For in 与For of 区别

    For in 与For of  区别 for in遍历的是数组的索引(即键名)一般用于遍历对象:for(var index in obj):而for of遍历的是数组元素值:for(var value ...

  8. MVVM -- CallMethodAction 和 InvokeCommandAction

    MVVM实践教程   算算,从事Silverlight和WPF的开发也有1年多的时间了,虽然时间不算长,虽然还没有突出的成就,但是感觉也还算一般. 但是,从头至今都没有去认真研究和使用过MVVM,虽然 ...

  9. 热门开源项目：Guns-后台管理系统

    Guns基于SpringBoot,致力于做更简洁的后台管理系统,完美整合springmvc + shiro + mybatis-plus + beetl!Guns项目代码简洁,注释丰富,上手容易,同时 ...

  10. 深入浅出Diffie–Hellman

    一.作者 这个密钥交换方法,由惠特菲尔德·迪菲(Bailey Whitfield Diffie).马丁·赫尔曼(Martin Edward Hellman)于1976年发表. 二.说明 它是一种安全协 ...