Bootstrap学习笔记 03 - Tables

最新推荐文章于 2023-07-11 12:15:00 发布
最新推荐文章于 2023-07-11 12:15:00 发布
阅读量343 收藏
点赞数 1
分类专栏： Bootstrap 文章标签： bootstrap 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011304970/article/details/78403074
版权

Basic Table

<table class="table">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

Striped Rows

<table class="table table-striped">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

Bordered Table

<table class="table table-bordered">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

Hover Rows

<table class="table table-hover">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

Condensed Table

<table class="table table-condensed">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

Contextual Classes

<table class="table">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr class="active"><td>active</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr class="success"><td>success</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr class="info"><td>info</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr class="warning"><td>warning</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr class="danger"><td>danger</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

多个样式

多个样式可以结合：

<table class="table table-condensed table-bordered table-striped">
    <thead>
        <tr><th>Name</th><th>Email</th><th>Address</th></tr>
    </thead>
    <tbody>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
        <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
    </tbody>
</table>

这里写图片描述

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
        <title>Tables</title>
    </head>
    <body>
        <div class="container">

            <h1>Basic Table</h1>
            <table class="table">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

            <h1>Striped Rows</h1>
            <table class="table table-striped">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

            <h1>Bordered Table</h1>
            <table class="table table-bordered">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

            <h1>Hover Rows</h1>
            <table class="table table-hover">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

            <h1>Condensed Table</h1>
            <table class="table table-condensed">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

            <h1>Contextual Classes</h1>
            <table class="table">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr class="active"><td>active</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr class="success"><td>success</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr class="info"><td>info</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr class="warning"><td>warning</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr class="danger"><td>danger</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

            <h1>Composed Classes</h1>
            <table class="table table-condensed table-bordered table-striped">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Address</th></tr>
                </thead>
                <tbody>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                    <tr><td>Cynhard</td><td>xxxx@126.com</td><td>China</td></tr>
                </tbody>
            </table>

        </div>
    </body>
</html>

这里写图片描述

Cynhard85
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap学习笔记-导航和导航条
免惘
07-07 1675
导航 .nav 类作为基类（都要有） 标签页：.nav-tabs 胶囊式标签页：.nav-pills ；可以选择竖着的菜单：.nav-stacked 两端对齐（按钮）自适应：.nav-justified ，在大于 768px 的屏幕上 ，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。(小于768 变成竖着的了) 如果要让线也自
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Bootstrap(3) 表格与按钮
weixin_30767921的博客
07-30 58
1、表格 基本格式，实现基本的表格样式 <table class="table"> <thead> <tr> <th>编号</th> <th>姓名</th> ...
【Bootstrap 学习笔记】如何使用 Less
最新发布
DeepLearning_的博客
07-11 241
CSS 是一门非程序式语言，没有变量、函数、作用域等概念。CSS 被称之为静态样式语言，从而导致样式文件的修改和维护困难。动态样式语言是指，在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
BootStrap学习笔记
qq_41816516的博客
05-17 186
BootStrap概述 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 好处： 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 响应式布局。 * 同一套页面可以兼容不同分辨率的设备。 快速入门 下载Bootstrap
BootStrap学习笔记（一）
Starrk的盗梦空间
03-06 321
什么是 Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的. 使用HTML5 Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代...
下载bootstrap并应用（学习笔记4）
qyqyqyi的博客
01-24 1075
利用bootstrap装饰网站
Bootstrap3学习笔记（3）--表格
litdwg的学习轨迹
12-25 820
文中代码和表格来自：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tables.php 只需要在table标签上使用.table类，就可以使用bootstrap默认的表格样式 如果需要行背景有交替变化，可以这样设定： 如果需要边框，可以这样设定： 如果希望鼠标移动到内容行上有响应效果，可以这
Bootstrap学习笔记系列2-------Bootstrap简单表格处理
weixin_33872660的博客
11-12 52
标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素，用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行的容器元素，用来存放 <th> 在中使用，用来存放列名单元格 <td> 表数据单元格 <caption> 关于表格存储内容的描述或者总结 应用于表格样式的类（全部...
学习笔记0514----LNMP架构
嘻哈记的运维学习之路
05-14 393
LNMP架构预习笔记 预习笔记 这里是引用 12.1 LNMP架构介绍 12.2 MySQL安装 12.3/12.4 PHP安装 12.5 Nginx介绍 12.6 Nginx安装 扩展 Nginx为什么比Apache Httpd高效：原理篇 http://www.toxingwang.com/linux-unix/linux-basic/1712.html https://www.zhihu...
django-tables2-column-shifter:django-tables2的简单扩展可以动态显示或隐藏列。 使用JQuery，Bootstrap 3，Bootstrap 4，Bootstrap 5和Django> = 1.9
04-29
django-tables2-column-shifter 关于应用程序： django-tables2的简单扩展，可使用jQuery动态显示或隐藏列。 应用程序使用Web存储来存储列是否可见的信息。 使用JQuery，Bootstrap3或Bootstrap4或Bootstrap5以及...
bootstrap-table-zh-CN.js
08-27
bootstrap-table-zh-CN.js,有需要就下载吧
bootstrap-table-fixed-columns.zip
01-14
"bootstrap-table-fixed-columns.zip" 是一个专为 Bootstrap Table 设计的插件，用于解决表格滚动时表头固定不动的问题，使得用户在浏览长表格时始终能清晰地看到列名。 FastAdmin 是一个基于 ThinkPHP5 开发的开源...
Bootstrap4：导航栏右侧对齐
热门推荐
Cynhard的专栏
12-12 2万+
Bootstrap 版本： bootstrap-4.0.0-beta.2通过Bootstrap4 的 Flex 布局可以很容易地将导航栏右侧对齐，只需要在包含导航栏的 <div> 加上 .justify-content-end 样式即可。示例： <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class=
Bootstrap学习笔记 18 - Collapse
Cynhard的专栏
12-01 705
Collapse实现Collapse 在某个元素（比如<div>）加上 .collapse 类，该元素用来显示折叠的内容 为了控制折叠内容的显示与隐藏，需要增加另外一个元素（ <a> 或者 <button>），并且加上 data-toggle="collapse" 类 为了将折叠元素与控制折叠的元素关联起来，需要在折叠元素上加上 id=xxx 并且在控制折叠的元素上加上 data-target=#x
Bootstrap学习笔记 20 - Navbar
Cynhard的专栏
12-04 641
基本形态<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_compon
Bootstrap学习笔记 15 - List Groups
Cynhard的专栏
11-30 640
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" href="./bower_components
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值