zoukankan      html  css  js  c++  java
  • Bootstrap:表格

    表格

    和之前的表格相比,标签更丰富更加语义化,效果更佳美观

    1 丰富的标签

      <table>: 为表格添加基础样式

      <thead>: 表格标题行的容器元素(<tr>)

      <tbody>:表格主体中的表格行的容器元素 (<tr>)

      <tr>: 表格行

      <td>: 默认的表格单元格

      <th>: 特殊的表格单元格,(居中和加粗的效果)。必须在<thead> 内使用

      <caption>:关于表格存储内容的描述或总结

      

    2 好看的类样式

      .table 为任意 <table>添加基本样式 (只有横向分隔线)

      .table-striped 在 <tbody>内添加斑马线形式的条纹 ( IE8 不支持) ,隔行变色

      .table-bordered 为所有表格的单元格添加边框

      .table-hover 在 内的任一行启用鼠标悬停状态,鼠标悬停高亮突出显示

      .table-condensed 让表格更加紧凑

    3 情景色类样式

      适合应用在<th>、<tr>,<td>

        .active 激活效果(悬停颜色)

        .success 表示成功或积极的动作

        .info 表示普通的提示信息或动作

        .warning 表示警告或需要用户注意

        .danger 表示危险或潜在的带来的负面影响的动作

    4 响应式表格

    表格的父元素设置响应式 -- 小于768px,出现边框

    <table class="table table-responsive">
        <caption>经营产品大全</caption>
        <thead>
            <tr>
                <th>产品</th>
                <th>付款日期</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <td>产品1</td>
                <td>2020-1-1</td>
                <td>待发货</td>
            </tr>
            <tr class="active">
                <td>产品2</td>
                <td>2020-1-2</td>
                <td>已发货</td>
            </tr>
            <tr class="success">
                <td>产品3</td>
                <td>2020-1-3</td>
                <td>未付款</td>
            </tr>
            <tr class="warning">
                <td>产品4</td>
                <td>2020-1-4</td>
                <td>已退货</td>
            </tr>
            <tr class="danger">
                <td>产品5</td>
                <td>2020-1-5</td>
                <td>已退款</td>
            </tr>
        </tbody>
    </table>    
  • 相关阅读:
    委托的说明和举例
    用C#编写获取远程IP,MAC的方法
    200个Gmail邀请,要的请留下邮箱地址
    .NET中各种数据库连接大全
    .net中何有效的使用Cache
    55种网页常用小技巧(javascript) (转)
    一个WEB项目安装包,自动配置数据库,config文件和虚拟目录。。(转)
    windows xp sp2后所有更新
    C#反射实例(转)
    可扩展的应用程序:新增功能时无须重新编译
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15247308.html
Copyright © 2011-2022 走看看