JS组件Bootstrap Table布局详解

JS组件Bootstrap Table布局详解,第1张

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>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</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>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</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>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</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>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</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>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</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>No1</td>

<td>北京</td>

</tr>

<tr

class="success">

<td>No2</td>

<td>上海</td>

</tr>

<tr

class="warning">

<td>No3</td>

<td>苏州</td>

</tr>

<tr

class="danger">

<td>No4</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>No1</td>

<td>北京</td>

</tr>

<tr>

<td>No2</td>

<td>上海</td>

</tr>

<tr>

<td>No3</td>

<td>苏州</td>

</tr>

<tr>

<td>No4</td>

<td>南京</td>

</tr>

</tbody>

</table>

</div>

显示效果:

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

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

table。

$(document)ready(function(){

$('#skillContentTable')bootstrapTable({

url: querySkillUrl,

columns: [],

resizable: true,

pagination: true,

sidePagination: 'client',

pageNumber: 1,

pageSize: 10,

pageList: [10,20,50,'All'],

search: true,

showRefresh: true,

showToggle: true,

showColumns: true,

});

});

以上就是关于JS组件Bootstrap Table布局详解全部的内容,包括:JS组件Bootstrap Table布局详解、bootstrap-table 的getsections 获取有问题,没有选中也会有值、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10209383.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-06
下一篇 2023-05-06

发表评论

登录后才能评论

评论列表(0条)

保存