当前位置: 首页 > 编程笔记 >

JS组件Bootstrap Table布局详解

葛意远
2023-03-14
本文向大家介绍JS组件Bootstrap Table布局详解,包括了JS组件Bootstrap Table布局详解的使用技巧和注意事项,需要的朋友参考一下

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

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

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

基本的表格
如果您想要一个只带有内边距(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>

显示效果:

可选的表格类
除了基本的表格标记和 .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>

显示效果:

边框表格
通过添加 .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>

显示效果:

悬停表格
通过添加 .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>

显示效果:

精简表格
通过添加 .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>

显示效果:

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

这些类可以用到<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>

显示效果:

响应式表格
通过把任意的 .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>

显示效果:

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

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

 类似资料:
  • 我们拓展了基础组件的概念, 创造出了布局组件. 例子 const Grid = (props) => ( <Box {...props} display='inline-block' verticalAlign='top' px={2}/> ); const Half = (props) => ( <Grid {...props} width={1 / 2}

  • 布局是开发 Web 页面最常接触的一个方面,也是页面最直观的一种展现方式。然而在开发前端页面的时候很多工程师会为布局感到头疼,不仅是因为不同浏览器厂商兼容程度的不同,而且还有诸多如适配不同分辨率屏幕所带来的问题、实现起来比较复杂的问题等种种情况。不过在使用了 MIP 之后我们不需要再为这些问题烦恼,MIP 提供了一整套完备的组件布局系统,支持不同布局类型和方式,开发者需要做的仅仅是为组件指定布局属

  • 主要内容:什么是AWT 布局组件,什么是AWT 布局管理器,AWT 布局管理器接口,常用的AWT 布局管理器类什么是AWT 布局组件 布局是指组件在容器内的排列。换句话说,我们可以说将组件放置在容器内的特定位置。布局控件的任务由布局管理器自动完成。 什么是AWT 布局管理器 布局管理器会自动定位容器内的所有组件。如果我们不使用布局管理器,那么组件也由默认布局管理器定位。手动布局控件是可能的,但由于以下两个原因而变得非常困难。 处理容器内的大量控件非常繁琐。 很多时候,当我们需要排列组件的时候,组

  • 本文向大家介绍详解vue.js全局组件和局部组件,包括了详解vue.js全局组件和局部组件的使用技巧和注意事项,需要的朋友参考一下 这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面。 代码演示如下: 2.理解组件的创建和注册 我们用以下几个步骤来理解组件的创建和注册: 1. V

  • 本文向大家介绍jQuery布局组件EasyUI Layout使用方法详解,包括了jQuery布局组件EasyUI Layout使用方法详解的使用技巧和注意事项,需要的朋友参考一下 layout 布局组件,依赖于panel,自己开发个web小程序的时候直接用这个组件布局很方便。 对于一个web程序原来说,特别是像我这种一遇到界面美化问题就找美工的程序员,想自己独立的开发一个东西,除了套用以前的项目中

  • 本文向大家介绍Bootstrap 布局组件(全),包括了Bootstrap 布局组件(全)的使用技巧和注意事项,需要的朋友参考一下 Bootstrap 布局组件 1、Bootstrap字体图标 (1)、字体图标列表链接      http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2)、用法      如需使用图标,只需要简单地使用