BootStrap表格上

最新推荐文章于 2019-06-27 18:52:47 发布
最新推荐文章于 2019-06-27 18:52:47 发布
阅读量202 收藏
点赞数
分类专栏： Bootstrap 文章标签： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengqiuming/article/details/86559738
版权

一 表格基础

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>基础表格</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
<h1>基础表格</h1>
<table class="table">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>斑马线表格</h1>
<table class="table table-striped">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>带边框的表格</h1>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>鼠标悬浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>紧凑型表格</h1>
<table class="table table-condensed">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
<h1>响应式表格</h1>
<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

2 效果

二 表格行的类

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>表格行的类</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>类名</th>
        <th>描述</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
        <td>.active</td>
        <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
        <td>.success</td>
        <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
        <td>.info</td>
        <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
        <td>.warning</td>
        <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
        <td>.danger</td>
        <td>表示危险或者可能是错误的行为</td>
    </tr>
    </tbody>
</table>
</body>
</html>

2 效果

三 基础表格

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>基础表格</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
<table class="table">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
</body>
</html>

2 效果

四 斑马线表格

1 代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>斑马线表格</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
<table class="table table-striped">
    <thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <td>表格单元格</td>
        <td>表格单元格</td>
        <td>表格单元格</td>
    </tr>
    </tbody>
</table>
</body>
</html>

2 效果

chengqiuming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mysql员工星期排班表设计_vue+element项目做员工排班表
weixin_39640911的博客
02-03 1482
人事管理人员排班上一周新增排班下一周{{nextMonday}}星期一~{{lastsunday}}星期天show-overflow-tooltip:label="monday1"prop="mondayStatus"align="center"width="175">show-overflow-tooltip:label="thursday1"prop="thursdayStatus"al...
python bootstrap 4_python django+bootstrap4+mysql智慧交通系统构建
weixin_39671621的博客
12-10 589
之前，我做了一个实训的项目，但是一直没有展示如何做的，现在就让我讲解一下如何用django+bootstrap4+mysql实现这个智慧交通系统。这里用到的是网页的bootstrap4框架和mysql数据库。一：软件项目内容1.实训项目简介智慧交通系统是旨在提高员工的日常工作便捷性、工作效率，降低管理及运营成本的实用项目。本软件系统将为该公司提供车辆信息管理、员工信息管理、线路信息管理、站点信息管...
考勤系统 人员排班设置
weixin_30802273的博客
06-01 1000
需求描述： 1、能比较直观的看到某类排班1年的上班，非上班日 2、1个界面显示全年 3、年度可以切换 目前暂时的需求比较简单，我只需要设置工作日和非工作日即可。至于每天的上班时间，下班时间，中午休息时间都是固定的 最终效果 转载于:https://www.cnblogs.com/caohaifeng/p/5550702.html...
微信小程序日期午别排班表
Fly的博客
12-12 6363
微信小程序日期午别排班表 1.util.js //获取几天后日期 function dateCount(arg,date) { var date1 = arg; var date2 = new Date(date1); date2.setDate(date2.getDate() + parseInt(date)); var times = date2.getFullYear(...
bootstrap排版和表格
weixin_44813102的博客
06-27 368
在菜鸟教程里面看的 如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 ，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本， 为了给段落添加强调文本，则可以添加 class=“lead”，这将得到更大更粗、行高更高的文本。 本行内容是在标签内 本行内容是在标签内 本行内容是在标签内，并呈现为斜体 向左对齐文本 居中对齐文本 向右对齐文本 本行内容是减弱...
bootstrap 表格
01-26
Bootstrap表格是一种基于HTML、CSS和JavaScript的组件，用于在网页上展示结构化的数据。这个框架由Twitter开发，现已成为Web开发中最广泛使用的前端框架之一，因其简洁、响应式和易于定制的特点而备受青睐。...
Bootstrap表格编辑生成器插件.rar
04-29
Bootstrap表格编辑生成器插件是基于流行的前端框架Bootstrap开发的一款实用工具，主要用于简化网页中表格的创建和编辑过程。在现代Web应用中，表格经常被用于展示结构化的数据，而Bootstrap表格编辑生成器则提供了...
jQuery动态生成Bootstrap表格
10-21
在本文中，我们将深入探讨如何使用jQuery动态生成Bootstrap表格，这是一种高效的方法，可以在网页上创建交互式的、响应式的表格。Bootstrap框架提供了丰富的样式和组件，而jQuery则是一种强大的JavaScript库，用于...
bootstrap动态表格模板
09-23
首先，我们来了解一下Bootstrap表格的基础知识。Bootstrap的表格设计简洁、清晰，支持各种类型的表格样式，如 striped（斑马纹）、hover（鼠标悬停高亮）和bordered（带边框）。通过简单的HTML标记和类名，可以轻松...
23.1 Bootstrap 表格
最新发布
10-02
Bootstrap表格是前端开发中常用的一种布局工具，尤其在构建响应式网页时不可或缺。Bootstrap是由Twitter开发并开源的一个前端框架，它提供了一系列预先设计的样式、组件和JavaScript插件，简化了网页开发流程。本篇...
JFinal+FullCallender.js开发终极排班管理系统
WebGIS开发博客
12-27 9677
终极排班管理系统，改变传统的排班模式！项目地址：https://github.com/giscafer/FinalScheduler
创建bootstrap的表格(含日期控件)
java_trainee的博客
06-23 5212
创建bootstrap的表格(含日期控件)
Bootstrap 排版列表
歪脖先生的博客
03-06 5772
列表Bootstrap 支持HTML 提供的三种类型的列表：无序列表、有序列表和描述列表。列表可以嵌套定义，可以在一个列表中，嵌套定义其它列表。嵌套没有类型和层级的限制。1、无序列表无序列表的各个表项，没有逻辑上的先后顺序。如：&lt;ul&gt;  &lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;  &lt;li&gt;Consectetur adi...
bootstrap日历插件的使用
高振的博客
09-04 2750
bootstrap日历插件的使用 1、插件引用                               2、html代码 开始日期： 结束日期： 3、js代码 /** * 初始化日期插件 */ datePicker:function(){ // 初始开始时间 $('#startDate').date
jquery+bootstrap 创建日历表格
onlymyBlog的博客
04-11 3232
jquery创建日历表格 jquery+bootstrap 创建日历表格 #写的不太好 欢迎留言赐教 日历表格 <div class="content "> <div class="select-box clearfix"> <div class="col-xs-4"> <form> ...
bootstrap 日历
xiaosongwahaha的博客
12-21 874
http://www.jq22.com/jquery-info378  可以下载相关控件包和看到先关示例。 1、引入文件 2、初始化 //时间控件初始化     $('#daterangepicker-time').daterangepicker({            timePicker: true,
BootStrap中的粗体斜体以及强调
热门推荐
实践求真知
01-20 1万+
一 粗体 1 代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;粗体&lt;/title&gt; &lt;link rel="stylesheet" href="https://cdn.bootcss.com/boo
Bootstrap的的输入框下拉选择框和文本域
实践求真知
01-20 6899
一 输入框 1 代码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单控件——输入框input&lt;/title&gt; &lt;link rel="stylesheet
bootstrap表格
04-05
以下是一个基本的Bootstrap表格示例： ```html <th># <th>First Name <th>Last Name <th>Username <td>1 <td>Mark <td>Otto <td>@mdo <td>2 <td>Jacob <td>Thornton <td>@fat ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值