https://v5.bootcss.com/docs/content/tables/ .table 类是table标签的基础类(必写) .table-{ color } 可以写给table标签,也可以写给tr,td,th .table-striped 条形纹,就是各行变色,加到table标签上 .table-hover 鼠标悬停行的效果,加到table标签上 table边框 .table-bordered 有默认颜色,可以改变边框颜色 ...
Dark Striped TableCombine .table-dark and .table-striped to create a dark, striped table:ExampleTry it Yourself » Hoverable Dark TableThe .table-hover class adds a hover effect (grey background color) on table rows:ExampleTry it Yourself » Borderless Table...
以我们的.table 组件为例,其中添加了一些局部变量,让开发人员更容易做出 striped、hoverable 和 active 的表格样式: .table { --bs-table-bg: #{$table-bg}; --bs-table-accent-bg: transparent; --bs-table-striped-color: #{$table-striped-color}; --bs-table-striped-bg: #{$table-striped-bg};...
在Bootstrap中实现这种表格效果并不困难,只需要在<table class="table">的基础上增加类名“.table-striped”即可 通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。其效果与基础表格相比,仅是在tbody隔行有一个浅灰色的背景色 [注意]条纹状表格是依赖:nth-childCSS 选择器实现的,而这一功能不被I...
Boostrap将表格<table>的样式重置如下 table { background-color: transparent; border-spacing: 0; border-collapse: collapse; } 1. 2. 3. 4. 5. <table> <caption>Optional table caption.</caption> <thead> <tr> <th>#</th> <th>First Name</th> ...
table-striped 隔行换色 table-bordered 给表格添加边框 table-hover 给每一行添加一个hover状态 table-condensed 让表格更加紧凑 注意:将表格包在一个class为table-responsive的div里,当屏幕尺寸小于768的时候会出现滚动条 在表格中,Bootstrap 还封装了一些状态类,通过这些状态类可以为行或单元格设置颜色。 active 鼠...
$table-cell-padding-y: .5rem; $table-cell-padding-x: .5rem; $table-cell-padding-y-sm: .25rem; $table-cell-padding-x-sm: .25rem; $table-cell-vertical-align: top; $table-color: $body-color; $table-bg: transparent; $table-th-font-weight: null; $table-striped-color: $table-col...
$table-hover-bg: rgba($black, $table-hover-bg-factor); $table-border-factor: .1; $table-border-width: $border-width; $table-border-color: $border-color; $table-striped-order: odd; $table-group-separator-color: currentColor; $table-caption-color: $text-muted; $table-bg-scale: -80%...
table-striped:斑马线表格,交替着色以提高可读性。 table-bordered:带边框的表格,每个单元格都有边框。 table-hover:鼠标悬停时高亮显示表格行。 table-responsive:创建响应式表格,以适应小屏幕设备。 示例代码: 代码语言:javascript 复制 <tableclass="table table-striped"><!--表格内容--></table> ...
table-striped:添加斑马线形式的条纹(隔行变色); table-borderd:为单元格添加边框; table-hover:启用鼠标悬停状态,会出现浅灰色背景; table-condensed:让表格更加紧凑; 例子:在制作一个具有各行变色、鼠标悬停功能的条纹状的紧凑表格; <!DOCTYPE html>