Twitter bootstrap 如何扩展引导颜色类

我正在我的网站上使用Bootstrap3.3.0

我遇到的一件事是，它们的上下文类

primary

、

info

、

success

、

warning

和

danger

可能会受到限制

例如，我有一个应用程序需要几种其他颜色，如紫色、黄色，并且可能需要一些介于

primary

和

info

之间的色调

现在，在开始滚动我自己的color wheel.css文件之前，我想知道上下文类上是否已经存在已知的引导扩展

这样就可以完美地融入现有的配色方案中

谢谢大家!

编辑

到目前为止还没有人回复这个帖子

好吧，对于那些不仅想帮助我自己，而且还想帮助很多其他人的人来说，“天哪……我真希望我有一个‘黄色’或‘棕色’或‘紫色’……”在使用Bootstrap时，我邀请任何熟悉颜色的人科学地提出一个扩展来扩展这些颜色类

---

这应该没那么难-但是有一门科学可以对颜色进行编码（我并没有接受过专门的培训），如果它是一个适当的扩展，那么它应该按照这些标准进行，以便其他人也可以使用它。

在Less.js（具有本机扩展功能）中实现这一点有两种可能的方法：

mixin是一种稍微不同的方法——您可以创建一个可重用的CSS片段，它可以在其他更少的块中调用

---

这两种方法中的任何一种都应足以完成所需的任务。

要轻松实现这一点，我将告诉您我做了什么。 我创建了我自己的css库，在引导后加载。 如何正确操作？ 例如，在这里（让我们设计我们自己的引导程序的btn-*类），您必须复制一个btn-*类。 然后添加你想要的单词。FE:

.btn-earth{/*same as bootstrap but changing the following */ background-color: brown; color: white; font-wheigt: bold; border:none;}
.btn-sun{/*same as bootstrap but changing the following */ background-color: yellow; color: black; border:1px solid orange;}

但是，如果需要覆盖某些内容： 由于引导类有时具有精确的选择器，因此必须复制相同的选择器才能覆盖引导类。使用！重要信息：如果您需要（但不推荐，因为您可能希望在特定情况下编辑一些），因此，如果引导程序具有3精度级别选择器，则必须使用相同的选择器（由于您的库将在引导后加载，如果您从本地而不是通过CDN加载引导的css，则它将优先于，在这种情况下，您需要创建比引导更精确的选择器）F.E:

如果我有一些额外的时间（在我每天在电脑前工作11个小时之后），我将编译一个css库来完成这项工作，并提供一些文档。 我肯定网络上一定有一个图书馆，但这主要是个人的事情，所以如果你用紫色按钮，它可能不是你想要的紫色色调

希望有帮助！您可以快速完成，在需要时逐行编写您自己的css库，完成两个项目后，您将拥有一个扩展库。=）

---

干杯

事实上，我认为Bootstrap默认为我们提供了五种上下文颜色，这对每个网站来说都是不够的，因为每个网站都有不同的设计，导致了不同的配色方案。我能给你的建议是

去看看一些颜色可能会有用

学习SCS以及它通过使用加亮和加暗或混合来控制颜色的方式。这意味着您可以定义一些默认的流行颜色，并使用这些函数来利用它，而不需要定义许多新颜色。检查这个

---

我认为你的问题没有好的答案。 不适用于当前或下一个可用版本（v4）。
这些特定的条件类在各种组件中实现，如表、表单控件、按钮、卡片、标记、进度条、列表组项、链接和文本。
对于每个现有的条件类，这些组件可能有相当多的修饰符规则，例如对于

.btn danger

.btn危险：悬停{
颜色：#fff；
背景色：#c9302c；
边框颜色：#c12e2a；
}
.btn危险：集中注意力，
.btn-danger.focus{
颜色：#fff；
背景色：#c9302c；
边框颜色：#c12e2a；
}
.btn危险：激活，
.btn-danger.active，
.open>.btn-danger.dropdown-toggle{
颜色：#fff；
背景色：#c9302c；
边框颜色：#c12e2a；
背景图像：无；
}
.btn危险：激活：悬停，
.btn危险：激活：聚焦，
.btn危险：活动。聚焦，
.btn危险。激活：悬停，
.btn危险。激活：聚焦，
.btn-danger.active.focus，
.open>.btn danger.下拉开关：悬停，
.open>.btn danger.下拉开关：焦点，
.open>.btn-danger.dropdown-toggle.focus{
颜色：#fff；
背景色：#ac2925；
边框颜色：#8b211e；
}
.btn危险。禁用：聚焦，
.btn-danger.disabled.focus，
.btn危险：禁用：聚焦，
.btn危险：禁用。聚焦{
背景色：#d9534f；
边框颜色：#d9534f；
}
.btn危险。禁用：悬停，
.btn危险：禁用：悬停{
背景色：#d9534f；
边框颜色：#d9534f；
}

有一个库@，它有用于所有默认HTML颜色的引导上下文类

这是我发现的最有用和最现成的方法

有些颜色很难看，但你有很多选择

---

快看

看看我创建的BS4的css扩展。它可能会帮助你，并随时添加更多的颜色

---

目前，包括BS4的颜色在内，共有21种颜色，覆盖了大部分色轮。

您可以在中自定义颜色。。但它将替换主类或信息类的现有颜色。我们不知道任何现成的css扩展。但是你可以利用以下内容来选择定制的主题颜色：我认为这会很有用，我不懂颜色-所以如果有人能创建一个颜色扩展名.css文件，这不仅对我很有帮助，而且对其他很多人也很有帮助，我确信谢谢，是的，我就是我们

/* bootstrap selector: */
.navbar > li > a {/* whatever */}
/* if you load bootstrap by CDN you must create an accurated one as follows: */
.container > .navbar > li > a {/* whatever */}
/* you'll have to remember that you have to set the navbar inside a container to make it sense */