| 如何设置 Bootstrap 表格(table)的背景、边框、对齐及使用嵌套表格、在指定宽度时出现滚动条等 · Bootstrap v5.1 | 您所在的位置：网站首页 › 设置表格的边框应选择 › 如何设置 Bootstrap 表格(table)的背景、边框、对齐及使用嵌套表格、在指定宽度时出现滚动条等 · Bootstrap v5.1 |
|
表格
Bootstrap 使用表格样式的文档和示例（鉴于它们在 JavaScript 插件中的普遍使用）。 内容提要 概览由于在日历和日期选择器等第三方小部件中广泛使用 元素，Bootstrap 的表格是需要添加相应类来使用。 将基类 .table 添加到任何 ，然后使用我们的可选修饰符类或自定义样式进行扩展。 Bootstrap 中不会继承所有表格样式，这意味着任何嵌套表格都可以独立于父表格进行样式设置。 使用最基本的表格标记，以下是基于 .table 的表格在 Bootstrap 中的外观。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 变体使用上下文类为表格、表格行或单个单元格着色。 Class Heading Heading Default Cell Cell Primary Cell Cell Secondary Cell Cell Success Cell Cell Danger Cell Cell Warning Cell Cell Info Cell Cell Light Cell Cell Dark Cell Cell ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 向使用辅助技术的用户传达信息使用颜色来传达的信息仅提供给视觉用户，不会传达给使用辅助技术的用户 - 例如屏幕阅读器。 确保由颜色表示的信息是文本的，或者通过其他方式表示，例如使用 .visually-hidden 类隐藏的附加文本。 强调的表格 隔行变色（条纹行）使用 .table-striped 将斑马条纹添加到 内的任何表格行。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ...这些类也可以添加到表格变体中： # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... 行的悬停效果在 内的表格行上添加 .table-hover ，以启用悬停状态效果。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ...这些可悬停的行也可以与条纹表格结合使用： # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... 活动表格通过添加 .table-active 类来突出显示表格行或单元格。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... ... ... 3 Larry the Bird @twitter # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... ... ... 3 Larry the Bird @twitter 表格变体和强调的表格是如何工作的对于强调的表格（条纹行、可悬停行和活动表格)，我们使用了一些技术来使这些效果适用于我们所有的表格变体： 我们首先使用 --bs-table-bg 自定义属性设置表格单元格的背景。 然后所有表格变体设置该自定义属性以着色表格单元格。 这样，如果使用半透明颜色也不会遇到问题。 然后我们用 box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); 在表格单元格上添加一个内阴影层到指定的 background-color 层之上。 因为我们使用了巨大的传播并且没有模糊，所以颜色会是单色的。 由于 --bs-table-accent-bg 默认未设置，我们没有默认的盒子阴影。 添加 .table-striped、.table-hover 或 .table-active 类时，--bs-table-accent-bg 设置为半透明颜色以着色背景。 对于每个表格变体，我们根据该颜色生成具有最高对比度的 --bs-table-accent-bg 颜色。 例如，.table-primary 的强调色较暗，而 .table-dark 的强调色较浅。 文本和边框颜色的生成方式相同，默认继承它们的颜色。在幕后它看起来像这样： @mixin table-variant($state, $background) { .table-#{$state} { $color: color-contrast(opaque($body-bg, $background)); $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor)); --#{$variable-prefix}table-bg: #{$background}; --#{$variable-prefix}table-striped-bg: #{$striped-bg}; --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)}; --#{$variable-prefix}table-active-bg: #{$active-bg}; --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)}; --#{$variable-prefix}table-hover-bg: #{$hover-bg}; --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)}; color: $color; border-color: mix($color, $background, percentage($table-border-factor)); } } 表格边框 有边框的表格为表格和单元格的所有边添加 .table-bordered 边框。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ...可以添加 边框颜色实用程序 来更改颜色： # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... 无边框表格为没有边框的表格添加 .table-borderless。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... 紧凑表格添加 .table-sm ，以通过将所有单元格 padding 减半来使任何 .table 更紧凑。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... 垂直对齐的表格单元格始终垂直对齐到底部。 中的表格单元格从 继承它们的对齐方式，并且默认对齐到顶部。 使用 垂直对齐 类在需要的地方重新对齐。 Heading 1 Heading 2 Heading 3 Heading 4 This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. ... ... ... ... ... This cell is aligned to the top. ... 嵌套边框样式、活动样式和表格变体不会被嵌套表格继承。 # First Last Handle 1 Mark Otto @mdo Header Header Header A First Last B First Last C First Last 3 Larry the Bird @twitter ... ... ... ... 嵌套的工作原理为了防止 任何 样式泄漏到嵌套表中，我们在 CSS 中使用子 (>) 选择器。 因为我们需要获得目标 thead、tbody 和 tfoot 中的所有 td和th ，如果没有它，我们的选择器看起来会很长。 因此，我们使用看起来很奇怪的 .table > :not(caption) > * > * 选择器以 .table 的所有 td 和 th 为目标，但没有任何潜在的嵌套表格。 请注意，如果您将 s 添加为表格的直接子级，则这些 默认情况下将被包装在 中，从而使我们的选择器按预期工作。 剖析 表头(Table head)类似于表格和黑暗模式表格，使用修饰符类 .table-light 或 .table-dark 使 看起来很亮 或深灰色。 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... ... # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ... ... Table foot # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Footer Footer Footer Footer ... ... ... Captions的功能类似于表格的标题。 它可以帮助使用屏幕阅读器的用户找到一个表格并了解它的内容并决定他们是否要阅读它。 List of users # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter List of users ... ...您也可以使用 .caption-top 将 放在表格顶部。 List of users # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter List of users # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 响应式表格响应式表格允许表格轻松水平滚动。 通过用 .table-responsive 元素包裹 .table 表格使表格在所有视口中都具有响应性。 或者，通过使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 来选择一个响应式的最大断点。 垂直剪裁/截断响应式表格使用 overflow-y: hidden，它会剪掉超出表格底部或顶部边缘的任何内容。 特别是，这可以剪掉下拉菜单和其他第三方小部件。 始终表现为响应式在所有断点上，使用 .table-responsive 水平滚动表格。 # Heading Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell Cell ... 断点指定根据需要使用 .table-responsive{-sm|-md|-lg|-xl|-xxl} 创建响应式表格，直至特定断点。 从该断点开始，表格将正常运行并且不会水平滚动。 在它们的响应式样式应用于特定视口宽度之前，这些表格可能会出现损坏。 # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell # Heading Heading Heading Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell Cell Cell Cell ... ... ... ... ... ... Sass 变量 $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-accent-bg: transparent; $table-th-font-weight: null; $table-striped-color: $table-color; $table-striped-bg-factor: .05; $table-striped-bg: rgba($black, $table-striped-bg-factor); $table-active-color: $table-color; $table-active-bg-factor: .1; $table-active-bg: rgba($black, $table-active-bg-factor); $table-hover-color: $table-color; $table-hover-bg-factor: .075; $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-variants: ( "primary": shift-color($primary, $table-bg-scale), "secondary": shift-color($secondary, $table-bg-scale), "success": shift-color($success, $table-bg-scale), "info": shift-color($info, $table-bg-scale), "warning": shift-color($warning, $table-bg-scale), "danger": shift-color($danger, $table-bg-scale), "light": $light, "dark": $dark, ); 自定义 因子变量（$table-striped-bg-factor、$table-active-bg-factor & $table-hover-bg-factor) 用于确定表格变体中的对比度。 除了light 和 dark表格变体，主题颜色由 $table-bg-level 变量变亮。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |