Question

我在我的网站上使用Bootstrap 3.3.0。

我遇到的一件事是他们的上下文类primary，info，success，warning和danger可能会受到限制。

例如，我有一个应用程序需要其他几种颜色，例如紫色，黄色以及primary和info之间的某些色调。

现在，在我开始编辑自己的色轮.css文件之前，我想知道在上下文类中是否已经存在并且已知Bootstrap 扩展。

然后，这将完美地融入现有的配色方案。

谢谢！

修改

到目前为止，没有人回答过这篇文章...

那么，对于那些不仅想帮助我自己而且还想帮助那些已经离开的人来说， “Jeez ......我真的希望我有'黄色'或'棕色'颜色或''紫色'颜色......“ 使用Bootstrap时，我邀请任何精通颜色的人科学地想出一个可以扩展这些颜色类的扩展。

它应该不是那么困难 - 但是有一种科学来进行颜色编码（我没有特别训练过它），如果它是一个适当的延伸，那么它应该按照这些标准来完成，以便其他人也可以使用它。

Answer 1

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

.btn-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}
.btn-danger:focus,
.btn-danger.focus {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}
.btn-danger:active,
.btn-danger.active,
.open > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
  background-image: none;
}
.btn-danger:active:hover,
.btn-danger:active:focus,
.btn-danger:active.focus,
.btn-danger.active:hover,
.btn-danger.active:focus,
.btn-danger.active.focus,
.open > .btn-danger.dropdown-toggle:hover,
.open > .btn-danger.dropdown-toggle:focus,
.open > .btn-danger.dropdown-toggle.focus {
  color: #fff;
  background-color: #ac2925;
  border-color: #8b211e;
}
.btn-danger.disabled:focus,
.btn-danger.disabled.focus,
.btn-danger:disabled:focus,
.btn-danger:disabled.focus {
  background-color: #d9534f;
  border-color: #d9534f;
}
.btn-danger.disabled:hover,
.btn-danger:disabled:hover {
  background-color: #d9534f;
  border-color: #d9534f;
}

如果你看一下源代码，你会注意到，按钮的例子，作者使用mixins来生成条件类的规则：

//
// Alternate buttons
//

.btn-danger {
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
}

和其他地方

$btn-danger-color:               #fff !default;
$btn-danger-bg:                  $brand-danger !default;
$btn-danger-border:              $btn-danger-bg !default;

再次，在其他地方

$brand-danger:              #d9534f !default;

规则在源文件中是硬编码的，因此在这里实现某些目的的唯一方法是使用新规则扩展这些文件并添加新颜色，基本上修改引导程序并重新编译。
这是可行的，但请考虑一下：

您需要维护代码（未来的更新可能与您的覆盖不兼容）
你需要额外的工具和技能，至少如何使用sass以及如何使用自己的bootstrap版本
您需要在许多.sass文件中实现这些额外的条件类
像你说的那样“紫色”意味着你需要为每个组件测试一个3-4色调色板。

还有一个术语问题：.btn-warning，。text-danger，.table-info等在提出颜色名称时具有语义含义。

我没有看到一个非常好的扩展谁为每个附加条件类定义了调色板？这些规则即使在字节方面也具有权重，您不希望有这么多条件类来覆盖大多数用户。

相反，您可能需要为您决定添加的每个条件类生成规则生成器。可以制作这样的工具，但同样应该保持并且还可以复古兼容。例如，有7个版本可以覆盖比你更新的版本（3.3.0，仍然是LESS）加上新的v4（SASS）值得吗？
通常，这些条件类对于大多数用途来说足够了，如果你想要，你可以generate customized versions of bootstrap使用不同的颜色组合。

Answer 2

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

访问http://clrs.cc/，看一些颜色可能有用。
通过使用变亮和变暗或混合来学习SCSS及其控制颜色的方式。这意味着您可以定义一些默认的流行颜色并使用这些功能来使用它而无需定义许多新颜色。请查看此article

Answer 3

为了轻松达到这个目的，我会告诉你我做了什么。我创建了自己的css库，我在bootstrap之后加载。 如何正确使用？ 在那里，例如（让我们自己的bootstrap的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;}

但是，如果你需要覆盖一些东西： 由于引导类有时会对选择器进行精确处理，因此您必须复制相同的选择器才能覆盖引导类。如果你不需要，请使用！important（但不推荐，因为你可能想在特定的情况下编辑一些）所以，如果bootstrap有3个精度等级选择器，必须使用相同的（因为你的库将在bootstrap之后加载，它将优先考虑 ONLY 如果你从本地而不是CDN加载bootstrap的css，那么你需要创建比bootstrap更精确的选择器）FE：

/* 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 */

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

希望它有所帮助！你可以快速完成，在你需要的时候逐行编写你自己的css库，在一对项目之后你会有一个非常的。 =）

干杯！

Answer 4

在Less.js中实现此目的的两种可能方式（具有本机扩展功能）：

http://lesscss.org/features/#extend-feature-extend-syntax

Mixins是一种略有不同的方法 - 您可以创建一个可重复使用的CSS，可以在其他Less块中调用。

https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

其中任何一项都应足以完成预期的任务。

Answer 5

有一个库@ http://www.colorstrap.com/，它包含所有默认HTML颜色的引导上下文类。

这是我发现的最有用和现成的。

有些颜色很丑 - 但你有很多颜色可供选择。

有它！

Answer 6

看看我创建的BS 4的这个CSS扩展。它可以为您提供帮助，并随时添加更多颜色！

BootstrapColorsExtended

现在，包括BS4的颜色在内，共有21种颜色，涵盖了大多数色轮。

如何扩展Bootstrap颜色类

6 个答案: