BootStrap表格

发布时间：2020-12-17 21:03:56 所属栏目：安全来源：网络整理

导读：摘自《极客学院》 1、效果图： 2、html代码： !DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" link href="bootstrap.min.css" rel="stylesheet" title/title/headbody div class="container" !--响应式表格,浏览器缩放时自动生成滚动条 class="table

摘自《极客学院》

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!