内容排版: 表格


发布时间:2020-03-17 21:06    作者: Uncle Hui   已过去:2 月,2 周   阅读总量:116 已被赞:0


表格

(1) 在第三方部件例如日历和日期选择器中广泛使用表格,我们设计了视情况需要加入的表格类。只需要向某个<table>添加一个基类.table,然后通过自定义样式或系统提供的class来起作用。

使用最基本的表格标记,下面是Bootstrap中 .table表格的样式(基本样式), Bootstrap 4继承了所有的表格样式,这意味着任何嵌套表格都将以与父类型相同的方式进行样式化。

(2) 你可<table>里使用.table-dark class选择器来产生颜色反转对比效果,即深色背景和浅色文本。table-** 有好几种颜色和样式,比如紧缩表格,去掉框线等,pycharm里可以试验。

Head表头处理:与预设的反转样式相似,使用.thead-light .thead-dark 中的一个样式,就能使 <thead>区显示出浅黑或深灰表头就是表的第一排标题栏,在<thead>里添加

(3) 条纹状表格:使用 .table-striped 样式定义 <tbody>,可以产生逐行颜色强烈对比的表格样式(以及增加反转)。(可同.table-dark结合使用)<table>里添加类

(4) 表边框处理:添加 .table-bordered 类可以产生表格边框与间隙系统。(同)可同.table-dark结合使用与其相反,去掉全部边框 table-borderless

<table>里添加类=<<table class="table">

(6) 行悬停效果:将 .table-hover 定义上,可以产生行悬停效果(鼠标移到行上会出现状态提示)。(同) 效果:鼠标移动到某一行,会出现选中效果

(7) 紧缩表格:添加 .table-sm 可以将表格的padding内部行距值缩减一半,使表格更加紧凑。(同)

(8) Captions表格辅助标题<caption> 标签如同一个表格的标题,它默认是隐藏的,可以协助屏幕阅读器用户找到表格、了解表格内容,且决定是否需要阅读它。

<table class="table">

<!-- <caption>List of users</caption> -->

<thead>

<tr>

<th>#</th>

<th>First Name</th>

<th>Last Name</th>

<th>Username</th>

</tr>

</thead>

<tbody>

<tr>

<th>1</th>

<td>Mark</td>

<td>Otto</td>

<td>@mdo</td>

</tr>

<tr>

<th>2</th>

<td>Jacob</td>

<td>Thornton</td>

<td>@fat</td>

</tr>

<tr>

<th>3</th>

<td>Larry</td>

<td>the Bird</td>

<td>@twitter</td>

</tr>

</tbody>

</table>

语义状态化给每行表格指定颜色,例子给出了全部颜色,可以指定到 td或th上都行

使用语义状态样式对表格逐行或单个单元格进行着色表达。(On rows or On cells (`td` or `th`))

<table class="table table-bordered table-hover">

<thead>

<tr>

<th>Type</th>

<th>Column heading</th>

<th>Column heading</th>

<th>Column heading</th>

</tr>

</thead>

<tbody>

<tr class="table-active">

<th>Active</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr>

<th>Default</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-primary">

<th>Primary</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<!-- <tr>

<th class="table-primary">Primary</th>

<td class="table-primary">Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr> -->

<tr class="table-secondary">

<th>Secondary</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-success">

<th>Success</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-danger">

<th>Danger</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-warning">

<th>Warning</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-info">

<th>Info</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-light">

<th>Light</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="table-dark">

<th>Dark</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

</tbody>

</table>

深色表格上没有固定的背景,你可以使用 文字或背景通用样式 获得类似的样式:

Bg- 的都是深色的背景,也可以加在td上,下面全部颜色都有

<table class="table table-bordered table-hover">

<thead>

<tr>

<th>#</th>

<th>Column heading</th>

<th>Column heading</th>

<th>Column heading</th>

</tr>

</thead>

<tbody>

<tr class="bg-primary">

<th>primary</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<!-- <tr>

<th class="bg-primary">primary</th>

<td class="bg-primary">Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr> -->

<tr class="bg-success">

<th>success</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="bg-warning">

<th>warning</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="bg-danger">

<th>danger</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

<tr class="bg-info">

<th>info</th>

<td>Column content</td>

<td>Column content</td>

<td>Column content</td>

</tr>

</tbody>

</table>

响应式表格如果我们的表格一行很长,超出了页面范围,我们就给表格添加一个div,并且指定类为table-responsive可以实现在任何屏幕下都自由缩放,出现滚动条

当表格想要始终呈现水平滚动,可在.table上加入.table-responsive获得响应式表现,从而支持任何viewport窗口。也可以在.table上,加 .table-responsive{-sm|-md|-lg|-xl}属性来定义多屏幕尺寸响应支持。

<div class="table-responsive">

<table class="table">

<thead>

<tr>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

<th>HeadingHeadingHeading</th>

</tr>

</thead>

<tbody>

<tr>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

<td>CellCellCell</td>

</tr>

</tbody>

</table>

</div>

点赞

0




登陆后方可评论