html - 混合变换原始 Bootstrap 颜色以获得已知颜色

Question

也许这个问题很荒谬，但我目前正在 Twitter Bootstrap 中实现一个元素，我会保留框架的原始颜色。所以，如果我想添加另一种颜色，我会使用 Less 的强大功能及其功能来混合和转换 Bootstrap 的原始颜色以获得我需要的颜色。

这是 Bootstrap 的原始颜色:

@gray-base:         #000;
@gray-darker:       lighten(@gray-base, 13.5%); // #222
@gray-dark:         lighten(@gray-base, 20%);   // #333
@gray:              lighten(@gray-base, 33.5%); // #555
@gray-light:        lighten(@gray-base, 46.7%); // #777
@gray-lighter:      lighten(@gray-base, 93.5%); // #eee

@brand-primary:     #428bca;
@brand-success:     #5cb85c;
@brand-info:        #5bc0de;
@brand-warning:     #f0ad4e;
@brand-danger:      #d9534f;

假设我想获取颜色#4FA293。为此，我使用 Less 函数 mix()，如下所示:

mix(#428bca, #5cb85c, 50%)

#428bca 是@brand-primary 颜色，#5cb85c 是@brand-success 颜色。

这只是了解我的目标的示例。问题是:

是否有一种工具可以混合、转换和转换 Bootstrap 颜色以获得先验已知颜色？

有数学关系可以实现吗？

我想我可以获得从 5 种 Bootrasp 颜色和较少的函数开始的所有颜色。

Answer 1

I need the Bootstrap set of colors. Now, how can I add a new color to the set? Can I generate new colors from the Bootstrap set? If not, can I add a custom color with hover, buttons, navs, etc.?

定义新的添加颜色很容易:@brand-custom: #4FA293。要在组件上应用该颜色，您应该使用 Bootstrap mixins(另请阅读:http://bassjobsen.weblogs.fm/adding-background-gradient-bootstraps-navbar-less/)。

示例按钮:

@brand-custom: #4FA293;
.btn-custom {
  .button-variant(#fff; @brand-custom; darken(@brand-custom, 5%));
}

您可以在bootstrap.less 文件末尾记下上述代码。重新编译后你可以使用:

<button class="btn btn-custom">Custom button</button>

按钮现在应该如下所示:

然后你可以做同样的事情来定制你的面板:

.panel-custom {
  .panel-variant(darken(spin(@brand-custom, -10), 7%); #fff;  @brand-custom; darken(spin(@brand-custom, -10), 7%););
}

现在是以下面板:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Will 如下所示:

检查 Bootstrap 的 variables.less 时文件，您应该注意到原始面板颜色并非直接源自品牌颜色 ( one could wonder why not )。

成功面板的 CSS 代码已使用以下 mixin 创建:

.panel-success {
  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
}

变量定义如下:

@state-success-text:          #3c763d;
@state-success-bg:            #dff0d8;
@state-success-border:        darken(spin(@state-success-bg, -10), 5%);
@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

因此更改 @brand-success 不会更改 .panel-success CSS 类。

您应该重复上述步骤或您要使用 @brand-custom 颜色设置的每个组件。