表格（Tables） |
您所在的位置：网站首页 › 折叠式表格怎么做 › 表格（Tables） |
|
概述
由于横跨其他第三方套件广泛的使用，像是calendars和date pickers，因此可选择使用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给表格列或单元格上色。 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 ... 可悬停行Add.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属性设定单元格的背景。所有变数都加上该自定义属性使单元格有色彩。如此若将半透明的颜色用作表格背景，我们就不会遇到麻烦。 然后，我们在单元格上使用background-image: linear-gradient（var（--bs-table-accent-bg），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将所有单元格填充减半，使任何.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中的所有tds和th，没有它，我们的选择器看起来会很长。因此，我们使用外观非常奇怪的.table > :not(caption) > * > * 选择器来定位.table的所有tds和TH，但没有任何潜在的嵌套表。 结构 表头与表格和深色表格类似，请使用修改器类。.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 ... ... 表尾 # First Last Handle 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter Footer Footer Footer Footer ... ... ... 表格标题的功能类似于表格的标题。它帮助屏幕阅读器的用户找到一个表，了解它的内容，并决定他们是否要阅读它。 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中加入.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-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) 用于确定表变量中的对比度。 除了明表和暗表的变量，主题颜色由$table-bg-level变量变浅。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |