|
在 FastAdmin 中,table 组件基于 Bootstrap 样式库,因此可以使用许多 Bootstrap 提供的内置表格样式类。除了你提到的常用类 table-striped、table-bordered 和 table-hover,还有一些其他常见的表格类,以下是几个常用的类:
1. table-condensed
这个类用于使表格的单元格变得更加紧凑,减少单元格之间的间距。
<table class="table table-condensed">
<!-- 表格内容 -->
</table>
2. table-sm
与 table-condensed 类似,table-sm 用于使表格的高度变小,使其更加紧凑。这个类通常用于显示较少数据的表格,尤其是在小屏设备上查看时。
<table class="table table-sm">
<!-- 表格内容 -->
</table>
3. table-active
这个类用于高亮显示表格行或单元格,当用户与表格交互时,可以突出显示当前行或单元格。
<tr class="table-active">
<!-- 行内容 -->
</tr>
4. table-dark
此类将表格的背景色变为深色,适用于夜间模式或者需要暗色背景的界面。
<table class="table table-dark">
<!-- 表格内容 -->
</table>
5. table-light
与 table-dark 类似,table-light 用于设置浅色背景的表格。
<table class="table table-light">
<!-- 表格内容 -->
</table>
6. table-striped
这个类已经提到,用于给表格行交替添加背景颜色(斑马纹效果)。
<table class="table table-striped">
<!-- 表格内容 -->
</table>
7. table-bordered
这个类已经提到,用于为表格添加边框。
<table class="table table-bordered">
<!-- 表格内容 -->
</table>
8. table-hover
这个类已经提到,用于给表格添加悬停效果,使得鼠标悬停时行高亮显示。
<table class="table table-hover">
<!-- 表格内容 -->
</table>
9. table-responsive
此类用于让表格在小屏幕设备(如手机)上自适应,确保用户可以水平滚动表格以查看内容。
<div class="table-responsive">
<table class="table">
<!-- 表格内容 -->
</table>
</div>
10. table-primary, table-secondary, table-success, table-danger, table-warning, table-info, table-light, table-dark
这些类是 Bootstrap 4 和 Bootstrap 5 提供的背景色类。你可以给表格添加不同的颜色背景。
<table class="table table-primary">
<!-- 表格内容 -->
</table>
<table class="table table-success">
<!-- 表格内容 -->
</table>
<table class="table table-danger">
<!-- 表格内容 -->
</table>
11. table-nowrap
该类用于避免表格单元格内的文本换行,确保所有文本在一行显示。
<table class="table table-nowrap">
<!-- 表格内容 -->
</table>
小结:
FastAdmin 的 table 组件继承了 Bootstrap 样式库,因此支持多种表格样式类。除了常用的 table-striped、table-bordered 和 table-hover,还可以使用 table-condensed、table-sm、table-active、table-dark 等类来进一步定制表格的外观和行为。
|
|