bootstrap-table简单使用

最新推荐文章于 2024-08-17 01:00:00 发布
最新推荐文章于 2024-08-17 01:00:00 发布
阅读量704 收藏 2
点赞数
分类专栏： bootstrap 文章标签： bootstrap-table table表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxi_li/article/details/95613777
版权

先整体看一下效果，图中“已订购信息”下面的部分（红框圈出来的）就是用bootstrap-table做出来的
在这里插入图片描述
今天第一次接触这个插件，小小总结一下：

文章目录

更多的关于bootstrap-table，请查看官方文档

1 引入CSS、JS

先引入CSS、JS，优先引用第三方的文件，注意文件之间的依赖关系，如bootstrap依赖于jQuery，就应该先引用jquery.js，再引用bootstrap.js
注意：Bootstrap Table需要使用HTML5 doctype，如下：

<!doctype html>
<html lang="en">
  ...
</html>

在head中加载css样式：（先加载bootstrap.min.css，再加载bootstrap-table.min.css，最后再加载自己的样式）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
          integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!--    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"-->
<!--          integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">-->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="css/MyCss.css">

在结束</body>标记之前加入JS文件：（先jQuery，然后Bootstrap.js、bootstrap-table.js，最后是自己的js文件）
对于Bootstrap v4，使用Font Awesome作为默认图标，因此需要导入Font Awesome链接。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="js/main.js"></script>

2 引用好后直接使用即可

如下：

<table data-toggle="table" ><!--data-url="data1.json"-->
     <thead>
     <tr>
         <th>组网名称</th>
         <th>产品类型</th>
         <th>更改时间</th>
         <th>生效时间</th>
         <th>到期时间</th>
         <th>业务状态</th>
         <th>操作</th>
     </tr>
     </thead>
     <tbody>
     <tr>
         <td>联通-张三_0109</td>
         <td>SD-WAN 智选专线平台</td>
         <td>2019-07-03</td>
         <td>-</td>
         <td>2022-07-24</td>
         <td>
             <span class="dealing">处理中</span>
         </td>
         <td>处理中</td>
     </tr>
     <tr>
         <td>联通-张三_0109</td>
         <td>SD-WAN 智选专线平台</td>
         <td>2019-07-03</td>
         <td>-</td>
         <td>2022-07-24</td>
         <td>
             <span class="normal_use">正常使用</span>
         </td>
         <td>
             <span class="check">查看</span>
             <span class="stop">终止</span>
             <span class="change">变更</span>
         </td>
     </tr>
     <tr>
         <td>联通-张三_0109</td>
         <td>SD-WAN 智选专线平台</td>
         <td>2019-07-03</td>
         <td>-</td>
         <td>2022-07-24</td>
         <td>
             <span class="dealing">处理中</span>
         </td>
         <td>处理中</td>
     </tr>
     <tr>
         <td>联通-张三_0109</td>
         <td>SD-WAN 智选专线平台</td>
         <td>2019-07-03</td>
         <td>-</td>
         <td>2022-07-24</td>
         <td>
             <span class="normal_use">正常使用</span>
         </td>
         <td>
             <span class="check">查看</span>
             <span class="stop">终止</span>
             <span class="change">变更</span>
         </td>
     </tr>
     <tr>
         <td>联通-张三_0109</td>
         <td>SD-WAN 智选专线平台</td>
         <td>2019-07-03</td>
         <td>-</td>
         <td>2022-07-24</td>
         <td>
             <span class="dealing">处理中</span>
         </td>
         <td>处理中</td>
     </tr>
     <tr>
         <td>联通-张三_0109</td>
         <td>SD-WAN 智选专线平台</td>
         <td>2019-07-03</td>
         <td>-</td>
         <td>2022-07-24</td>
         <td>
             <span class="normal_use">正常使用</span>
         </td>
         <td>
             <span class="check">查看</span>
             <span class="stop">终止</span>
             <span class="change">变更</span>
         </td>
     </tr>

     </tbody>
 </table>

3 自定义表格样式

直接选中标签，然后调整样式即可

.content .inner_c .ordered-info .list table thead{
   background-color: #337AB7;
   color: #FFFFEF;
   font-size: 18px;
}
.content .inner_c .ordered-info .list table span{
   padding: 0 4px;
}
.content .inner_c .ordered-info .list table .dealing{
   display:inline-block;
   height: 20px;
   font-size: 13px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #4482FF;
   color:#FFFFEF;
}
.content .inner_c .ordered-info .list table .normal_use{
   display:inline-block;
   height: 20px;
   font-size: 13px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #36B37E;
   color:#FFFFEF;
}
.content .inner_c .ordered-info .list table .check{
   display:inline-block;
   height: 20px;
   font-size: 13px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #F39C12;
   color:#FFFFEF;
}
.content .inner_c .ordered-info .list table .stop{
   display:inline-block;
   height: 20px;
   font-size: 13px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #F75765;
   color:#FFFFEF;
}
.content .inner_c .ordered-info .list table .change{
   display:inline-block;
   height: 20px;
   font-size: 13px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background-color: #B067E6;
   color:#FFFFEF;
}

4 遇到的问题

