zoukankan      html  css  js  c++  java

  • Bootstrap表格样式(附源码文件)--Bootstrap

    1、表格默认样式

    <h4>表格默认样式</h4>
    <table><!--默认样式-->
    　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    2、表格基础样式

    <h4>表格基础样式</h4>
    <table class="table"><!--表格基础样式-->
    　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    3、带背景条纹的表格

    <h4>带背景条纹</h4>
    <table class="table table-striped">
    　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    4、带边框的表格

    <h4>带边框的表格</h4>
    <table class="table table-bordered">
    　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    5、显示鼠标悬停效果的表格

    <h4>鼠标悬停的表格</h4>
    <table class="table table-bordered table-hover">
    　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    6、紧凑型表格

    <h4>紧凑型表格</h4>
    <table class="table table-bordered table-condensed">
    　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    7、表格行内样式

    <h4>表格行内样式</h4>
    <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>20</td></tr>
    　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
    　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
    </table>

    8、响应式表格

    <h4>响应式表格</h4>
    <div class="row">
    　　<div class="col-sm-4">
    　　　　<div class="table-responsive">
    　　　　　　<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>20</td></tr>
    　　　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　</table>
    　　　　</div>
    　　</div>
    </div>

    9、demo.html：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    　　<meta charset="UTF-8">
    　　<title>Bootstrap表格样式</title>
    　　<link rel="stylesheet" href="css/bootstrap.css">

    　　<meta name="viewport" content="width=device-width, initial-scale=1"/>

    </head>
    <body>
    　　<div class="container">
    　　　　<h4>表格默认样式</h4>
    　　　　<table><!--默认样式-->
    　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>表格基础样式</h4>
    　　　　<table class="table"><!--表格基础样式-->
    　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>带背景条纹</h4>
    　　　　<table class="table  table-striped">
    　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>带边框的表格</h4>
    　　　　<table class="table table-bordered">
    　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>鼠标悬停的表格</h4>
    　　　　<table class="table table-bordered table-hover">
    　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>紧凑型表格</h4>
    　　　　<table class="table table-bordered table-condensed">
    　　　　　　<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>表格行内样式</h4>
    　　　　<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>20</td></tr>
    　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　</table>
    　　　　<h4>响应式表格</h4>
    　　　　<div class="row">
    　　　　　　<div class="col-sm-4">
    　　　　　　　　<div class="table-responsive">
    　　　　　　　　　　<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>20</td></tr>
    　　　　　　　　　　　　<tr class="warning"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　　　　　　　<tr class="danger"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　　　　　　　<tr class="active"><td>1</td><td>小玲</td><td>20</td></tr>
    　　　　　　　　　　</table>
    　　　　　　　　</div>
    　　　　　　</div>
    　　　　</div>
    </div>
    </body>
    </html>

    Effect Picture：

     

    源码文件下载：Bootstrap表格样式.zip

    文章原创，转载请注明出处，感谢大家的合作！
  • 相关阅读:
    AI零基础入门之人工智能开启新时代—下篇
    AI零基础入门之人工智能开启新时代—上篇
    Markdown 快速入门
    Linux GCC/G++ 基础（1） 之
    解决 Ubuntu 下使用 sublime text 3 无法输入中文
    WPF：界面布局之- TaiChi
    常用命令之- touch
    微软net平台是不是快完了？看了一天智联招聘,现在连传统的网站或系统平台都不怎么用net了
    蓝牙Ble开发(支持API18<Android 4.3 Jelly>及以上)
    Android系统休眠对程序的影响以及处理
  • 原文地址：https://www.cnblogs.com/qikeyishu/p/7679517.html
Copyright © 2011-2022 走看看