继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Bootstrap教程(7)--使用表格

程序员大阳
关注TA
已关注
手记 357
粉丝 1.5万
获赞 1523

1. 概述

HTML自带的表格样式实在是一言难尽,非常难看。有了Bootstrap框架后,终于可以拥有一款通用的、大气的表格可以拿来即用了。

本篇就来讲述下Bootstrap框架下表格的用法。

2. 基本表格

为table添加.table类,即可设置Bootstrap样式的表格,代码如下:

<!DOCTYPE html>
<html>

<head>
    <title>boostrap-table</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 引入jQuery -->
    <script src=" https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <caption>基本表格</caption>
                    <thead>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>语文</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>数学</td>
                            <td>90</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">2020年期末考试成绩单</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

效果如下,可以看出基本表格的显示效果还是非常规范大气的。
在这里插入图片描述

3. 表格样式类

Bootstrap还提供了更加高级的表格样式,应用之后更加好看,包括:

  • .table-striped,为表格行添加斑马纹
  • .table-bordered,为表格添加边框
  • .table-hover,为表格的行添加悬停效果
  • .table-condensed,使表格更加紧凑

下面我们来对比演示下各个表格的效果,代码如下:

 			<div class="col-md-12">
                <table class="table table-striped">
                    <caption>table-striped表格</caption>
                    <thead>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>语文</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>数学</td>
                            <td>90</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">2020年期末考试成绩单</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="col-md-12">
                <table class="table table-bordered">
                    <caption>table-bordered表格</caption>
                    <thead>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>语文</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>数学</td>
                            <td>90</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">2020年期末考试成绩单</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="col-md-12">
                <table class="table table-hover">
                    <caption>table-hover表格</caption>
                    <thead>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>语文</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>数学</td>
                            <td>90</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">2020年期末考试成绩单</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="col-md-12">
                <table class="table table-condensed">
                    <caption>table-condensed表格</caption>
                    <thead>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>语文</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>数学</td>
                            <td>90</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">2020年期末考试成绩单</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

对应效果如下,当然这些样式类可以叠加设置到一个表格上,根据需求选择即可。
在这里插入图片描述

4. 设置表格行、列的样式

可以为表格的行、列单独设置样式,可选择的类包括:

  • .active,显示悬停颜色
  • .info,显示蓝色,表示提示意味
  • .success,显示绿色,表示成功意味
  • .warning,黄色,表示警告意味
  • .danger,显示红色,表示危险、警告意味

我们尝试使用下上面的类,代码如下:

 				<table class="table table-bordered table-condensed">
                    <caption>设置行列样式</caption>
                    <thead>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </thead>
                    <tbody>
                        <tr class="info">
                            <td>张三</td>
                            <td>语文</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>张三</td>
                            <td>数学</td>
                            <td class="success">90</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3">2020年期末考试成绩单</td>
                        </tr>
                    </tfoot>
                </table>

对应效果如下:

图片描述

5. 响应式表格

当屏幕宽度比较窄时,表格的样式会变得很难看。如下图,当某行文字比较长时,会导致换行效果,表格变得混乱。
在这里插入图片描述
此时可以使用一个.table-responsive类的元素将表格包围起来,这样表格变为响应式表格,当宽度不足时,会自动显示横向滚动条,样式会更加美观。代码如下:

				<div class="table-responsive">
                    <table class="table table-bordered table-condensed">
                        <caption>响应式表格</caption>
                        <thead>
                            <th>姓名</th>
                            <th>课程</th>
                            <th>成绩</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>张三张三张三张三张三张三张三张三张三张三张三张三张三张三</td>
                                <td>语文</td>
                                <td>80</td>
                            </tr>
                            <tr>
                                <td>张三</td>
                                <td>数学</td>
                                <td>90</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">2020年期末考试成绩单</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

效果如下,这样在手机等小型设备使用时,会比较方便。
图片描述

6. 小结

建议为所有表格应用响应式的样式,便于兼容各类设备。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP