开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为Bootstrap 4制作深色主题输入

，可以通过以下步骤实现：

首先，了解Bootstrap 4的基本概念和特性。Bootstrap是一个流行的前端开发框架，提供了丰富的CSS和JavaScript组件，用于快速构建响应式网页和Web应用程序。
深色主题是一种在网页或应用程序中使用暗色背景和亮色文本的设计风格。它可以提供更加现代和独特的外观，并且在夜间或低光环境下具有更好的可读性。
在Bootstrap 4中，可以通过自定义CSS样式来制作深色主题。以下是一些关键步骤：
a. 创建一个新的CSS文件，用于存储自定义样式。可以将其命名为"dark-theme.css"。
b. 在该CSS文件中，使用合适的选择器和属性来修改Bootstrap 4的默认样式。例如，可以设置背景颜色、文本颜色、边框颜色等。
c. 使用!important关键字来确保自定义样式的优先级高于Bootstrap 4的默认样式。这样可以确保深色主题的样式生效。
d. 根据需要，可以进一步自定义其他组件和元素的样式，以实现一致的深色主题效果。
在应用程序中引入自定义的深色主题CSS文件。可以通过在HTML文件的<head>标签中添加<link>标签来实现。例如：
在应用程序中引入自定义的深色主题CSS文件。可以通过在HTML文件的<head>标签中添加<link>标签来实现。例如：
测试和调整深色主题的效果。在浏览器中打开应用程序，并确保深色主题的样式正确应用。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行应用程序。了解更多：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定的云端存储服务，用于存储和管理应用程序的静态资源。了解更多：https://cloud.tencent.com/product/cos
- 腾讯云CDN：提供全球加速的内容分发网络，用于加速网页和应用程序的访问速度。了解更多：https://cloud.tencent.com/product/cdn
- 腾讯云云函数（SCF）：提供事件驱动的无服务器计算服务，用于构建和运行无需管理服务器的应用程序。了解更多：https://cloud.tencent.com/product/scf
- 腾讯云数据库（TencentDB）：提供高性能、可扩展的云数据库服务，用于存储和管理应用程序的数据。了解更多：https://cloud.tencent.com/product/cdb

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。

相关搜索:Netbeans深色主题仍为白色 Bootstrap 4，删除右侧深色列旁边的空格 Bootstrap 4 Sass -动态改变主题如何在输入字段中使用bootstrap 4制作芯片角度材质输入没有带有深色主题的白色文本为vmware clarity深色主题使用自定义类 bootstrap -验证bootstrap 4的选择输入 BottomSheetDialogFragment为深色主题设置了错误的背景色 2SXC Bootstrap 4即时主题入门无法更改闪亮中的bs4Dash“深色”皮肤主题背景在Laravel 5.5中使用Bootstrap 4主题 Bootstrap 4输入组框-卷影内联形式的输入宽度- Bootstrap 4 显示Bootstrap 4范围输入的值 Bootstrap 4输入组插件不工作主题化Bootstrap以更改表单输入活动颜色 select2 formatState不支持bootstrap 4主题如何在Bootstrap 4卡边框上制作按钮？将bootstrap 3中制作的幻灯片转换为bootstrap 4 Bootstrap 4:将输入水平放置

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

独立开发者必备的29个开源React后台管理模板

React Web应用程序开发管理后台可能非常耗时，这和设计所有前端页面一样重要。

01

思维导图软件Xmind 2022 Mac中文版

Xmind 2022 for Mac是一款非常便捷的制作思维导图的软件，它有非常丰富的模板可以使用，制作思维导图可以帮助用户更高效的进行学习，理清相关学习内容的思路和大体框架，用户可以根据自己的需求进行自主设计，也可以直接添加模板。

03

如何在网页设计中实现深色模式：增强用户体验

近年来，深色模式已成为网页设计的主要趋势，以其优雅的外观吸引访问者，并为传统的浅色主题界面带来了可喜的变化。深色模式在各种数字平台上变得越来越流行，包括操作系统、移动应用程序和网站。但这不仅仅是一种趋势；这是一个将持续存在的设计决策。

01

2021React UI 库

ReactJS是当今最流行的前端开发库之一，它让我们的开发变得轻松高效，它可以轻松地和打包工具整合，同时它的第三方扩展也非常的丰富，今天我们来介绍下react组件ui库。这些UI框架通过分离重组构成React的各个组件，在React中我们只需要引入它们就可以轻松地在代码中使用它们。

02

使用 BeamerStyleSlides 制作你的技术答辩PPT

年末，又到了很多朋友准备答辩晋升 slides 的时候。PPT工程应该是很多技术人的天敌之一，不少人为了在工作之余折腾出一份既有内容又美观的 slides 弄得焦头烂额。

01

