Boostrap表格练习

最新推荐文章于 2021-07-26 22:20:15 发布
最新推荐文章于 2021-07-26 22:20:15 发布
阅读量89 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/lcx90/p/5938760.html 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <!-- <link rel="stylesheet" href="../css/bootstrap.css"> -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head>
<style>
body{
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft Yahei",sans-serif;
}
table thead{
    background-color: #555;
    border-top: 1px solid #555;
}
table thead tr{
    color: #fff;
}
.table > thead > tr > th{
    border-left: 1px solid #555;
    border-right: 1px solid #555;
    border-bottom: 1px solid #555;
}
</style>
<body>
<div class="container">
    <br><br>
    <table class="table table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>类</th>
                <th>描述</th>
                <th>示例</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>.table</td>
                <td>为任意&lt;table&gt;添加基本样式 (只有横向分隔线)</td>
                <td>null</td>
            </tr>
            <tr>
                <td>.table-bordered</td>
                <td>为所有表格的单元格添加边框</td>
                <td>null</td>
            </tr>
            <tr>
                <td>.table-hover</td>
                <td>在 &lt;tbody&gt;内的任一行启用鼠标悬停状态</td>
                <td>null</td>
            </tr>
            <tr>
                <td>.table-condensed</td>
                <td>让表格更加紧凑</td>
                <td>null</td>
            </tr>
        </tbody>
    </table>
    <br><br>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>类</th>
                <th>描述</th>
                <th>示例</th>
            </tr>
        </thead>
        <tr class="active">
            <td>.active</td>
            <td>将悬停的颜色应用在行或者单元格上</td>
            <td>null</td>
        </tr>
        <tr class="success">
            <td>.success</td>
            <td>表示成功的操作</td>
            <td>null</td>
        </tr>
        <tr class="info">
            <td>.info</td>
            <td>表示信息变化的操作</td>
            <td>null</td>
        </tr>
        <tr class="warning">
            <td>.warning</td>
            <td>表示一个警告的操作</td>
            <td>null</td>
        </tr>
        <tr class="danger">
            <td>.danger</td>
            <td>表示一个危险的操作</td>
            <td>null</td>
        </tr>
    </table>    
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/lcx90/p/5938760.html

爬虫训练场项目前端基础，Bootstrap5排版、表格、图像
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
12-21 1万+
函数，该函数是 Flask 中的一个内置函数，用于生成 URL 地址，也可以用于生成静态文件的 URL 地址，本文就是第二个用法， 第一个参数是静态资源文件夹的路径，第二个参数是资源的文件名，由于设置了路径，所以无需担心重名和优先级问题。在 Bootstrap 中，内置了非常多的表格样式，实践中首先准备一个测试用表格，代码如下。按住 Ctrl，点击 Flask 类名，可以跳转到类的构造方法中，可以看到下述内容。目录，所以在不修改配置代码的前提下，可以通过建立该目录，实现对静态资源的访问。
bootstrap表格
qq_42049884的博客
09-16 193
Title 编号 姓名 年龄 地址 操作 操作 1 小王 20 ...
bootstrap表格作业
Pupilla的博客
09-11 681
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8" /> <title>登录</title> <link href="./bootstrap-3.3.7-dis...
css框架bootstrap（练习表单）
火火的专栏
04-08 1202
css框架bootstrap（练习表单） 简介 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括N
Bootstrap小练习
qq_36365638的博客
08-20 530
Bootstrap 101 Template                                                                                                                              
Bootstrap实战练习---Web全栈课程体系(表格+巨幕)
Season 优快云博客
07-26 984
Bootstrap实战练习—模仿前端网页2(表格+巨幕)V1 原网页效果图 连接 我的网页效果 -我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Web全栈开发就业班课程大纲https://www.eduwork.cn/webtx.html</title> <!--移动设备优先--> <..
Bootstrap基础练习（一）
doc_wei
10-22 3683
在Bootstrap中除了使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下： .text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-i
bootstrap入门练习实例
08-12
5. **表格（Table）**：Bootstrap的表格样式使得数据呈现更加美观，支持表格的分页、排序和过滤功能。 6. **媒体对象（Media Object）**：这是一个用于构建内容与媒体（如图片或视频）紧密结合的组件，常用于创建...
java web + mysql + jsp+Bootstrap+js练习
07-30
本练习将指导如何利用Bootstrap来美化界面，设计表格、按钮和表单等。 4. JavaScript的动态交互：JavaScript是前端开发中不可或缺的部分。它将被用于添加动态交互能力，比如处理用户输入、实现AJAX请求等。在本练习...
Bootstrap实战练习教程：4个完整页面
2. CSS样式组件：Bootstrap提供了大量的预设样式组件，如按钮、表格、表单、卡片、进度条等。这些组件的使用可以快速构建具有美观统一风格的页面元素。 3. JavaScript插件：Bootstrap附带了一系列预设的JavaScript...
【练习题】6道bootstrap 基础测试题
web前端开发
09-11 4958
编辑整理 | web前端开发1、下面哪个（）类用于固定宽度并支持响应式布局的容器？（）A、containerB、centerC、containersD、container...
Bootstrap中六种表格样式
weixin_30420305的博客
12-06 527
表格 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ☑ LESS版本，...
sshguard-firewalld-2.4.2-6.el8.tar.gz
08-16
# 适用操作系统：Centos8 # Step1、解压 tar -zxvf xxx.el8.tar.gz # Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm
Wecon PLC 代码 自动化代码
08-16
Wecon PLC 代码
【加密货币预测】基于BP神经网络的CCi30指数短期预测模型构建与优化：特征工程增强及模型评估
08-16
内容概要：本文针对国内加密货币市场预测研究较少的现状，采用BP神经网络构建了CCi30指数预测模型。研究选取2018年3月1日至2019年3月26日共391天的数据作为样本，通过“试凑法”确定最优隐结点数目，建立三层BP神经网络模型对CCi30指数收盘价进行预测。论文详细介绍了数据预处理、模型构建、训练及评估过程，包括数据归一化、特征工程、模型架构设计（如输入层、隐藏层、输出层）、模型编译与训练、模型评估（如RMSE、MAE计算）以及结果可视化。研究表明，该模型在短期内能较准确地预测指数变化趋势。此外，文章还讨论了隐层节点数的优化方法及其对预测性能的影响，并提出了若干改进建议，如引入更多技术指标、优化模型架构、尝试其他时序模型等。 适合人群：对加密货币市场预测感兴趣的研究人员、投资者及具备一定编程基础的数据分析师。 使用场景及目标：①为加密货币市场投资者提供一种新的预测工具和方法；②帮助研究人员理解BP神经网络在时间序列预测中的应用；③为后续研究提供改进方向，如数据增强、模型优化、特征工程等。 其他说明：尽管该模型在短期内表现出良好的预测性能，但仍存在一定局限性，如样本量较小、未考虑外部因素影响等。因此，在实际应用中需谨慎对待模型预测结果，并结合其他分析工具共同决策。
球面纳米压痕应力-应变分析.zip
最新发布
08-16
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
python语言英文单词记忆软件代码bwm-2025-8-16.txt
08-16
python语言英文单词记忆软件代码bwm-2025-8-16.txt
抖音无限私信软件是什么软件.zip
08-16
抖音无限私信软件是什么软件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值