在写页面上半部分时，自己用的盒模型是标准盒模型即content-box，在引入bootstrap后发现上面写的都乱了，原因是bootstrap采用border-box模型（此时padding不会影响最终宽度的计算），但我之前都是content-box，padding参与了计算，改变模型后由于宽度不够就导致有些内容被挤下来了，如下图企业信息板块
在这里插入图片描述
在这里插入图片描述
解决方法是让自己之前写的样式权重最高，在自己写的css中添加样式如下：
在这里插入图片描述
解决好上面问题后，又出现一个新问题，经查找，原来是p标签在作怪，引入的文件里面自带了p标签的样式，如下图所示：
在这里插入图片描述
解决方法：重写p标签样式，覆盖掉文件带来的样式，如下：
在这里插入图片描述
修改好后整个页面就都好了，右上角的小图标也正常了，哈哈哈！
在这里插入图片描述

Silence-Lee
关注
专栏目录
bootstrap的table表格使用
qq_34639724的博客
07-19 1239
bootstrap的table表格使用（分页查询、条件查询） 先要下载bootstap-table插件包 http://download.csdn.net/detail/zhangyabin86/9748534将插件的jar包引入到工程中，并通过src导入到本地的项目里 <!--css样式--> <link href="css/bootstrap/bootstrap.min.css" rel="s
bootstrap_table
12-21
bootstrap table 已经验证，可以 排序 筛选 还有导出
bootstrap-table.min.js
09-13
columns的formatter方法中可使用this.options获取全局配置信息，主要用户分页序号的设置功能。
t特效与样式（三）——bootstrap.table的用法
最新发布
大梁来了的博客
08-17 979
前端列表页面生成与开发
bootstrapTable的具体使用
海涛高软
02-19 364
1 字段字母注意要小写 FR：徐海涛（hunk xu） QQ技术交流群：386476712
Bootstrap 基础CSS - 表格（Tables）
热门推荐
Try my best
01-27 8万+
标准结构 标签 描述 用以包装表格化的数据 容纳表格标题行 ()以标识表格列， 容纳表格行 () 容纳行内的一组单元格 ( or ) 默认的表格单元格 用于列头(或是行，取决于标签所在位置和区域)的特殊标签 必须置于  标签内。
bootstrap.min.css
08-30
bootstrap资源
bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例
12-06
通过调用`bootstrapTable()`方法初始化表格，我们可以轻松地启用这个功能。 总的来说，`bootstrap-table`结合`bootstrap-editable`插件，提供了一种高效的方法来创建交互式、功能丰富的表格，特别是当需要在表格中...
vue2-bootstrap-table:使用Bootstrap样式为Vue2编写的表
05-18
使用Bootstrap样式的简单VueJS 2.0表组件 CSS依赖于父提供样式 所有JS都是用Vue编写的，没有任何外部依赖 特征： 筛选所有键 分页 对任何键进行排序和反向排序 各个列的可选自定义渲染器 列的路径键。 使用lodash _...
将bootstrap-table表格翻译为中文
03-04
Bootstrap表格是前端开发中常用的组件，它为网页提供了一...在未来，如果计划介绍Bootstrap-table的简单使用，可以涵盖表格的初始化、数据加载、列定义、操作列、事件处理等方面，这些都是构建交互式表格的关键知识点。
bootstrap-table-editable.js
11-30
开发过程中使用bootstrap，需要行内编辑，现在需要引入bootstrap-table-editable.js 这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。
bootstrap.min.js和bootstrap.min.css
08-19
前端开发，bootstrap技术的支持文件bootstrap.min.js和bootstrap.min.css
Bootstrap table的使用方法
11-27
Jquery中的一些东西学习一下子，补充完善一下，毕竟有些时候没有使用到 这个方式很有用，在使用bootstrap table的时候，选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据，但是我只需要id这一个值，这个时候进行操作就非常的简单了。 $.map(data,function(item,index){return XXX}) //使用的总结： //把一个数组，按照新的方式进行组装返回，和原来的数组不一样。 //遍历data数组中的每个元素，并按照return中的计算方式 形成一个新的元素，放入返回的数组中 var b = $.map( [55,1,2], f
Bootstrap v3.3.7及Bootstrap Table API 中文版
10-24
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap Table API 中文版是一款讲解非常详细的Bootstrap CHM中文文档，Bootstrap V3.3.7是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
bootstrap-table插件包
06-05
bootstrap-table插件包，包括完整的css定义文件，js文件等。
Bootstrap table使用方法详细介绍
01-19
bootstrap-table是一个非常好用的表格插件，提供了很多工具及分页、搜索等功能。 首先我们需要下面几个文件， <span xss=removed><!-- bootstrap table --> [removed][removed] <!-- bootstrap --> <link rel=stylesheet type=text/css href=${pageCont
bootstrap-table-master.rar
06-18
你还可以通过JavaScript API来控制表格的行为，如调用$table.bootstrapTable('load', data)来动态加载数据。 这个压缩包中的"dist"目录包含了各种编译后的文件，适用于直接在生产环境中使用。"src"目录则包含了源...
bootstrap-table 使用指南
阿飞
03-09 500
bootstrap-table 使用指南
BootstrapTable的使用教程
祈澈菇凉
03-07 1万+
官方网站：http://bootstrap-table.wenzhixin.net.cn/参考文档：http://issues.wenzhixin.net.cn/bootstrap-table/index.html中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/下载boot...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值