zoukankan      html  css  js  c++  java

  • bootstrap注意事项（四）表格

    1.基本实例

    为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <table class="table"><caption>Optional table caption.</caption>
    <thead>
    <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    2.条纹状表格

    通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

    跨浏览器兼容性

    条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <table class="table table-striped"><caption>Optional table caption.</caption>
    <thead>
    <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    3.带边框的表格

    添加 .table-bordered 类为表格和其中的每个单元格增加边框。

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <table class="table table-bordered"><caption>Optional table caption.</caption>
    <thead>
    <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    4.鼠标悬停

    通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <h1>Hello, 汇智网!</h1>
    <table class="table table-hover"><caption>Optional table caption.</caption>
    <thead>
    <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    5.紧缩表格

    通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <h1>Hello, 汇智网!</h1>
    <table class="table table-condensed"><caption>Optional table caption.</caption>
    <thead>
    <tr>
    <th>#</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Username</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row">1</th>
    <td>Mark</td>
    <td>Otto</td>
    <td>@mdo</td>
    </tr>
    <tr>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    </tr>
    <tr>
    <th scope="row">3</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    bootstrap.min.css里的

    .table-condensed > thead > tr > th,
    .table-condensed > tbody > tr > th,
    .table-condensed > tfoot > tr > th,
    .table-condensed > thead > tr > td,
    .table-condensed > tbody > tr > td,
    .table-condensed > tfoot > tr > td {
    padding: 5px;
    }

    6.状态类

    通过这些状态类可以为行或单元格设置颜色。

    Class描述
    .active 鼠标悬停在行或单元格上时所设置的颜色
    .success 标识成功或积极的动作
    .info 标识普通的提示信息或动作
    .warning 标识警告或需要用户注意
    .danger 标识危险或潜在的带来负面影响的动作

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="container">
    <table class="table"><caption>上下文表格布局</caption>
    <thead>
    <tr>
    <th>产品</th>
    <th>付款日期</th>
    <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
    <td>产品1</td>
    <td>23/11/2013</td>
    <td>待发货</td>
    </tr>
    <tr class="success">
    <td>产品2</td>
    <td>10/11/2013</td>
    <td>发货中</td>
    </tr>
    <tr class="warning">
    <td>产品3</td>
    <td>20/10/2013</td>
    <td>待确认</td>
    </tr>
    <tr class="danger">
    <td>产品4</td>
    <td>20/10/2013</td>
    <td>已退货</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

    向使用辅助技术的用户传达用意

    通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术 -- 例如屏幕阅读器 -- 浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式 -- 例如应用了 .sr-only类而隐藏的文本 -- 来表达出来。

    .sr-only {
    position: absolute;
    1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    }

    7.响应式表格

    将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

    垂直方向的内容截断

    响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。

    Firefox 和 fieldset 元素

    Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。除非使用我们下面提供的针对 Firefox 的 hack 代码，否则无解：

    1. @-moz-document url-prefix() {
    2. fieldset { display: table-cell; }
    3. }

    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
    </head>
    <body>
    <div class="table-responsive">
    <h1>Hello, 汇智网!</h1>
    <table class="table"><caption>上下文表格布局</caption>
    <thead>
    <tr>
    <th>产品</th>
    <th>付款日期</th>
    <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>产品1</td>
    <td>23/11/2013</td>
    <td>待发货</td>
    </tr>
    <tr>
    <td>产品2</td>
    <td>10/11/2013</td>
    <td>发货中</td>
    </tr>
    <tr>
    <td>产品3</td>
    <td>20/10/2013</td>
    <td>待确认</td>
    </tr>
    <tr>
    <td>产品4</td>
    <td>20/10/2013</td>
    <td>已退货</td>
    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>
  • 相关阅读:
    Vim step by step
    Ubuntu解压命令全览
    这样才能使本地Mysql服务允许被外部主机连接(两步)
    [Python] logging.logger
    Python Selenium
    MySQL中char、varchar和text的区别
    Way to MongoDB
    Python误区之strip,lstrip,rstrip
    Android Studio Tips
    Way to tmux
  • 原文地址：https://www.cnblogs.com/qiuzhimutou/p/4743590.html
Copyright © 2011-2022 走看看