具有备用颜色的自举组件 [英] Bootstrap components with alternate colors

问题描述

是否有建议的方法来拥有两个具有不同颜色集的Bootstrap组件?

Is there a recommended way to have 2 Bootstrap components with different color sets?

例如，两个导航选项卡，一个在深色主题中，另一个在浅色主题中.

For example, two nav-tabs, one in a dark theme, and another in a light theme.

最好是这样的:

<div class="dark"><ul class="nav nav-tabs"> ... </ul></div>
<header>...</header>
<div class="light"><ul class="nav nav-tabs"> ... </ul></div>

但是类似这样的事情可能会很好:

But something like this might be fine:

<ul class="dark-nav dark-nav-tabs"> ... </ul>
<header>...</header>
<ul class="dark-nav light-nav-tabs"> ... </ul>

我宁愿包括2个Bootstrap CSS文件，一个带有深色变量.less，一个带有浅色，但是在某种命名空间中添加样式前缀.理想情况下，我希望将意外键入或类似内容的风险降到最低.在黑暗的地方闲逛会更容易.

I would rather include 2 Bootstrap CSS files, one with dark variables.less and one with light colors, but have the styles prefixed in some kind of namespace. Ideally I would want to minimize the risk of accidentally typing or something. Having a around the dark areas would be easier.

推荐答案

@import "bootstrap.less" under a class对我来说似乎很奇怪，因为bootstrap.less包含Booststrap css的每个文件的导入.另请参阅:是否可能使用CDN将引导程序仅应用于div?

It seems strange for me to @import "bootstrap.less" under a class cause bootstrap.less contains the import for every file of Booststrap's css. See also: Is it possible to apply bootstrap for a div only, using CDN?

尝试看看Bootstrap如何做到这一点: https://github.com/twbs /bootstrap/issues/10332

Try to take a look how Bootstrap do this: https://github.com/twbs/bootstrap/issues/10332

其背后的想法是，纯.navbar类仅提供布局样式等，并且>所有颜色均由修饰符类应用.

The thinking behind this is that the pure .navbar class only provides layout styles etc, and >all colors are applied by the modifier classes.

例如，按钮的布局样式和.c始终有两个类. btn-error表示颜色.我认为您可以使用相同的策略.

For example a button has two classes always .btn for layout styles and .btn-* b.e. btn-error for colors. I think you could use the same strategy.

您应使用类似以下内容的

You should use something like:

<ul class="nav nav-dark nav-tabs nav-tab-dark"> ... </ul>

例如在您定义custom-nav.less(在bootstrap.less中导入)的位置:

Where you define in for example custom-nav.less (imported in bootstrap.less):

.nav-tabs-dark > li.active > a, 
.nav-tabs-dark > li.active > a:hover, 
.nav-tabs-dark > li.active > a:focus
{
   background-color: #000;
   color: #fff;
}

等

这篇关于具有备用颜色的自举组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！