Bootstrapでbtnの色を変更する方法

Question 1

.btnBootstrapのすべてのプロパティを変更する方法はありますか？以下のものを試しましたが、それでもデフォルトの青色が表示されることがあります（たとえば、マウスをクリックして取り外した後など）。テーマ全体を完全に変更するにはどうすればよいですか？

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Question 2

オーバーライドする必要のあるプロパティを確認する最も簡単な方法は、Bootstrapのソースコード、具体的にはmixins /buttons.lessで.button-variant定義されているミックスインを確認することです。あなたはまだ、すべてのを取り除くために性質のかなり多くをオーバーライドする必要が.btn-primaryスタイリング（例えば:focus、disabled、ドロップダウンなどでの使用）。

より良い方法は次のとおりです。

を使用して独自にカスタマイズしたバージョンのBootstrapを作成します Bootstrapのオンラインカスタマイズツール Bootstrapの
独自のカラークラスを手動で作成します。 .btn-whatever
LESSコンパイラを使用し、.button-variantミックスインを使用して独自のカラークラスを作成します。.btn-whatever

Question 3

ブートストラップのデフォルトのプロパティを上書きする場合は、プロパティを重要なものにする必要があります。

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

これがあなたのために働くことを願っています。

Question 4

ブートストラップ4の2019アップデート

Bootstrap 4がSASSを使用するようになったので、button-variantミックスインを使用してプライマリボタンの色を簡単に変更できます。

$mynewcolor:#77cccc;

.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://codeply.com/go/2bHYxYSC0n（SASSデモ）

このSASSは次のCSSにコンパイルされます...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.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(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    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: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.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(119, 204, 204, 0.5)
}

https://codeply.com/go/lD3tUE01lo（CSSのデモ）

すべてのクラスの原色を変更するには、「ブートストラップCSSテンプレートのカスタマイズ」および「ブートストラップの原色を変更する方法」を参照してください。

Question 5

.btn-primary:focus後でプロパティとコンマを忘れたと思います。variables.less.btn-primary

ファイルでlessを使用し、いくつかの色を再定義することもできます

。これを念頭に置いて、コードは次のようになります。

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

スニペットを展開

Question 6

以下に独自のボタンを作成するだけです。

http://blog.koalite.com/bbg/
boottrap.min.cssの最後にCSSを追加します

乾杯

Question 7

1つのスタイル「.btn-primary：active：focus」を見逃しました。これにより、btnクリック中にデフォルトのブートストラップの色が1秒間表示されます。これは私のコードで機能します：

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Question 8

「btn-success」のようなボタンカラークラスを削除し、「btn-custom」のようなカスタムクラスを配置して、そのクラスのcssを記述します。それは私にとってはうまくいきます。

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Question 9

最も簡単な方法は、以下のとおりです。

1）すべてのボタンの状態を傍受する

2）!important状態を上書きするために追加します

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  border-color: black !important;
}

より実用的なUIの方法は、ボタンのホバー状態を元の状態よりも暗くすることです。

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Question 10

これがホバーを失うことのない私の味です。個人的には、標準のブートストラップ移行よりも気に入っています。

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #8064A2 !important;
}

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

スニペットを展開

Question 11

私は最近同様の問題に遭遇し、クラスを追加することでそれを修正することができました

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

このクラスがinput [type = submit]で使用されている場合は、[disabled]と[disabled]：hoverにも注意してください。このような：

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Question 12

使用すること!importantはあまり賢明な選択肢ではないと思います。特にサイトをレスポンシブにする場合、他の多くの問題を引き起こす可能性があります。だから、私の理解は、これを行うための最良の方法は、.btnブートストラップクラスでカスタムボタンCSSクラスを使用することです。.btnブートストラップボタンの基本スタイルクラスです。したがって、それをレイアウトとして保持し、カスタムcssクラスを使用して他のスタイルを変更できます。ここでもう1つ言及したいことがあります。ボタンから青い輪郭を削除しようとしている人もいます。キーボードを使用するときのアクセシビリティの問題があるため、これは良い考えではありません。outline-color:代わりにを使用して色を変更してください。

Question 13

私のようなSASS / SCSS初心者のために、上記の@ Codeply-erの回答にステップバイステップガイドを追加します。

保存しますbtnCustom.scss。

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

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

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

KoalaなどのSASSコンパイラをダウンロードする上記のSCSSファイルをCSSにコンパイルできるます。
ブートストラップのクローンを作成するコンパイラーはどこかにボタンバリアントミックスインを必要とするためリポジトリのます。
_bootstrap.scss以下のようにファイルを作成して、ブートストラップ関数を明示的にインポートします。これにより、コンパイラはブートストラップ関数と変数にアクセスできるようになります。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

btnCustom.scss以前にダウンロードしたコンパイラをcssにコンパイルします。

Question 14

私はこの答えのOPではありませんが、それは私を助けてくれました：

ホームページのブートストラップカルーセルの次/前のボタンの色を変更したかったのです。

解決策： bootstrap.cssからセレクター名をコピーし、それらを独自のstyle.cssに移動します（独自の設定で..）：

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

スニペットを展開

Question 15

たとえば、構成ファイルでブートストラップテーマを使用してカスタムカラーを追加しvariables.scss、コンパイル時にブートストラップする前にそのファイルをインポートするようにしてください。

$theme-colors: (
    "whatever": #900
);

今、あなたはすることができます .btn-whatever