Bootstrap表格使用方法详解

2024-10-03 20:00:44

下表列出了 Bootstrap 支持的一些表格元素：

表格类：

.table：为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped：在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered：为所有表格的单元格添加边框
.table-hover：在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed：让表格更加紧凑

<tr>, <th> 和 <td> 类：

.active：将悬停的颜色应用在行或者单元格上
.success：表示成功的操作
.info：表示信息变化的操作
.warning：表示一个警告的操作
.danger：表示一个危险的操作

<table class="table">
 <caption>上下文表格布局</caption>
 <thead>
  <tr>
   <th>产品</th>
   <th>付款日期</th>
   <th>状态</th></tr>
 </thead>
 <tbody>
  <tr class="active">
   <td>产品1</td>
   <td>23/11/2013</td>
   <td>待发货</td></tr>
  <tr class="success">
   <td>产品2</td>
   <td>10/11/2013</td>
   <td>发货中</td></tr>
  <tr class="warning">
   <td>产品3</td>
   <td>20/10/2013</td>
   <td>待确认</td></tr>
  <tr class="danger">
   <td>产品4</td>
   <td>20/10/2013</td>
   <td>已退货</td></tr>
 </tbody>
</table>

响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b
JS组件Bootstrap Table表格多行拖拽效果实现代码

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
基于Bootstrap3表格插件和分页插件实例详解

首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据下面分页使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
JS组件Bootstrap Table表格行拖拽效果实现代码

一.业务需求及实现效果项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2
Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
JS表格组件神器bootstrap table详解（基础版）

一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot
值得分享的轻量级Bootstrap Table表格插件

基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面固定表头完全可配置支持data属性显示/隐藏列显示/隐藏表头使用AJAX获取JS
JS组件系列之Bootstrap table表格组件神器【终结篇】

bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap
基于Bootstrap使用jQuery实现简单可编辑表格

editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
BootStrap和jQuery相结合实现可编辑表格

editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu

Bootstrap表格使用方法详解

相关推荐

随机推荐