zoukankan      html  css  js  c++  java
  • Bootstrap 响应式表格

    响应式表格

    通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:响应式表格</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />

    </head>
    <body>
    <div class="table-responsive">

    <table class="table table-bordered table-condensed table-hover table-striped">
    <caption>Bootstrap响应式表格</caption>
    <thead >
    <tr class="success">
    <th>序号</th><th>课程</th>
    </tr>
    </thead>
    <tbody >
    <tr class="active">
    <td>1</td>
    <td>HTML5</td>
    </tr>
    <tr class="info">
    <td>2</td>
    <td>CSS3</td>
    </tr>
    <tr class="warning">
    <td>3</td>
    <td>JavaScript</td>
    </tr>
    <tr class="danger">
    <td>4</td>
    <td>jQuery</td>
    </tr>
    <tr>
    <td>5</td>
    <td>Bootstrap</td>
    </tr>
    <tr>
    <td>6</td>
    <td>Aanglur JS</td>
    </tr>
    </tbody>
    <tfoot></tfoot>
    </table>
    </div>

    <script src="Css/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    VC编程锦集-1
    VC窗口关闭调用顺序
    Windows消息WM_USER、WM_APP的区别
    Toolbar添加控件;创建多行toolbar;重新排列toolbar
    SQL模糊查询详解
    MySql格式化日期
    Apache PHP 服务环境配置
    kvm.install
    repo搭建
    apache故障处理
  • 原文地址:https://www.cnblogs.com/melao2006/p/4986733.html
Copyright © 2011-2022 走看看