为什么别人的代码总是很美，而你的却是很丑，让这款神器来彻底解救你吧！

如果你想把一小段代码分享到各大社交网站，透过 GitHub Gist 产生链接是个不错的方式。若是要转为精美的图片， Carbon、CodeZen 这类可以将代码转成图片、加上窗口阴影和上色效果的线上工具，或许来说会更好用。大家都知道社交网站在不同区块或类别都有不一样的图片尺寸限制，接下来要介绍的这项服务就是整合了各大社交网站模版和代码的转图片工具，让你可以做出更适合分享的代码图片。

01

这么牛逼的前端 UI 设计库必须了解下！

今天给大家推荐一个漂亮的前端 UI 设计库 NextUI，跟 NextJS 是同一家开发的，看起来很不错，Github上已有 10.7K Star。

02

DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode

暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。

01

Power BI默认配色很丑？先设置个夺目的背景再说！

小勤：Power BI默认的白色页面背景及图表色系感觉有点儿土哦。怎么能简单地弄得看起来高大上一点儿？

02

如何在 React 中快速实现暗黑模式

暗黑模式已成为许多应用程序和网站的最基本功能，因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能，使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。

03

博客园美化，更改外部主题，自定义JavaScript

在之前，我一直以为博客园他是那种万年不变的老旧风格，看着就有一种年代感，但是，昨天我莫名看到一个项目，我尝试进行了美化后，发现这玩意很好看啊。

05

网站制作中色彩的搭配方法

很多用户在网站制作初期不知道如何运用格调色彩，往往在选色上琢磨不定，今天介绍一下网站制作中色彩运用原则：一、色彩搭配原则在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。 1.色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。 2.色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。 3.色彩的艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。 4.色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用红色体现政府门户网站的威严，用红色或者粉色代表女性网站的柔情等。二、网页色彩搭配方法网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。 1.同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。 2.邻近色彩搭配：邻近色是指在色环上相邻的颜色，如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。 3.对比色彩搭配：一般来说，色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力，能够起到几种实现的作用。对比色可以突出重点，产生强烈的视觉效果。通过合理使用对比色，能够使网站特色鲜明、重点突出。在设计时，通常以一种颜色为主色调，其对比色作为点缀，以起到画龙点睛的作用。 4.暖色色彩搭配：暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。 5.冷色色彩搭配：冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配，这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。 6.有主色的混合色彩搭配：有主色的混合色彩搭配是指以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果。 7.文字与网页的背景色对比要突出：文字内容的颜色与网页的背景色对比要突出，底色深，文字的颜色就应浅，以深色的背景衬托浅色的内容(文字或图片);反之，底色淡，文字的颜色就要深些，以浅色的背景衬托深色的内容(文字或图片)。 pageadmin自助建站系统、。

03

给你的应用建立一套配色方案

我们将构建具有自定义属性和的可访问颜色系统 calc() ，以制作适应用户偏好的网页，同时保持最小的创作体验。我们从基本品牌颜色开始，并从中构建一个变体系统：2 种文本颜色、4 种表面颜色和匹配的阴影。

04

Mac思维导图软件Xmind 2022中文版

Xmind 2022 for Mac是一款非常便捷的制作思维导图的软件，灵感捕捉利器，效率头脑风暴脑图工具，XMind 2021 Mac版是一款让你专注思维，捕捉每一个灵感瞬间的应用，制作思维导图可以帮助用户更高效的进行学习。

03

利用PPT如何设计制作创意相框

很多人都希望自己的PPT能够独具匠心，在展示图片或制作电子相册时，总想让图片有个新颖、独特的相框，而PPT自带的图片边框显得“力不从心”。如果利用自选图形，再经过边线及内部填充等设置，就能够制作出具有创意效果的相框。下面iSlide就讲述微立体相框和水晶相框的制作技法。

02

好消息！ONLYOFFICE工作区更新了12.5新特性

好消息，ONLYOFFICE工作区又更新了，注意这次更新的是工作区的内容，12.5更新内容又：增强的安全性、优化的文档管理、深色主题等。

02

【Web技术】623- 简单好用的前端深色模式/主题化开发方案

深色模式（Dark Mode）在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。快速开发一个深色模式难吗？在支持css自定义属性（又称css变量，css variables）的现代浏览器里，可以说是相当的容易。甚至可以在运行时实时新增主题，摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。下面我们来看一下如何使用css自定义属性来完成深色模式和主题化的开发。

01

你说的黑是什么黑

