零基础Bootstrap入门教程(7)--使用表格-6ren

零基础Bootstrap入门教程(7)--使用表格

转载作者：知者更新时间：2024-03-13 05:28:54

点此查看：完整教程、源代码及配套视频

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. 小结

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

文章推荐：零基础Bootstrap入门教程(13)--图像和缩略图组

文章推荐： 2、通过helloworld来认识下backbone

文章推荐：零基础Bootstrap入门教程(10)--使用输入组来组合控件

文章推荐： 7、backbone实例todos分析（一）

教程
我正在做一个关于代码学院的教程，我在这里收到一个错误，说“看起来你的函数没有返回‘唉，你没有资格获得信用卡。资本主义就是这样残酷。’”当收入参数为 75 时。”但是该字符串在控制台中返回(由于某种原因
Go 教程 : Channels, Buffered Channels 教程
我正在阅读 Go 的官方教程，但很难理解 Channel 和 Buffered Channels 之间的区别。教程的链接是 https://tour.golang.org/concurrency/2和
MSHTML 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
LinqPad 教程
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
JavaSpaces 教程
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
iOS5高级编程书籍/教程
作为 iOS 新手，有大量书籍可以满足学习基础知识的需求。现在，我想转向一些高级阅读，例如 OAuth 和 SQLite 以及动态 API 派生的 TableView 等。您可以推荐任何资源吗？最佳
Selenium 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Android开源游戏引擎+教程
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
c - 教程
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 8 年前。
【教程】AWD中如何通过Python批量快速管理服务器？
前言很多同学都知道，我们常见的CTF赛事除了解题赛之外，还有一种赛制叫AWD赛制。在这种赛制下，我们战队会拿到一个或多个服务器。服务器的连接方式通常是SSH链接，并且可能一个战队可能会同时有
1、Memcached 教程
Memcached是一个自由开源的，高性能，分布式内存键值对缓存系统 Memcached 是一种基于内存的key-value存储，用来存储小块的任意数据（字符串、对象），这些数据可以是数据库调用、A
01、Perl 教程
Perl 又名实用报表提取语言，是 Practical Extraction and Report Language 的缩写 Perl 是由拉里·沃尔（Larry Wall）于19
01、WSDL 教程
WSDL 是 Web Services Description Language 的缩写，翻译成中文就是网络服务描述语言 WSDL 是一门基于 XML 的语言，用于描述 Web Services 以
Perl UMMF 教程？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
用于创建自定义用户控件的 WPF 教程
我正在寻找解释在 WPF 中创建自定义用户控件的教程。我想要一个控件，它结合了一个文本 block 、一个文本框和一个启动通用文件打开对话框的按钮。我已经完成了布局，一切都连接好了。它有效，但它是三
sdk - dynamodb 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Django 教程，后退按钮混淆
我接近 fourth page of the Django tutorial 的开始看着vote查看，最后是这样的: # Always return an HttpResponseRedirect a
emacs - ClojureBox 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Qt QSS 教程
是否有任何好的 Qt QSS 教程，或者在某个地方我可以看到样式小部件的示例？如果某处可用，我想要一些完整的引用。除了有关如何设置按钮或某些选项卡样式的小教程外，我找不到任何其他内容。最佳答案 Qt
ASP.NET 教程
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he

知者

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城