zoukankan      html  css  js  c++  java
  • bootstrap表格样式

    <body>
    <div class="container">
    <table class="table" >  //表格基本样式
    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr><td>张三</td><td>男</td><td>15</td></tr>
    <tr><td>李四</td><td>男</td><td>15</td></tr>
    <tr><td>王五</td><td>男</td><td>15</td></tr>
    </table>
    <table class="table table-striped" >//表格条纹
    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr><td>张三</td><td>男</td><td>15</td></tr>
    <tr><td>李四</td><td>男</td><td>15</td></tr>
    <tr><td>王五</td><td>男</td><td>15</td></tr>
    </table>
    <table class="table table-striped table-bordered" >//表格边框
    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr><td>张三</td><td>男</td><td>15</td></tr>
    <tr><td>李四</td><td>男</td><td>15</td></tr>
    <tr><td>王五</td><td>男</td><td>15</td></tr>
    </table>
    <h1>悬停</h1>
    <table class="table table-striped table-bordered table-hover" >
    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr><td>张三</td><td>男</td><td>15</td></tr>
    <tr><td>李四</td><td>男</td><td>15</td></tr>
    <tr><td>王五</td><td>男</td><td>15</td></tr>
    </table>
    <h1>紧凑</h1>
    <table class="table table-striped table-bordered table-hover table-condensed" >
    <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr><td>张三</td><td>男</td><td>15</td></tr>
    <tr><td>李四</td><td>男</td><td>15</td></tr>
    <tr><td>王五</td><td>男</td><td>15</td></tr>
    </table>
    <h1>行样式</h1>
    <table class="table table-striped table-bordered table-hover table-condensed" >
    <tr class="info"><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr class="success"><td>张三</td><td>男</td><td>15</td></tr>
    <tr class="warning"><td>李四</td><td>男</td><td>15</td></tr>
    <tr class="active"><td>王五</td><td>男</td><td>15</td></tr>
    </table>
    <div class="table-responsive">
    <h1>响应式表格</h1>
    <table class="table table-striped table-bordered table-hover table-condensed" >
    <tr class="info"><th>姓名</th><th>性别</th><th>年龄</th></tr>
    <tr class="success"><td>张三</td><td>男</td><td>15</td></tr>
    <tr class="warning"><td>李四</td><td>男</td><td>15</td></tr>
    <tr class="active"><td>王五</td><td>男</td><td>15</td></tr>
    </table></div>
    </div>
    </body>

    类说明:.table表格基本样式

               .table-striped表示表格条纹

               .table-bordered表示表格边框

               .table-condensed表格内容紧凑

               .table-hover鼠标悬停

                状态类(可以用这个设置表格每行的颜色):.active 鼠标在行或单元格上时所设置的颜色

                           .success标识成功或积极的动作

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

                           .warning表示警告或者用户注意

                           .denger 标识危险或潜在的带来负面影响的动作

  • 相关阅读:
    什么是 FutureTask?使用 ExecutorService 启动任务?
    WeakHashMap 是怎么工作的?
    什么是 Executors 框架?
    什么是原子操作?在 Java Concurrency API 中有哪些原 子类(atomic classes)?
    Java 中是如何支持正则表达式操作的?
    JDBC 能否处理 Blob 和 Clob?
    Java 中你怎样唤醒一个阻塞的线程?
    Java Concurrency API 中的 Lock 接口(Lock interface) 是什么?对比同步它有什么优势?
    为什么我们调用 start()方法时会执行 run()方法,为什么 我们不能直接调用 run()方法?
    什么是线程组,为什么在 Java 中不推荐使用?
  • 原文地址:https://www.cnblogs.com/jinhong/p/6113052.html
Copyright © 2011-2022 走看看