教大家轻松制作Bootstrap漂亮表格（table）

学习了runoob.com网站中的bootstrap内容之后，参照其中的内容自己做一下总结，以便帮助在这方面有疑惑的朋友，也有助于自己更好的消化所学的内容。

我们应该庆幸自己活在这样一个互联网时代，开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架，共享出来让我们使用，使得我们轻松就能实现很漂亮的效果。

下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上，我们只需要写很少的代码就能轻松制作漂亮表格。

比如我们要制作一个像下面这个表格：

有了Bootstrap，只需写好html内容结构，加上Bootstrap写好的专用于表格的类样式即可实现图中的效果。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>BootStrap制作表格</title>
 <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
</head>
<body>
 <div class="container">
 <table style="width: 500px;" class="table table-striped table-hover table-bordered">
 <thead>
 <tr>
  <th>表头1</th>
  <th>表头2</th>
  <th>表头3</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>第1行第1列</td>
  <td>第1行第2列</td>
  <td>第1行第3列</td></tr>
 <tr>
  <td>第2行第1列</td>
  <td>第2行第2列</td>
  <td>第2行第3列</td></tr>
 <tr>
  <td>第3行第1列</td>
  <td>第3行第2列</td>
  <td>第3行第3列</td></tr>
 </tbody>
 </table>
 </div>
</body>
</html>

在这里为了方便美观我给他加了一个宽度500px;我们这里使用一个<div class="container"> 来作为基础面板包裹我们的table。container也属于bootstrap类样式，在webstorm中我们按住ctrl+点击左键进入container（任何脚本样式你都这样查看它里边的实现，前提是要先引入），可以看到bootstrap的属性如下：

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

containner可以适应浏览器为我们设置外边距，设置固定左右内边距15px。

接下来说一下步骤：

第一步：引入bootstrap脚本文件：
<link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">

这个脚本你可以在 http://getbootstrap.com 官网中下载。

第二步：写html内容结构代码。

只设置了宽度，没有加入其他任何样式的裸妆他是这样子的：

第三步：为table加入bootstrap样式：
<table style="width: 500px;" class="table table-striped table-hover table-bordered">

以上三步即可得到第一幅图的效果。

接下来讲解一下这些样式的效果，runoob.com列出了比较简明的解析：

在行列中，也可以使用.active  .success .danger这些用于行列的样式。比如我加入行列样式：

效果是这样的：

大家可以根据自己的需要来加入样式。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

赞 (0)

