具有备用颜色的自举组件 [英] 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屋!