bootstrap实现表格

最新推荐文章于 2021-03-09 11:49:39 发布
最新推荐文章于 2021-03-09 11:49:39 发布
阅读量190 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fatRabbit-/p/10761644.html
版权
  • 基本实例样式
    • 效果

       

    • 代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>

    <!-- container自适应 -->
    <div class="container">
        <!-- 为表格添加基础样式 ，.table为任意<table>添加基本样式 -->
        <table class="table">
            <!-- 表格标题行的容器元素，用来识别表格列 -->
            <thead>
                <tr>
                    <!-- 特殊的表格单元格，用来识别行或列 -->
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                </tr>
            </thead>
            <!-- 表格主题中的表格行的容器元素 -->
            <tbody>
                <!-- 一组出现在单行单元格的容器元素 -->
                <tr>
                    <!-- 默认的表格单元格 -->
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                </tr>
                <tr>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

       

  • 条纹状表格
    • 效果

       

    • 代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>

    
    <div class="container">
        <!-- .table-striped可以给tbody之内的每一行添加斑马条纹样式 -->
        <table class="table table-striped">
           
            <thead>
                <tr>
                    
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                </tr>
            </thead>
            
            <tbody>
                
                <tr>
                   
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                </tr>
                <tr>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

       

  • 带边框表格
    • 效果

       

    • 代码 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/dashboard.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 
            .table-bordered为表格和其中的每个单元格增加边框
        -->
        <table class="table table-bordered">
           
            <thead>
                <tr>
                   
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                    <th>测试标题</th>
                </tr>
            </thead>
           
            <tbody>
               
                <tr>
                    
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                </tr>
                <tr>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                    <td>测试内容</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

       

转载于:https://www.cnblogs.com/fatRabbit-/p/10761644.html

aodi7613
关注
Bootstrap Table数据表格的使用指南，springmvc面试题2020
m0_64383449的博客
12-23 876
public Specification buildSpec(StudentForm form){ return null; } 其中page方法中接收参数的TablePageable类是接收分页和排序参数类，其中还包含了几个分页排序处理的方法。StudentForm中的字段和实体类中字段一样，主要用于接收查询条件。Student为实体类。buildSpec方法为查询方法。 TablePageable类代码如下。 import org.springframework.data.domain.PageRequ
bootstrap-table实现表格编辑
qq_35031883的博客
06-11 8303
bootstrap-table实现表格编辑 应用场景 点击单元格可编辑、点击行对行数据修改、列表可伸缩、支持数据下载。 一、 表格行内编辑 效果展示 编辑前 点击某个单元格数据 编辑完成后 2．实现过程 2.1 引入资源文件(其他基本需要文件略) 2.2 js里面初始化表格 2.3在js里面初始化表格的时候注册编辑保存的事件 参数field,row,oldValue,$el分...
Bootstrap表格示例
fendo
06-09 4570
效果图如下: 代码如下:
bootstrap-table的实例编写
10-02
bootstrap-table的实例编写 bootstrap-table的实例编写
也许是最简单的bootstrap-table 表格行内编辑实现！！！
热门推荐
dizuncainiao的博客
08-16 7万+
效果图 按照惯例，先放一张图： 预知代码实现如何，请听下回分解！
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
最新发布
03-01
这个项目结合了jQuery和Bootstrap，旨在为开发者提供一个完整的Web应用解决方案，实现表格数据的增删改查功能。下面将详细阐述这些技术在实际应用中的作用和整合方式。 1. **Spring框架**：Spring是Java企业级应用...
利用Bootstrap实现表格复选框checkbox全选
08-31
总结来说，利用Bootstrap实现表格复选框全选功能，我们需要： 1. 创建带有复选框的HTML表格结构。 2. 使用JavaScript（例如jQuery）监听全选和行内复选框的点击事件，实现全选和反选功能。 3. 添加CSS样式以增强用户...
Bootstrap 实现表格样式、表单布局的实例代码
10-17
在本篇实例代码中，将介绍如何使用Bootstrap框架来实现表格样式和表单布局。 首先，Bootstrap表格样式是通过添加预定义的CSS类到HTML的元素上来实现的。实例代码展示了如何使用.table和.table-striped两个类来创建...
AngularJS 与Bootstrap实现表格分页实例代码
10-21
本文将深入探讨如何使用AngularJS和Bootstrap框架来实现一个功能完善的表格分页功能。AngularJS，由Google公司开发，是一款强大的前端JavaScript框架，常用于构建单页面应用。Bootstrap则是流行的前端UI框架，提供了...
BootstrapTable简单的例子
WangCode
11-13 503
BootstrapTable简单的例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Demo</title> <link rel="stylesheet" href="static/css/bootstrap.min.css"> <link rel="stylesheet" href=
bootstrap table表格实例,基于javaweb的bootstrap table实例源码下载
02-07
本实例针对bootstrap中table的使用方法，通过ajax远程调用服务器实现table的显示、分页、查询。
Bootstrap Table的官网例子
09-27
本人因为项目开发的需要，需要用到一个表格插件。于是看上了Bootstrap Table，官网只是给了一个例子，于是我把官网的代码给爬下来。在基础上进行自己的修改。如果有兴趣可以下载来看看，代码个官网的是一模一样的。
基于Bootstrap的jquery动态数据表格插件
12-11
raydreams.js是一款基于Bootstrap的jquery动态数据表格插件。该jquery动态数据表格的特点是使用简单，它能通过json动态加载表格所需的数据，并通过配置参数设置表格列是否排序和添加功能按钮等。
学生会信息管理系统Bootstrap模板
09-10
基于bootstrap的学生会信息管理系统网页模板，可添加数据库利用Java实现功能！需要.sql的DDL文件留言
学生会信息管理系统Bootstrap模板.zip
12-13
学生会信息管理系统Bootstrap模板
Bootstrap-1 表格样式
梦琪96的博客
01-18 883
Bootstrap表格样式分类 基础样式.table 带背条纹表格.table-striped 带边框.table-border 悬停.table-hover 紧凑.table-condensed 行样式 .active .success .info 响应式表格 操作步骤 在桌面新建一个文件夹作为站点来存放页面，以“我的站点”为文件名。（文件名自己随意写） 使用DW软件新建站点，站点位置...
bootstrap制作表格
SharkpoPo的博客
09-26 177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7...
Bootstrap中六种表格样式
weixin_30420305的博客
12-06 466
表格 表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格，在接下来的内容中，我们会详细介绍Bootstrap的表格使用。 同样的，如果你对CSS预处理器熟悉，你可以使用Bootstrap提供的预处理版本： ☑ LESS版本，...
Bootstrap 表格
编辑编辑器
03-09 624
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 table 为表格添加基础样式。 thead 表格标题行的容器元素（tr），用来标识表格列。 tbody 表格主体中的表格行的容器元素（tr）。 tr 一组出现在单行上的表格单元格的容器元素（td 或 th）。 td 默认的表格单元格。 th 特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 thead 内使用。
BootStrap可编辑表格实现与功能详解
5. **表格编辑（高级功能）**：要实现表格的编辑功能，通常需要借助JavaScript和可能的第三方库。在本例中，虽然没有提供完整的实现，但提到了可能需要引入一个插件来支持编辑功能。这可能涉及到AJAX技术，用于在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值