相关推荐

  • bootstrap table复杂操作代码

    bootstrap table复杂操作代码

    本文实例为大家分享了bootstrap table复杂操作,如何生成外层表格,如何填充表格内容,供大家参考,具体内容如下 1.先生成外层表格: $('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:"detailFormatter",//点击展开预先执行事件 cache: false, height: 550, showExport:

  • DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 主要功能 分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns -- 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免

  • Bootstrap Table使用心得总结

    Bootstrap Table使用心得总结

    之前一直在调研我们的管理后台使用的表格控件,查询到 : http://bootstrap-table.wenzhixin.net.cn的Bootstrap Table 感觉挺不错,但是由于官方的文档不是怎么的完善,导致自己的网络数据请求一直没有通过. 今天终于调试通过,在这里与大家分享一下. 一.相关的配置文件引入 <!-- jQuery文件.务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1

  • 值得分享的Bootstrap Table使用教程

    bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j

  • Bootstrap table的使用方法

    Bootstrap table的使用方法

    Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到 这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值 当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了. $.map(data,function(item,index){return XXX}) //使用的总结: //把一个数组,按照新的方式进行组装返回,和原来的数组不一样. //遍历data数组中的每个元素,并按照return中的计算方式

  • BootStrap 可编辑表Table格

    BootStrap 可编辑表Table格

    一. 显示数据(基础功能) 在html页面中定义表格以及表格的列名,最后把从数据库中查询出来的数据,循环显示到页面中.这个系统用的是PHP语言,里边用到了PHP中的语法,如果是Java语言,把php换成jsp中对应的语法就行 <div class="containe"> <table class="table table-striped table-bordered table-hover"> <thead> <tr cla

  • BootStrap table使用方法分析

    本文实例为大家分享了BootStrap table的使用方法,供大家参考,具体内容如下 bootstrap table git address:https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"/> <link rel="

  • bootstrap table实例详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script type="text/javascript"> var $table = $('#table'); var columns = []; //获取表头信息 function buildColumnsStyle(url, align, valign, ignore) { $.ajax({ 'method': 'GET', 'url': url, 'async': false, 'success': funct

  • 教大家轻松制作Bootstrap漂亮表格（table）

    教大家轻松制作Bootstrap漂亮表格（table）

    学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己做一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容. 我们应该庆幸自己活在这样一个互联网时代,开放.共享.很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架,共享出来让我们使用,使得我们轻松就能实现很漂亮的效果. 下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上,我们只需要写很少的代码就能轻松制作漂亮表格. 比如我们要制作

  • 教你轻松制作Android音乐播放器

    教你轻松制作Android音乐播放器

    欣赏一下我们清爽的界面吧~ 如果是只用activity来制作这样的东西简直是太小儿科了,此处我们当然用的是service 首先我们先上service的代码: 1.如果我们要访问service的属性和方法,那么在activity肯定是以bindservice的方法实现的,而在service中的onbind方法也是必须要实现的,onbind返回的Ibinder对象在activity的serviceconnection中得到使用. 2.activity获取到Ibinder对象,可以进一步获取服务对象和

  • 运用iOS教你轻松制作音乐播放器

    运用iOS教你轻松制作音乐播放器

    本文实例为大家分享了iOS音乐播放器制作的具体代码,供大家参考,具体内容如下 效果图 目录结构 代码 // // ViewController.m // 播放音乐 // // Created by xubh on 2017/3/24. // Copyright © 2017年 xubh. All rights reserved. // #import "ViewController.h" #import <AVFoundation/AVFoundation.h> @inte

  • 教你轻松制作java音乐播放器

    教你轻松制作java音乐播放器

    一.音乐播放器的实现原理 Javase的多媒体功能很弱,所以有一个专门处理多媒体的插件叫JMF,JMF提供的模型可大致分为七类 * 数据源(Data source) * 截取设备(Capture Device,包括视频和音频截取设备) * 播放器(Player) * 处理器(Processor) * 数据池(DataSink) * 数据格式(Format) * 管理器(Manager) 而我所做的这个音乐播放器MyMusicPlayer(这是我创建的类名)正是调用了JMF中的Player类来实现

  • 运用js教你轻松制作html音乐播放器

    运用js教你轻松制作html音乐播放器

    用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

  • 教你轻松制作java视频播放器

    前言 跳过废话,直接看正文 当年入坑Java是因为它的跨平台优势.那时我认为,"编写一次,处处运行."这听上去多么牛逼,应该是所有语言发展的终极之道,java势必会一统天下. 然而事实证明,那时的我还是太年轻. 正所谓鱼和熊掌不可兼得,若要享受跨平台带来的方便,便不可避免地要接受性能上的不足.事实上,java一直在致力于提高虚拟机的性能(JIT等技术),但面对对实时计算性能要求很高或涉及到用硬件优化的任务(视频的硬件编码.解码)时,仍远远比不上c或c++.因此,很少能够看到有人用jav

  • Angualrjs和bootstrap相结合实现数据表格table

    Angualrjs和bootstrap相结合实现数据表格table

    AngularJS的数据表格 需要使用angualarjs.bootstrap.dirPagination.js 效果图: 1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="te

  • AngularJS 与Bootstrap实现表格分页实例代码

    AngularJS 与Bootstrap实现表格分页实例代码

    AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS  Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后

  • BootStrap数据表格实例代码

    首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值 就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:

  • BootStrap中的table实现数据填充与分页应用小结

    BootStrap中的table实现数据填充与分页应用小结

    BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化.最近后台使用此插件做了一个表格应用,做个总结. 1.使用方法 可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载.将下面的js插件和样式放到html head 头里即可使用. //样式 <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.

随机推荐