Bootstrap笔记(十一) 表格篇

最新推荐文章于 2023-01-09 15:36:04 发布
最新推荐文章于 2023-01-09 15:36:04 发布
阅读量606 收藏
点赞数
分类专栏： Bootstrap 文章标签： bootstrap html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XI_MILU/article/details/120084041
版权

Bootstrap 表格样式 响应式设计 垂直对齐 色彩类别
关键词由CSDN通过智能技术生成

表格篇

表格样式与效果

Bootstrap提供以下类别用来设定表格样式与效果:

表格样式与效果

範例1: 表格与标题

  使用 .table 类别，自动套用Bootstrap提供的表格样式，包括宽度、高度、框线、背景色彩、储存格间距等。
  使用 .caption-top 类别，使标题显示在表格上方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>表格與表格標題</title>
</head>
<body>
    <div class="container">
        <table class="table caption-top">
        	<!-- 表格标题 -->
            <caption>菜單</caption>
            <!-- 表格标题列 -->
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                </tr>
            </thead>
            <!-- 表格主体(主要内容) -->
            <tbody>
                <tr>
                    <td>01</td>
                    <td>牛排</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>雞排</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>豬排</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

表格与标题
範例2: 交替色彩

只需要在<table>元素中加入 .table 和 .table-striped 类别即可实现。

<table class="table caption-top table-striped">

交替色彩

範例3: 显示表格与储存格框线

只需要在<table>元素中加入 .table 和 .table-bordered 类别即可实现。

<table class="table caption-top table-bordered">

显示表格与储存格框线

範例4: 取消表格与储存格框线

只需要在<table>元素中加入 .table 和 .table-borderless 类别即可实现。

<table class="table caption-top table-borderless">

取消表格与储存格框线

範例5: 游标移过表格主体时显示变色的效果

只需要在<table>元素中加入 .table 和 .table-hover 类别即可实现。

<table class="table caption-top table-hover">

游标移过表格主体时显示变色的效果

範例6: 表格的列或储存格显示反白效果

在表格元素中加入 .table-active 类别即可实现。

<td class="table-active">牛排</td>

反白效果

範例7: 储存格紧缩

只需要在<table>元素中加入 .table 和 .table-sm 类别即可实现。

<table class="table caption-top table-sm">

储存格紧缩

表格内容的垂直对齐方式

若要设定表格的列或储存格的垂直对齐方式，可以在该列或储存格加上以下类别。
垂直对齐方式

範例: 表格内容垂直对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>表格內容的垂直對齊方式</title>
</head>
<body>
    <div class="container">
        <table class="table table-sm">
            <tr>
                <td><img src="https://picsum.photos/200/200/?random=1"></td>
                <td class="align-top">靠上</td>
            </tr>
            <tr>
                <td><img src="https://picsum.photos/200/200/?random=2"></td>
                <td class="align-middle">置中</td>
            </tr>
            <tr>
                <td><img src="https://picsum.photos/200/200/?random=3"></td>
                <td class="align-bottom">靠下</td>
            </tr>
        </table>
    </div>
</body>
</html>

垂直对齐方式

特定意义色彩类别

可以为表格、列、储存格设定不同色彩以表示不同的意义。

範例:色彩类别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>特定意義色彩</title>
</head>
<body>
    <table class="table">
        <tr class="table-primary"><td>table-primary</td></tr>
        <tr class="table-secondary"><td>table-secondary</td></tr>
        <tr class="table-success"><td>table-success</td></tr>
        <tr class="table-danger"><td>table-danger</td></tr>
        <tr class="table-warning"><td>table-warning</td></tr>
        <tr class="table-info"><td>table-info</td></tr>
        <tr class="table-light"><td>table-light</td></tr>
        <tr class="table-dark"><td>table-dark</td></tr>
    </table>
</body>
</html>

色彩类别

响应式表格

响应式表格可以随着刘览器的宽度调整表格。只要在放置<table>元素的容器加上 .table-responsive 类别即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>響應式表格</title>
</head>
<body>
	<!-- 在容器加上 .table-responsive 类别 -->
    <div class="container table-responsive">
        <table class="table">
            <tr>
                <th>編號</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>01</td>
                <td>小丸子 (個性無厘頭、樂觀的小女孩)</td>
            </tr>
            <tr>
                <td>02</td>
                <td>小玉 (小丸子的好朋友、個性文靜善良)</td>
            </tr>
        </table>
    </div>
</body>
</html>

当宽度够大时，储存格会自动放大
响应式表格

当宽度不够时，储存格会自动缩小

响应式表格

参考资料

HTML 表格 (Table) 介绍

