Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap 5 深色模式


深色模式

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

如果要将整个页面更改为较深的颜色,可以在 <html> 元素中添加 data-bs-theme="dark" 属性。

默认示例

我的页面

一些 Lorem Ipsum 文本。

亲自尝试 »

深色模式示例

我的页面

一些 Lorem Ipsum 文本。

亲自尝试 »

组件的深色模式

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

例如,为表格添加深色模式

示例

示例

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

或者例如,为下拉菜单添加深色模式

示例

示例

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


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.