web-dev-qa-db-ja.com

変更方法bootstrapバージョン4のボタンの色

bootstrap v4でテーマの色を変更することで、プライマリボタンの色を変更できます。ただし、他のすべてのコンポーネントにも影響します。テーマの色に影響を与えずにプライマリボタンの色を設定するにはどうすればよいですか？ブランドプライマリーを設定してそれを達成したいと考えています。他の選択肢はありますか？

csstwitter-bootstrapsassbootstrap-4
19
Janier

2019 Bootstrap 4.1 +の更新

Bootstrap 4はSASSを使用するので、_button-variant_ mixinsを使用してボタンの色のみを簡単に変更できます 。変更するのは主ボタンの色だけで、主テーマの色全体ではないため、SASSで_button-variant_ミックスインを使用する必要があります。_$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-primary{color:#fff;background-color:teal;border-color:#005a5a}

.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#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-toggle{color:#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:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color: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-toggle{color:#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:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
_

https://www.codeply.com/go/l9UGO7J6V1 （CSSデモ）

allコンテキストクラス（bg-primary、alert-primaryなど）のプライマリカラーを変更するには、以下を参照してください。 Customizing Bootstrap = CSSテンプレート および bootstrap原色を変更する方法？

以下も参照してください：
https://stackoverflow.com/a/50973207/171456
ブートストラップのテーマを設定する方法

40
Zim

この方法を試してください

classをbuttonに追加します。ここではcustom-btnとし、そのCSSをstylesheetに記述します。

.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>
10
Athul

カスタム色を追加したり、sassファイル（Bootstrap 4）の変数を使用して色を変更することにより、色を再定義したりできます。

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

色に同じキーを使用する場合は、ブートストラップを再定義します。それ以外の場合は、新しいキーを使用して新しいクラスを作成します。

この例では青から赤の原色を設定しています。

8
vml

bootstrap documentation のとおり

Bootstrapのコンポーネントの多くは、基本修飾子クラスのアプローチで構築されています。つまり、スタイルの大部分は基本クラス（たとえば、.btn）に含まれ、スタイルのバリエーションは修飾子クラス（たとえば、.btn-danger）に限定されます。これらの修飾子クラスは$ theme-colorsマップから構築され、修飾子クラスの数と名前をカスタマイズします。

したがって、テーマの色を変更すると、すべてに影響します。

他の場所でもその色を使用したい場合は、おそらく $ theme-colors 変数に色を追加する必要があります。

5
Dhaval

同様の問題がありました。ボタンをコンテナの色に一致させたいのですが。

そこで、ページの読み込み時に親の色に自動的に適応する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>

スニペットのCSS呼び出し順序が原因で、スタイルは正しく適用されません。

それを改善するためのアイデアは大歓迎です！

2
Jean-Marc Zimmer

カスタム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;
}
1
Mauro Barrionuevo