Bootstrap表格制作代码

2024-04-20 17:02:37

本文实例为大家分享了Bootstrap表格制作的具体代码，供大家参考，具体内容如下

Bootstrap 支持的一些表格元素：

可用于表格中的tablede 样式

可用于表格中的<tr>, <th> 和 <td>

html与css代码

<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
 <style>
 div{
 font-family: '宋体';
 color: #0A0A0A;
 }
 tr,td{
 width:30px;
 height: 50px;
 font-size:24px;
 }
 </style>
 </head> 

 <body>
 <div class="container">
 <div class="header">
 <h1>表格</h1>
 </div>
 <p class="text-muted" style="font-size: 18px;">小妞妞的成绩单：</p>
 <!--
  <p class="text-muted">本行内容是减弱的</p>
  -->
 <table class="table table-striped table-bordered table-hover table-condensed">
 <!--
  .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
  .table-bordered 为所有表格的单元格添加边框
  .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
  .table-condensed 让表格更加紧凑
 -->
 <thead>
  <tr class="active">
  <th>科目</th>
  <th>成绩</th>
  </tr>
 </thead>
 <tbody>
  <tr class="success">
  <td>语文</td>
  <td>90</td>
  </tr>
  <tr>
  <td>数学</td>
  <td>95</td>
  </tr>
  <tr class="warning">
  <td>英语</td>
  <td>85</td>
  </tr>
  <tr class="danger">
 <!--
  .active 对某一特定的行或单元格应用悬停颜色；.success表示一个成功的或积极的动作；
  .warning 表示一个需要注意的警告；.danger 表示一个危险的或潜在的负面动作；
 -->
  <td>综合</td>
  <td>200</td>
  </tr>
 </tbody>
 </table>
 </div> 

 <script src="js/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 </body> 

</html>

效果图：

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

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

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

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

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

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

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

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

前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态二.需求分析通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
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.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu
基于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>

Bootstrap表格制作代码

相关推荐

随机推荐