Bootstrap5 深色模式


深色模式

默认情况下,Bootstrap页面具有白色(浅色)背景颜色。

如果你想把整个页面变成更深的颜色,你可以添加data-bs-theme="dark" <html>元素:

默认示例

My Page

Some lorem ipsum text.

亲自试一试 »

深色模式示例

My Page

Some lorem ipsum text.

亲自试一试 »

组件的深色模式

如果您不希望整个页面颜色较深,而只希望特定组件颜色较深,则可以添加data-bs-theme="dark"指定组件的属性。

例如,向表格添加深色模式:

示例

示例

<table class="table" data-bs-theme="dark">
亲自试一试 »

或者例如,将深色模式添加到下拉菜单:

示例

示例

<div class="dropdown" data-bs-theme="dark">
亲自试一试 »