近一年，随着iOS和安卓陆续支持了深色模式，各个团队的一通操作，也的确为用户带来“眼前一黑”的体验。深色模式也成为了前阵子业界最火的话题之一。只是当设计师看了无数的关于深色模式的讨论；当无数产品跟进上线了深色模式；再当无数App的深色模式被骂的改了又改，回头来看看，你说的黑，到底是什么黑。 Chapter 1 我所经历过的深色模式虽然说，我真正开始做UI设计是近年，但是曾经还是体验过很多深色模式的界面的。甚至有很多产品，天生就是深色模式。可以发现，史前的深色模式，要么是因为技术原因，要么就一些对注

02

Edge插件推荐

uBlock Origin 是一款广告拦截插件，它的主要功能是阻止网页上的广告加载，从而提高页面加载速度、减少网络流量消耗，并改善整体浏览体验。以下是 uBlock Origin 的一些特点和功能：

01

flstudio21中文版2023最新下载安装及更换皮肤图文详细使用教程

FLStudio21是我见过更新迭代最快的宿主软件，没有之一。FL Studio12、FL Studio20、FL Studio21等等。有时甚至我刚刚下载好了最新版本，熟悉了新版本一些好用的操作，Fl Studio就又推出了更新的版本，而且FL Studio的每次全新版本总能带给人意想不到的惊喜。虽然有的更新只是处理一些细节问题，但是这样努力关注用户体验以及软件性能的公司，确实是让人觉得值得信赖。

01

Xmind 2022 for Mac(思维导图软件)

Xmind 2022 for Mac是一款全功能的思维导图软件，拥有专业实用的功能，包括思维管理、商务演示、与办公软件协同工作等功能，让您的办公更有效，还加入了演讲模式，在演说模式可自动生成转场动画和布局，一键即可展示你的思维导图。

02

Bootstrap运用终极指南

Bootstrap是一个功能强大的、以移动端为优先的响应式前端框架，它是用CSS、HTML和JavaScript构建的。与从零开始编程，甚至许多其他框架相比，Bootstrap都有许多优势。

01

纯干货！谷歌MD深色主题设计规范详解（附Sketch官方文件下载）

作为目前最主流的设计风格和主题规范之一，Material Design 的深色主题设计规范非常值得参考学习。这是一套高度自恰的设计规范，有着相当严密的内部逻辑，在 Material Design 的内在隐喻逻辑的推动下，严格遵循国际通行的可用性原则来确保深色主题的可用性和合理性。

01

.NET Avalonia开源、免费的桌面UI库 - SukiUI

今天分享一款.NET Avalonia基于MIT License协议开源、免费的桌面UI库：SukiUI。

01

【设计】近期发现的 APP UI 设计趋势

https://appmaster.io/blog/top-10-mobile-app-ui-design-ideas-2022

03

Android 10适配要点，深色主题

各位小伙伴们大家早上好，今天给大家带来一篇关于Android 10适配的原创文章。

01

现代 CSS 解决方案：accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。

01

Xmind 2022 Mac思维导图软件中文版

Xmind 2022 for Mac是一款非常便捷的制作思维导图的软件，它有非常丰富的模板可以使用，制作思维导图可以帮助用户更高效的进行学习，理清相关学习内容的思路和大体框架，用户可以根据自己的需求进行自主设计，也可以直接添加模板。XMind帮你专注于它的扩展延伸和梳理，融合艺术与创造力，让思维清晰可见。你可以创建 workflow，接下来心无旁骛投入工作流程；

01

思维导图软件哪个好？Xmind 2022 中文版下载（win/mac）

Xmind 2022是一款超强思维导图软件，可以帮助用户更高效的进行学习，理清相关学习内容的思路和大体框架，用户可以根据自己的需求进行自主设计，也可以直接添加模板。

02

为你的网页添加深色模式[每日前端夜话0x48]

CSS 规范一直在不断发展。尽管在 CSS 新功能的实现很复杂，但是 CSS 工作组还是决定要把简化版作为新元素添加到规范中。然后由浏览器来实现这些新元素，浏览器自行决定以哪种顺序去实现它们，这就是为什么现在对新功能的支持不匹配的原因。虽然这可能会令人讨厌，但实际上完成了规范的浏览器要好得多。

03

操作系统：Win10自带的8个基本功能非常实用，赶紧收藏吧！

有些朋友总是喜欢安装很多第三方软件，但是却没有意识到win10自带的基本功能，比这些第三方软件更加好用。今天小编给大家介绍一下Win10自带的八个功能，希望对大家能有所帮助！

01

H2O-ac theme for Jekyll

正如大家所知，Jekyll 是一款高可定制的、非常流行的静态博客生成工具。围绕着 Jekyll 也衍生出了很多优秀的 Jekyll 主题，由廖柯宇开发的 H2O 主题就是其中之一。极简主义、风格扁平化、卡片式布局、Medium 及知乎专栏的视觉风格等等特点，为我们带来了或许是迄今为止最漂亮的 Jekyll 主题。

03

