BootStrap表格

来源：互联网发布：mysql 一小时之前编辑：程序博客网时间：2024/06/10 07:43
摘自《极客学院》
1、效果图：
2、html代码：
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link href="bootstrap.min.css" rel="stylesheet">    <title></title></head><body>    <div class="container">        <!--响应式表格,浏览器缩放时自动生成滚动条 class="table-responsive"-->        <div class="table-responsive">        <!--<div class="row" name="table1">-->            <!--紧凑型 class="table table-condensed"-->            <!--<table class="table table-condensed">-->            <!--条纹状 边框 鼠标悬停-->            <table class="table table-striped table-bordered table-hover">                <thead>                    <!--指定颜色 active-->                    <tr class="active">                        <th>表格标题</th>                        <th>表格标题</th>                        <th>表格标题</th>                    </tr>                </thead>                <tbody>                    <tr class="warning">                        <td>表格内容</td>                        <td>表格内容</td>                        <td>表格内容</td>                    </tr>                    <tr class="info">                        <td>表格内容表格内容表格内容</td>                        <td>表格内容表格内容表格内容</td>                        <td>表格内容表格内容表格内容</td>                    </tr>                    <tr>                        <td>表格内容</td>                        <td>表格内容</td>                        <td>表格内容</td>                    </tr>                    <tr class="danger">                        <td>表格内容表格内容表格内容</td>                        <td>表格内容表格内容表格内容</td>                        <td>表格内容表格内容表格内容</td>                    </tr>                </tbody>            </table>        </div>    </div></body></html>
0 0