网站怎么制作成软件,网站怎么做子网页,资源搜索,微信视频号小店目录
表格
基础表格
实例
条纹表格
实例
带边框表格
实例
有悬停效果的行
实例
黑色/深色表格
实例
黑色/深色条纹表格
实例
可悬停的黑色/深色表格
实例
无边框表格
实例
上下文类
可用的上下文类#xff1a;
实例
表头颜色
实例
小型表格
实例
响应…目录
表格
基础表格
实例
条纹表格
实例
带边框表格
实例
有悬停效果的行
实例
黑色/深色表格
实例
黑色/深色条纹表格
实例
可悬停的黑色/深色表格
实例
无边框表格
实例
上下文类
可用的上下文类
实例
表头颜色
实例
小型表格
实例
响应式表格
实例 表格
注意在 Bootstrap 5 中所有的表格样式都是独立的这意味着它们不需要父元素或嵌套表格来应用样式。
基础表格
一个基本的 Bootstrap 5 表格有一点内边距以及水平分隔线。.table 类为表格添加了基本样式
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtabletheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
运行结果 条纹表格
.table-striped 类是用于在 Bootstrap 表格中添加条纹效果的关键。条纹效果主要是通过为奇数行和偶数行提供不同的背景颜色来实现的。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-stripedtheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中thead 是表格的表头部分tbody 是表格的主体部分包含了一些行 tr。在每一行中都有一些 td也就是表格的单元格。
运行结果
带边框表格
.table-bordered 类可以用于为 Bootstrap 表格添加边框。这个类会在每个 td 和 th 元素周围添加边框从而在表格中创建边框效果。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-borderedtheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中表格的每个单元格都有边框包括表头和主体部分。如果你想要添加边框但不想让表头有边框可以使用 .table-borderless 类来移除表头的边框。
运行结果
有悬停效果的行
.table-hover 类可以为 Bootstrap 表格添加鼠标悬停效果。当用户将鼠标悬停在表格的行上时该行会变为浅灰色并增加一点透明度以突出显示用户正在查看的行。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-hovertheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中将鼠标悬停在表格的行上时该行会变为浅灰色并增加一点透明度。如果想要移除这个效果可以使用 .table-unhovered 类来移除鼠标悬停效果。
运行结果
黑色/深色表格
.table-dark 类可以为 Bootstrap 表格添加黑色背景。这个类主要用于在深色主题中提高表格的可读性。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-darktheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中表格的背景色被设置为黑色以提高在深色背景上的可读性。如果想要移除这个效果可以使用 .table-light 类来将背景色设置为浅色。
运行结果 黑色/深色条纹表格
联合使用 .table-dark 和 .table-striped 类可以创建带有黑色条纹的表格。这种组合会在深色背景上创建更明显的对比使条纹更易于识别。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-dark table-stripedtheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中表格的背景色被设置为黑色并且带有条纹效果。通过结合使用 .table-dark 和 .table-striped 类可以创建具有深色背景和明显条纹的表格以提高可读性和视觉吸引力。
运行结果
可悬停的黑色/深色表格
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果。当用户将鼠标悬停在表格的行上时该行会变为浅灰色并增加一点透明度以突出显示用户正在查看的行。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-dark table-hovertheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中表格的背景色被设置为黑色并且带有鼠标悬停效果。当用户将鼠标悬停在表格的行上时该行会变为浅灰色并增加一点透明度。通过结合使用 .table-dark 和 .table-hover 类可以创建具有黑色背景和明显鼠标悬停效果的表格以提高交互性和可读性。
运行结果 无边框表格
.table-borderless 类可以用于创建一个无边框的表格。这个类会移除表格的所有边框包括行和单元格之间的边框。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-borderlesstheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在这个例子中表格的边框被完全移除创建了一个无边框的表格。这个类对于创建一种极简主义的表格设计非常有用其中表格的信息是关注的焦点而不是边框本身。
运行结果 上下文类
上下文类可用于为整个表格 (table)、表格行 (tr) 或表格单元格 (td) 着色。这些上下文类以 .table-* 的形式命名其中 * 是一个特定的颜色名称。
可用的上下文类
类描述.table-primary蓝色表示重要动作。.table-success绿色表示成功或积极的动作。.table-danger红色表示危险或潜在的负面行为。.table-info浅蓝色表示中性的信息更改或操作。.table-warning橙色表示可能需要注意的警告。.table-active灰色将悬停颜色应用于表格行或表格单元格。.table-secondary灰色表示不太重要的动作。.table-light浅灰色表格或表格行背景。.table-dark深灰色表格或表格行背景。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-borderedtheadtrth类/thth描述/th/tr/theadtbodytr classtable-primarytd.table-primary/tdtd蓝色表示重要动作。/td/trtr classtable-successtd.table-success/tdtd绿色表示成功或积极的动作。/td/trtr classtable-dangertd.table-danger/tdtd红色表示危险或潜在的负面行为。/td/trtr classtable-infotd.table-info/tdtd浅蓝色表示中性的信息更改或操作。/td/trtr classtable-warningtd.table-warning/tdtd橙色表示可能需要注意的警告。/td/trtr classtable-activetd.table-active/tdtd灰色将悬停颜色应用于表格行或表格单元格。/td/trtr classtable-secondarytd.table-secondary/tdtd灰色表示不太重要的动作。/td/trtr classtable-lighttd.table-light/tdtd浅灰色表格或表格行背景。/td/trtr classtable-darktd.table-dark/tdtd深灰色表格或表格行背景。/td/tr/tbody/table/div/body
/html
运行结果
表头颜色
Bootstrap 提供了一些特定的类来设置表头的颜色。例如.table-dark 类用于给表头添加黑色背景.table-light 类用于给表头添加灰色背景。这些类可以与 .table 类一起使用以快速为表格的表头设置颜色。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-darktheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/tr/tbody/tabletable classtable table-lighttheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/tr/tbody/table/div/body
/html
运行结果
小型表格
.table-sm 类可以将表格的单元格尺寸减半从而使表格看起来更小。这个类适用于那些需要更小尺寸的表格例如在卡片、消息框或其他小型布局中。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3table classtable table-bordered table-smtheadtrthFirstname/ththLastname/ththEmail/th/tr/theadtbodytrtdJohn/tdtdDoe/tdtdjohnexample.com/td/trtrtdMary/tdtdMoe/tdtdmaryexample.com/td/trtrtdJane/tdtdDoe/tdtdjaneexample.com/td/tr/tbody/table/div/body
/html
在上面的示例中表格的每个单元格尺寸都被减半从而使整个表格看起来更小。这个类非常适合在小型布局中使用或者在需要更紧凑的表格布局时使用。
运行结果
响应式表格
.table-responsive 类可以创建一个响应式的表格当表格在水平方向上太宽时会自动添加滚动条。这个类非常适合在较窄的视口屏幕尺寸上查看表格时能够提供更好的可读性和用户体验。
实例
!DOCTYPE html
html langenheadtitleBootstrap 实例/titlemeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1link hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/css/bootstrap.min.css relstylesheetscript srchttps://cdn.jsdelivr.net/npm/bootstrap5.1.2/dist/js/bootstrap.bundle.min.js/script/headbodydiv classcontainer mt-3div classtable-responsivetable classtabletheadtrth scopecol#/th/tr/theadtbodytrtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/tdtd1/tdtdCell 1/tdtdCell 2/tdtdCell 3/td/tr/tbody/table/div/div/body
/html
运行结果 注意还可以决定表格何时应该获得滚动条具体取决于屏幕宽度
类屏幕宽度.table-responsive-sm 576px.table-responsive-md 768px.table-responsive-lg 992px.table-responsive-xl 1200px.table-responsive-xxl 1400px
