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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
用js解决数字不能换行问题
Aug 10 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JS数据类型判断的几种常用方法
Jul 07 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
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生成随机数的三种方法
2014/09/10 PHP
php json转换成数组形式代码分享
2014/11/10 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JavaScript 创建对象
2009/07/17 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
python语言中with as的用法使用详解
2018/02/23 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
.NET概念性的面试题
2012/02/29 面试题
品管员岗位职责
2013/11/10 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
会计实训总结范文
2015/08/03 职场文书
课程设计感想范文
2015/08/11 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL