如何更改引导程序版本 4 按钮颜色

Posted 2023-03-06

【中文标题】如何更改引导程序版本 4 按钮颜色

【英文标题】：how to change bootstrap version 4 button color

【发布时间】：2018-08-17 11:26:50

【问题描述】：

我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色。但它也会影响所有其他组件。 如何在不影响主题颜色的情况下设置主按钮颜色？ 我不想设置brand-primary并实现它。还有其他选择吗？

【参考方案1】：

您必须创建一个自定义 css 表并覆盖按钮样式或将按钮添加一个新类并覆盖一些属性。

<button class="btn-primary">Button</button>

.btn-primary
    background-color:black;


<button class="btn-primary custom-btn-class">Button</button>

.custom-btn-class
     background-color:black;

【讨论】：

我正在寻找 bootstrap 4 解决方案

@Jocket 那么这怎么不是 BS 4 解决方案呢？

【参考方案2】：

试试这个方法

添加一个 class 到 button ，这里是 custom-btn 并在我们的 stylesheet 中为其编写 css。

.btn-primary.custom-btn 
	background-color: #000;
	border-color: #000;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
	<button type="button" class="btn btn-primary custom-btn">Custom</button>
  <button type="button" class="btn btn-primary">Default</button>
</div>

【讨论】：

请在您的答案中使用 Bootstrap 4 stable 版本。 Alpha 已经很老了。

这不包括悬停和活动状态。

【参考方案3】：

根据引导程序documentation

Bootstrap 的许多组件都是使用基本修饰符类构建的 方法。这意味着大部分样式都包含在基础中 类（例如，.btn），而样式变化仅限于修饰符 类（例如，.btn-danger）。这些修饰符类是从 $theme-colors 映射来自定义我们的编号和名称 修饰符类。

因此，如果您更改主题颜色，那么它将影响所有内容。

如果您还想在其他地方使用该颜色，也许您应该在 $theme-colors 变量中添加颜色。

【参考方案4】：

您可以通过 sass 文件 (Bootstrap 4) 中的变量更改颜色来添加自定义颜色或重新定义颜色。

$theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

如果您对颜色使用相同的键，您将重新定义 Bootstrap。否则，使用新键创建新类。

本示例将原色从蓝色变为红色。

【讨论】：

对于 laravel 5.7，在 _variables.scss 中更改主题颜色。

【参考方案5】：

2019 年 Bootstrap 4.1+ 更新

现在 Bootstrap 4 使用 SASS，您可以使用 button-variant 混合轻松仅更改按钮颜色。由于您只想更改主按钮颜色，而不是整个主主题颜色，因此您需要使用 SASS 中的 button-variant mixins。您可以设置任何您想要的$mynewcolor 和/或lighten() 和darken() 百分比。

$mynewcolor:teal;

.btn-primary 
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));


.btn-outline-primary 
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);

https://www.codeply.com/go/f3uTwmsCVZ（SASS 演示）

这个 SASS 编译成下面的 CSS...

.btn-primarycolor:#fff;background-color:teal;border-color:#005a5a

.btn-primary:hovercolor:#fff;background-color:#004d4d;border-color:#009a9a
.btn-primary:focus,.btn-primary.focusbox-shadow:0 0 0 .2rem rgba(0,90,90,0.5)
.btn-primary.disabled,.btn-primary:disabledcolor:#fff;background-color:teal;border-color:#005a5a
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-togglecolor:#fff;background-color:#00b3b3;border-color:#000
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focusbox-shadow:0 0 0 .2rem rgba(0,90,90,0.5)

.btn-outline-primarycolor:teal;background-color:transparent;background-image:none;border-color:teal.btn-outline-primary:hovercolor:#222;background-color:#009a9a;border-color:teal
.btn-outline-primary:focus,.btn-outline-primary.focusbox-shadow:0 0 0 .2rem rgba(0,128,128,0.5)
.btn-outline-primary.disabled,.btn-outline-primary:disabledcolor:teal;background-color:transparent
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-togglecolor:#fff;background-color:#009a9a;border-color:teal
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focusbox-shadow:0 0 0 .2rem rgba(0,128,128,0.5)

https://www.codeply.com/go/l9UGO7J6V1（CSS 演示）

---

要更改 所有 上下文类（bg-primary、alert-primary 等）的原色，请参阅：Customizing Bootstrap CSS template 和 How to change the bootstrap primary color?

另见：https://***.com/a/50973207/171456How to theme bootstrap

【讨论】：

这应该是公认的答案，它涵盖了所有按钮状态。

要注意字体颜色不能与背景颜色分开，这令人失望。

@nicodemus13 你的意思是你不能使用button-variant mixin？

是的，抱歉，不清楚。字体颜色是根据背景颜色计算出来的。

参数是button-variant(background, border-color, hover:background-color, hover:background-color, active:background-color, active:background-color)

【参考方案6】：

我有一个类似的问题：我想让按钮匹配它的容器颜色。

所以我创建了一个 btn 类，它会在页面加载时自动适应其父颜色。我对结果很满意（事实上我什至正在创建一个小插件）。 JSfiddle here

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

$(function() 

  const hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];

  function hex(x) 
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  
  function hexify(rgb) 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  
  function darken(rgb) 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "rgb(" + parseInt(0.9 * rgb[1]) + ',' + parseInt(0.88 * rgb[2]) + ',' + parseInt(0.87 * rgb[3]) + ')';
  

  function getParentBackground($elem) 
    var color = $elem.css("background-color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentBackground($elem.parent()));
  

  function getParentColor($elem) 
    var color = $elem.css("color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentColor($elem.parent()));
  

  $('.btn-negative, .btn-outline-negative').each(function() 
    var bgColor = hexify(getParentBackground($(this).parent()));
    var color = hexify(getParentColor($(this).parent()));
    var rgb = getParentColor($(this).parent());
    this.style.setProperty('--btn-negative-color0', bgColor);
    this.style.setProperty('--btn-negative-color1', color);
    this.style.setProperty('--btn-negative-shadow-color', color + "88");
    this.style.setProperty('--btn-negative-color2', hexify(darken(rgb)));
    this.style.setProperty('--btn-negative-color3', hexify(darken(darken(rgb))));
  );

);

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

.btn-negative::before,
.btn-outline-negative::before 
  --btn-negative-color0: #fff;
  --btn-negative-color1: #000;
  --btn-negative-color2: #000;
  --btn-negative-color3: #000;
  --btn-negative-shadow-color: #0008;


.btn-outline-negative 
    background-color: var(--btn-negative-color0);
    border: solid 1px var(--btn-negative-color1);
    color: var(--btn-negative-color1);


.btn-negative,
.btn-outline-negative.active,
.btn-outline-negative:hover:not(.disabled):not([disabled]),
.btn-outline-negative:active:not(.disabled):not([disabled]) 
    background-color: var(--btn-negative-color1);
    color: var(--btn-negative-color0);


.btn-negative.active,
.btn-negative:hover:not(.disabled):not([disabled]),
.btn-negative:active:not(.disabled):not([disabled]) 
    background-color: var(--btn-negative-color2);
    color: var(--btn-negative-color1);


.btn-negative.active:hover,
.btn-negative:hover:active:not(.disabled):not([disabled]) 
    background-color: var(--btn-negative-color3);
    color: var(--btn-negative-color1);


.btn-negative:focus,
.btn-outline-negative:focus 
    box-shadow: 0 0 0 .2rem var(--btn-negative-shadow-color);

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
    <div class="alert alert-success">
        <p>Some text...</p>
        <button class="btn btn-success">btn-success</button>
        <button class="btn btn-negative">btn-negative</button>
        <button class="btn btn-outline-success">btn-outline-success</button>
        <button class="btn btn-outline-negative">btn-outline-negative</button>
    </div>
</div>

由于 sn-p 中的 CSS 调用顺序，样式无法正确应用。

欢迎任何使它变得更好的想法！

【参考方案7】：

<a  class="btn btn-secondary" href="#">Find out more</a>



.featured  .btn-secondary 
     font-weight: bold;
     background-color: blue;

只需在 css 中编辑它对我有用