JS组件Bootstrap Table布局详解


Posted in Javascript onMay 27, 2016

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

JS组件Bootstrap Table布局详解

表格类
下表样式可用于表格中:

JS组件Bootstrap Table布局详解

<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格:

JS组件Bootstrap Table布局详解

基本的表格
如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

<div class="row">
      <table class="table">
        <caption class="text-center">基本表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
        </tbody>
      </table>
</div>

显示效果:

JS组件Bootstrap Table布局详解

可选的表格类
除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格
通过添加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:

<div class="row">
      <table class="table table-striped">
        <caption class="text-center">条纹表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
    </div>

显示效果:

JS组件Bootstrap Table布局详解

边框表格
通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

<div class="row">
      <table class="table table-bordered">
        <caption class="text-center">边框表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
 </div>

显示效果:

JS组件Bootstrap Table布局详解

悬停表格
通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

<div class="row">
      <table class="table table-hover">
        <caption class="text-center">悬停表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
</div>

显示效果:

JS组件Bootstrap Table布局详解

精简表格
通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

<div class="row">
      <table class="table table-condensed">
        <caption class="text-center">精简表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
</div>

显示效果:

JS组件Bootstrap Table布局详解

上下文类
下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

JS组件Bootstrap Table布局详解

这些类可以用到<tr>、<td>、<th>中,如下面实例所示:

<div class="row">
      <table class="table">
        <caption class="text-center">上下文表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr class="success">
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr class="warning">
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr class="danger">
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
    </div>

显示效果:

JS组件Bootstrap Table布局详解

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

<div class="table-responsive">
    <table class="table">
      <caption class="text-center">响应式表格布局</caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>No.1</td>
          <td>北京</td>
        </tr>
        <tr>
          <td>No.2</td>
          <td>上海</td>
        </tr>
        <tr>
          <td>No.3</td>
          <td>苏州</td>
        </tr>
        <tr>
          <td>No.4</td>
          <td>南京</td>
        </tr>
      </tbody>
    </table>
  </div>

显示效果:

JS组件Bootstrap Table布局详解

如果还想继续学习的话大家可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望能够帮助大家更好的学习JS表格组件神器bootstrap table。

Javascript 相关文章推荐
js中indexof的用法详细解析
Dec 24 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
使用jQuery实现购物车
Oct 29 jQuery
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 #Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 #Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 #Javascript
Dojo获取下拉框的文本和值实例代码
May 27 #Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 #Javascript
js基于cookie方式记住返回页面用法示例
May 27 #Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 #Javascript
You might like
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
laravel入门知识点整理
2020/09/15 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
银行纠风工作实施方案
2014/06/08 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
科学育儿宣传标语
2014/10/08 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
三八妇女节主持词
2015/07/04 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