2020全球CSS报告，目前最流行的布局，最前沿的特性以及前沿的技术库

CSS 从 1994 年 10 月首次被提出，到目前为止已经20余年，但是 CSS 早已发生了天翻地覆的变化，2020的CSS 又是如何的呢？

01

深色模式适配指南

随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。

03

现代 CSS 解决方案：accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。

01

Marp —用Markdown编写PPT

Marp 是一个用 Markdown 编辑幻灯片的跨平台免费软件，用户在左侧区域编辑 MD 文本，可在右侧即时显示效果。软件支持多种主题配色，在幻灯片内可插入 Emoji、数学公式，自定义背景，导出为 PDF 文档。

03

黑暗模式UI设计风潮来袭，设计师应如何应对？

静电说：在最近一段时间里，黑暗模式成了大家讨论的话题。继Mac OS加入黑暗模式后，iOS和iPad OS也相继发布了黑色模式的选择，未来的一段时间里，越来越多的应用开始适配黑暗模式，仿佛它已经成为了UI设计中的一个标配选项。那么对于设计师来说，应该如何应对这个趋势，做出适应不同人群，不同场景风格的优秀界面呢？来看看这篇来自Miklos Philips的这篇文章吧！

02

Mac思维导图软件,Xmind 2022 Mac中文版

Xmind for Mac是一款全新的Mac平台思维导图软件。Xmind for Mac功能强大，拥有全新的软件内核，采用全新的渲染技术，让思维导图中的每一个字都非常美观，XMind让你专注思维，捕捉每一个灵感瞬间的 App。每当你有一个想法，XMind帮你专注于它的扩展延伸和梳理，融合艺术与创造力，让思维清晰可见。

01

再见 Typora ！这款开源的 Markdown 神器界面更炫酷，逼格更高！

MarkText号称下一代Markdown编辑器，是一款简单易用的开源编辑器，支持Linux、MacOS和Windows系统。MarkText在Github上已经有26.9k+Star，可见其是非常流行的！

03

Flutter适配深色模式的方法（DarkMode）

也不知道写点什么，本来想写写Flutter的集成测试。因为前一阵子给flutter_deer写了一套，不过感觉也没啥内容，写不了几句话就放弃了。(其实本篇内容也不多。。。)

01

Google I/O 2019 Android 应用源代码现已发布

今年的 I/O 应用大幅修改了现有功能并添加了若干新特性。在这篇文章中，我们将着重围绕其中几项主要变更进行说明。

01

可视化系统搭建--遇见大数据可视化系列文章之四

如何搭建数据可视化系统，用丰富的设计语言清晰表达复杂和庞大数据，并形成鲜明的设计风格？我们把数据可视化的元素进行拆分并建立相应的规范体系。图表设计 1. 图表基本类型六种基本图表涵盖了大部分图表使用场景，也是做数据可视化最常用的图表类型：柱状图分类照片照片什么照片什么什么项目之间的比较; 饼图构成即部分占总体的比例; 折线图随时间变化的趋势; 条形图分类照片照片什么照片什么什么项目之间的比较; 散点图相关性或分布关系; 地图区域之间的分类照片照片什么照片什么什么比较

02

前端基础：Boostrap

Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

01

国外排名前 15 的 Vue 后台管理模板

后面的模板是我们做后台管理系统经常所需要的东西。虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。

02

Android 深色模式的项目应用

早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式：

06

Android 深色模式的项目应用

早在四年前就准备做深色模式的，当时用的三方的SDK，但是SDK上还有bug，不能适配RecyclerView，用上后会很卡，然后就一直放着了，有些用户一直催着要深色模式：

01

Xmind 2022 for Mac(思维导图软件)

Xnind是一款让你专注思维，捕捉每一个灵感瞬间的App,每当销生新想法时，「Xnind」帮你专注于它的扩展延伸和梳理，融合艺术与创造力，让思维清晰可见，你可以创建worklow,接下来心无旁骛投入工作流程；以灵感为中心，在无限的脑图幕布上延伸想法；随手记录点滴灵感、待办清单、会议记录或是项目规划，尽情享受逻辑思维的畅快。

04

基于腾讯云云服务器的rancher环境搭建

Rancher是一款开源企业级容器管理平台，提供全面、稳健的容器管理和官方支持。使用Rancher，我们可以快速轻松地运行和管理Docker和Kubernetes，构建自己的容器“牧场”。

03

15 个优秀的 Vue 后台管理模板

后台的模板是我们做后台管理系统经常所需要的东西。虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。

02

2021，排名前 15 的 Vue 后台管理模板

后面的模板是我们做后台管理系统经常所需要的东西。虽然，我们总可以花很多时间从头开始设计自己的模板，但有现在的模板让我们套，节省我们更多时间用来摸鱼，何乐而不为呢。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