ブートストラップの原色を変更するにはどうすればよいですか？

Question 1

ブランドカラーに合わせてブートストラップの原色を変更することはできますか？私の場合、bootswatchの紙のテーマを使用しています。

Question 2

Bootstrap4の2020を更新

変更するには、プライマリ、または任意ののテーマカラーのブートストラップ4 SASSでは、適切な変数を設定する前にインポートしますbootstrap.scss。これにより、カスタムscssが！default値をオーバーライドできます。

$primary: purple;
$danger: red;

@import "bootstrap";

デモ：https：//codeply.com/go/f5OmhIdre3

場合によっては、別の既存のブートストラップ変数から新しい色を設定したいことがあります。この@importでは、最初に関数と変数をインポートして、カスタマイズで参照できるようにします。

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

デモ：https：//codeply.com/go/lobGxGgfZE

こちらもご覧ください：この回答、この回答、またはボタンの色の変更（CSSまたはSASS）

CSSのみで原色を変更することも可能ですが、-primaryバリエーションが多いため（btn-primary、alert-primary、bg-primary、text-primary、table-primary、border-primaryなど）、多くの追加のCSSが必要です。...）そして、これらのクラスのいくつかは、境界線、ホバー、およびアクティブ状態でわずかな色の変化があります。したがって、CSSを使用する必要がある場合は、プライマリボタンの色を変更するなど、ターゲット1のコンポーネントを使用することをお勧めします。

これらのソリューションはまたのために働くブートストラップ5アルファ

Question 3

あなたが行くことができる2つの方法があります

http://getbootstrap.com/customize/

この調整で色を変更し、カスタマイズされたブートストラップをダウンロードします。

または、このバージョンhttps://github.com/twbs/bootstrap-sassでsassを使用して、sass Assets / stylesheets / _bootstrap.scssにインポートできますが、これをインポートする前に、デフォルトの変数の色を変更できます

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

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

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

結果をコンパイルします

Question 4

私はこのツールを作成しました：https：//lingtalfi.com/bootstrap4-color-generator、最初のフィールドにプライマリを入力し、色を選択して、[生成]をクリックするだけです。

次に、生成されたscssまたはcssコードをコピーし、my-colors.scssまたはmy-colors.css（または任意の名前）という名前のファイルに貼り付けます。

あなたがいったんCSSにSCSSをコンパイルするには、そのCSSファイルを含めることができAFTERブートストラップCSS、あなたが行ってもいいでしょう。

my-colors.scssファイルがすでに作成され、headタグに含まれている場合、その要点を理解すると、プロセス全体に約10秒かかります。

注：このツールを使用して、ブートストラップのデフォルトの色（プライマリ、セカンダリ、危険など）を上書きできますが、必要に応じてカスタムカラー（青、緑、三元など）を作成することもできます。

注2：このツールはブートストラップ4で動作するように作成されています（つまり、現時点では後続のバージョンでは動作しません）。

Question 5

'primay'タグが付いている要素は、@ brand-primaryの色になります。それを変更するオプションの1つは、以下のようなカスタマイズされたcssファイルを追加することです。

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>

スニペットを展開

ブートストラップを使用してカスタマイズされたcssファイルの詳細については、役立つリンクを参照してください：https：//bootstrapbay.com/blog/bootstrap-button-styles/。

Question 6

ブートストラップ4

これは私のために働いたものです：

次の_custom_theme.scss ようなコンテンツで独自のファイルを作成しました。

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

それをファイルの先頭に追加してbootstrap.scss再コンパイルしました（私の場合は！scssというフォルダーにありました）

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Question 7

これは少し古い質問かもしれませんが、ブートストラップをカスタマイズするために私が見つけた最良の方法を共有したいと思います。bootstrap.build https://bootstrap.build/appというオンラインツールがあります。それはうまく機能し、インストールや構築ツールのセットアップは必要ありません！

Question 8

SASSを使用してBootstrap4.xのデフォルトの原色を変更する正しい方法、またはセカンダリ、成功などの他の色。

次のSASSファイルを作成し、示されているようにBootstrapSASSをインポートします。

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";

Question 9

SaSSを使用し
てブランドの色を変更する

$brand-primary:#some-color;

これにより、すべてのUIで原色が変更されます。

css-を使用して、
ボタンの原色を変更するとします。

btn.primary{
  background:#some-color;
}

要素を検索し、新しいファイルに新しいcss / sassルールを追加し、ブートストラップcssをロードした後にそれを添付します。

Question 10

ブートストラップ4のルール

ここでの答えのほとんどは多かれ少なかれ正しいですが、それらのすべてにはいくつかの問題があります（私にとって）。したがって、最後に、専用のブートストラップドキュメント（https://getbootstrap.com/docs/4.0/getting-started/theming/）に記載されているように、グーグルで正しい手順を見つけました。

ブートストラップがにインストールされていると仮定しましょうnode_modules/bootstrap。

A.your_bootstrap.scssファイルを作成します。

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

B.同じフォルダーに_your_variables_theme.scssファイルを作成します。

C._your_variables_theme.scss次のルールに従って、ファイル内のブートストラップ変数をカスタマイズします。

_variables.scss必要に応じてから変数をコピーして貼り付け、値を変更して、！defaultフラグを削除します。変数がすでに割り当てられている場合、Bootstrapのデフォルト値によって再割り当てされることはありません。

同じSassファイル内の変数オーバーライドは、デフォルト変数の前または後に行うことができます。ただし、Sassファイル間でオーバーライドする場合は、BootstrapのSassファイルをインポートする前にオーバーライドする必要があります。

デフォルトの変数はで使用できますnode_modules/bootstrap/scss/variables.scss。

Question 11

ブートストラップ5

ブートストラップ5の場合は、メインのscssファイルに移動して次を追加するだけです。

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

またはあなたがしたいどんな変更も...

そして、直後にブートストラップをインポートすることを忘れないでください。

最終的なmain.scssファイルは次のようになります。

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";

Question 12

これは、Bootstrap v5 alpha3で機能するようです。

_variables-overrides.scss

$primary: #00adef;

$theme-colors: (
  "primary":    $primary,
);

main.scss

// Overrides
@import "variables-overrides";

// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";

// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";

// Helpers
@import "@/node_modules/bootstrap/scss/helpers";

// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";

@import "custom";

Question 13

ブートストラップ4以来のことができます簡単にブートストラップの主要色を変更するにシンプルなCSSファイルダウンロードすることによりBootstrapColor.netを。SASSを知る必要はなく、CSSファイルをWebサイトで使用する準備ができています。ブルー、インディゴ、パープル、ピンク、レッド、オレンジ、イエロー、グリーン、ティール、シアンなど、お好きな色をお選びいただけます。

Question 14

cdnファイルの色を変更することはできません。
ブートストラップファイルをダウンロードします。
bootstrap.cssファイルを検索します。
this（bootstrsap.css）ファイルを開き、「primary」を検索します。
お好みの色に変更してください。

Question 15

これは非常に簡単な解決策です。

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

クラスbg-darkをbg-customに置き換えます。

CSSで

.bg-custom {
  background-color: red;
}

Question 16

はい、.cssファイルを開いてページを調べ、変更するカラーコードを見つけて、[すべて検索]と[置換]（テキストエディターによって異なります）を目的の色に変更することをお勧めします。あなたが変えたいすべての色でそれをしてください