如何扩展 Bootstrap 颜色类 [关闭]答案

【问题标题】：How to extend Bootstrap color classes [closed]如何扩展 Bootstrap 颜色类 [关闭]
【发布时间】：2017-01-20 07:05:54
【问题描述】：

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

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

例如，我有一个应用程序需要其他几种颜色，例如紫色、黄色，可能还有一些介于 primary 和 info 之间的色调。

现在，在我开始滚动我自己的色轮 .css 文件之前，我想知道上下文类中是否已经存在已知的 Bootstrap extension。

那么这将完美地融入现有的配色方案中。

谢谢！

编辑

到目前为止，没有人回答这个帖子......

好吧，对于那些不仅想帮助我自己，还想帮助许多其他已经离开的人“天啊......我真希望我有一个'黄色'或'棕色'或' Purple' color..." 在使用 Bootstrap 时，我邀请任何精通颜色的人科学地想出一个可以扩展这些颜色类的扩展。

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

【问题讨论】：

您可以在bootstrap..中自定义颜色，但它会替换主类或信息类的现有颜色
不知道任何现成的css扩展。但是您可以使用以下内容来选择自定义主题颜色：color.adobe.com 另外我认为这会很有用getbootstrap.com/customize
好吧，我不是很懂颜色 - 所以如果有人可以创建一个颜色扩展的 .css 文件，这不仅对我很有帮助，而且我相信很多其他人

标签： twitter-bootstrap css twitter-bootstrap-3 colors

【解决方案1】：

在 Less.js（具有原生扩展功能）中实现此目的的两种潜在方法：

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

Mixins 是一种稍微不同的方法 - 您可以创建可在其他 Less 块中调用的可重用 CSS 片段。

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

其中任何一个都应该足以完成所需的任务。

【讨论】：

【解决方案2】：

为了轻松实现这一点，我会告诉你我做了什么。我创建了自己的 css 库，我在 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（但不推荐，因为您可能希望在特定情况下编辑一些）因此，如果引导程序有 3 个精度级别的选择器，则必须使用相同的选择器（因为您的库将在引导程序后加载，它将优先仅如果您从本地而不是通过 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 库，在完成一对项目之后，您将拥有一个扩展的项目。 =)

干杯！

【讨论】：

谢谢，是的，我很清楚我可以编译自己的库，并且可以在必要时这样做。我正在尝试获得完整的 Bootstrap 颜色类扩展——我认为很多人都可以从中受益。所以如果你能把一些东西放在一起，你可能只是在写一段历史
那么我们必须应用一个全面而自然的命名法。你可以给我发短信并分享一些使用引导程序的类。在电报上给我发短信@joelbonetr
嗨@joel，感谢您对此的交流。与 Telegram 相比，我更喜欢将其保留在此处（而且我很少使用这些系统）。出于此扩展的目的，我相信bg-purple 会很好，例如bg-yellow。我们可以做一些类似bg-prince 或bg-banana 的事情，但这完全取决于你。期待你组合的任何东西
这是我的个人库之一，扩展了颜色 btn 类（我通常不保留颜色修改，因为我在需要时编写它，但这里有一个示例和许多其他有用的类。 ) mega.nz/#!R591AJ6L!T0gT8bFEl5WeqAHuSXCLb6AzGlkS9qI4s4Uu4t9TTiE

【解决方案3】：

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

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

【讨论】：

感谢@trungk18 - 非常有帮助。到目前为止，clrs.cc 非常棒。会搞砸这个。等待其他几个回复 - 但到目前为止这是最有帮助的。
欢迎您，希望您能尽快找到您想要的答案：D

【解决方案4】：

我认为您的问题没有好的答案。不适用于当前或下一个可用版本 (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 以及如何制作自己的引导程序版本
您需要在许多 .sass 文件中实现这些额外的条件类
拥有您所说的“紫色”意味着您需要为每个组件测试一个 3-4 种调色板。

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

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

相反，您可能需要为您决定添加的每个条件类生成一个规则。可以制作这样的工具，但同样，应该维护并且还兼容。例如，有 7 个版本涵盖了比您的更新更多的版本（3.3.0，仍在 LESS 中）加上新的 v4 (SASS) 是否值得？
一般来说，这些条件类对于大多数用途来说已经足够了，如果你愿意，你可以generate customized versions of bootstrap 使用不同的颜色组合。

【讨论】：

【解决方案5】：

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

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

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

试试吧！

【讨论】：

【解决方案6】：

看看我创建的这个 BS 4 的 css 扩展。它可能会对您有所帮助，并随时添加更多颜色！

BootstrapColorsExtended

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

【讨论】：