XI_MILU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap表格一对多_年底莫念一百遍：这表格谁做的？肯定是个铁憨憨！
weixin_39979245的博客
12-20 266
今日目标：聊聊表格设计那些事儿你知道什么是ERD吗？不知道没关系，太正常了，我的Excel学员也不知道。ERD是Entity-Relationship Diagram的英文缩写，中文意思是「实体关系图」，是一种数据库设计结构化方法。一看到“数据库”3个字，别以为这个是程序员的专利。我们在做表格时，遇到的很多问题，本质上都是对「数据库」「数据关系」管理没有设计好导致的。最典型的，一对多的数...
BootStrap入门到实战：BootStrap全局CSS样式（三）- 表格、表单、按钮、图片、辅助类
最新发布
林林一928的博客
05-19 1161
一. 表格 1.基本表格2.带边框的表格3.条纹状表格4.鼠标悬停时作出响应的表格5.紧缩表格6. 状态类7. 响应式表格。 二.表单 1.基本实例2.水平排列的表单3.内联表单4.被支持的控件4.1输入框4.2文本域4.3多选4.4 单选5.表单状态5.1焦点在状态5.2禁用状态5.3只读状态5.4效验状态5.5控制尺寸 三.按钮 1.可作为按钮使用的标签或元素2. 预定义样式3. 尺寸4. 禁用状态 四.图片 1.响应式图片2.图片形状 五.辅助类 1.情景文本颜色2.情景背景色3.关闭按钮4.三角符号
Bootstrap树型表格和多标题表格
06-23
从bootstrap修改出来的与ext treegrid相似的插件，能当树形和普通多标题插件用，自带行内编辑
bootstrap复杂表格
热门推荐
minsgo的博客
04-19 1万+
1.先生成外层表格： $('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:"detailFormatter",//点击展开预先执行事件 cache:
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
01-09 5819
Ruoyi框架/bootstrap-table 动态列+组合表头实现复杂统计表格
bootstrap table 复杂表头多层表头 导出excel（纯前端导出）
诗语待马
09-12 3635
之前写过一篇关于layui table的复杂表头导出excel，里面需要根据layui生成的doom结构去自己重新渲染一遍页面，再控制其隐藏。之后使用插件来实现前端导出excel。 而如果用bootstrap table的话，就不用再自己去重新渲染表格doom。因为bootstrap table的渲染方式就是直接在页面table标签中生成doom，可直接使用该插件进行导出。 关于该插件的获取和...
bootstrap table复杂操作代码
01-19
本文实例为大家分享了bootstrap table复杂操作，如何生成外层表格，如何填充表格内容，供大家参考，具体内容如下 1、先生成外层表格： $('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:detailFormatter,//点击展开预先执行事件 cache: false, height: 550, showExport: true, exportDataType: all, pagin
Bootstrap3.0学习笔记之表格相关
09-22
本篇文章将详细讲解Bootstrap3.0中的表格组件，包括其不同类型的表格及其应用场景。 首先，基础表格是Bootstrap3.0中最基本的表格样式。只需在`<table>`标签上添加`.table`类，即可为表格赋予基本的样式，如适当的...
Bootstrap基本样式学习笔记之表格(2)
09-01
在Bootstrap中，表格（Table）是一个重要的元素，它提供了多种预定义的样式，帮助用户创建各种视觉效果的表格。 ### 1. 基本表格样式 Bootstrap 的基本表格样式是 `.table` 类，它可以将表格的默认样式替换为...
Bootstrap3学习笔记(三)之表格
09-02
本篇笔记将详细讲解如何使用Bootstrap3来创建和定制表格。 首先，使用Bootstrap3创建一个基本的表格非常简单，只需在`<table>`标签上添加`.table`类。例如： ```html <!-- 表格内容 --> ``` 这个基础的表格...
bootstrap多列表单布局
12-28
这是一个bootstrap多列表单布局的demo，仅供大家参考参考
bootstrap4 cheat sheet 快捷使用表格
04-03
使用bootstrap4 快捷方式编写代码，可以大大提高编写Bootstrap web的效率
基于Bootstrap使用jQuery实现简单可按钮编辑一行多个表格
04-09
简单支持Bootstrap,简洁jQuery实现简单可按钮编辑一行多个表格，方便大家使用
教大家轻松制作Bootstrap漂亮表格（table）
11-27
学习了runoob.com网站中的bootstrap内容之后，参照其中的内容自己做一下总结，以便帮助在这方面有疑惑的朋友，也有助于自己更好的消化所学的内容。 我们应该庆幸自己活在这样一个互联网时代，开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架，共享出来让我们使用，使得我们轻松就能实现很漂亮的效果。 下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上，我们只需要写很少的代码就能轻松制作漂亮表格。 比如我们要制作一个像下面这个表格： 有了Bootstrap，只需写好html内容结构，加上Bootstra
JS组件Bootstrap Table使用方法详解
04-27
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签： Bootstrap Table 最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到2个方案: a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面) b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备 采用a方案，需要设计一套界面，并且要得重新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet"> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL（*） method: 'post', //请求方式（*） toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数（*） sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 50, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） strictSearch: true, clickToSelect: true, //是否启用点击选中行 height: 460, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "id", //每一行的唯一标识，一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ field: 'id', title: '序号' }, { field: 'liushuiid', title: '交易编号' }, { field: 'orderid', title: '订单号' }, { field: 'receivetime', title: '交易时间' }, { field: 'price', title: '金额' }, { field: 'coin_credit', title: '投入硬币' }, { field: 'bill_credit', title: '投入纸币' }, { field: 'changes', title: '找零' }, { field: 'tradetype', title: '交易类型' },{ field: 'goodmachineid', title: '货机号' },{ field: 'inneridname', title: '货道号' },{ field: 'goodsName', title: '商品名称' }, { field: 'changestatus', title: '支付' },{ field: 'sendstatus', title: '出货' },] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码 sdate: $("#stratTime").val(), edate: $("#endTime").val(), sellerid: $("#sellerid").val(), orderid: $("#orderid").val(), CardNumber: $("#CardNumber").val(), maxrows: params.limit, pageindex:params.pageNumber, portid: $("#portid").val(), CardNumber: $("#CardNumber").val(), tradetype:$('input:radio[name="tradetype"]:checked').val(), success:$('input:radio[name="success"]:checked').val(), }; return temp; }; return oTableInit; }; field字段必须与服务器端返回的字段对应才会显示出数据。 3、后台获取数据 a、servlet获取数据 [js] view plain copy BufferedReader bufr = new BufferedReader( new InputStreamReader(request.getInputStream(),"UTF-8")); StringBuilder sBuilder = new StringBuilder(""); String temp = ""; while((temp = bufr.readLine()) != null){ sBuilder.append(temp); } bufr.close(); String json = sBuilder.toString(); JSONObject json1 = JSONObject.fromObject(json); String sdate= json1.getString("sdate");//通过此方法获取前端数据 ... b、springMvc Controller里面对应的方法获取数据 [js] view plain copy public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId，PortId，CardNumber，Success，maxrows，tradetype) { ... } 4、分页(遇到问题最多的) 使用分页，server端返回的数据必须包括rows和total，代码如下： [js] view plain copy ...gblst = SqlADO.getTradeList(sql,pageindex,maxrows); JSONArray jsonData=new JSONArray(); JSONObject jo=null; for (int i=0,len=gblst.size();i<len;i++) { TradeBean tb = gblst.get(i); if(tb==null) { continue; } jo=new JSONObject(); jo.put("id", i+1); jo.put("liushuiid", tb.getLiushuiid()); jo.put("price", String.format("%1.2f",tb.getPrice()/100.0)); jo.put("mobilephone", tb.getMobilephone()); jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime())); jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]); jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败"); jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败"); jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0)); jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0)); jo.put("goodroadid", tb.getGoodroadid()); jo.put("SmsContent", tb.getSmsContent()); jo.put("orderid", tb.getOrderid()); jo.put("goodsName", tb.getGoodsName()); jo.put("inneridname", tb.getInneridname()); jo.put("xmlstr", tb.getXmlstr()); jsonData.add(jo); } int TotalCount=SqlADO.getTradeRowsCount(sql); JSONObject jsonObject=new JSONObject(); jsonObject.put("rows", jsonData);//JSONArray jsonObject.put("total",TotalCount);//总记录数 out.print(jsonObject.toString()); ... 5、分页界面内容介绍 前端获取分页数据，代码如下： [js] view plain copy ...oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params.limit, //第几条记录 offset: params.offset, //显示一页多少记录 sdate: $("#stratTime").val(), }; return temp; };... 后端获取分页数据,代码如下： [js] view plain copy ...int pageindex=0; int offset = ToolBox.filterInt(json1.getString("offset")); int limit = ToolBox.filterInt(json1.getString("limit")); if(offset !=0){ pageindex = offset/limit; } pageindex+= 1;//第几页... 以上就是为大家分享的Bootstrap Table使用方法，希望对大家熟练掌握Bootstrap Table使用方法有所帮助。 转自：http://www.jb51.net/article/79033.htm
bootstrap笔记总结
12-29
Bootstrap 笔记总结 Bootstrap 是一个流行的前端框架，用于快速构建响应式的 web 应用程序。下面是 Bootstrap 相关的知识点总结： Base CSS * Bootstrap 提供了一个基本的 CSS 框架，使得开发者可以快速构建响应...
bootstrap表格
难瘦不难过的专栏
07-10 507
 html> lang="en"> charset="UTF-8"> Title rel="stylesheet" href="bootstrap.min.css"> class="table-responsive">必须放在div中实现，如果缩放时显示滚动条------------> class="table table-border
表格列表的开发-bootstrap-table 插件的封装，简化我们复杂的代码逻辑
qq_28917403的博客
07-03 611
首先贴页面给大家看看效果 按照我封装的方式处理完就很简单了。 直接贴代码了 <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="${ctx}/static/fht_ams/pu..
Bootstrap表格
weixin_44543307的博客
06-17 481
Bootstrap表格 开发工具与关键技术：VS Bootstrap 作者：木林森 撰写时间：2019年6月16日 之前我们分享了layui表格，今天我们就来分享另一种表格——Bootstrap表格。 在写编程时我们经常会用到表格，那我们是使用layui表格还是使用Bootstrap表格，这个就需要根据实际的情况进行选择了。 如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值