web-dev-qa-db-ja.com

bootstrap原色を変更するには？

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

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
49
ashishjmeshram

Bootstrap 4 の2018を更新

primary 、またはBootstrap 4 SASSの themeカラーのいずれかを変更するには、適切な変数を設定しますbeforebootstrap.scssをインポートしています。これにより、カスタムscssが！default値をオーバーライドできます...

$primary: purple;
$danger: red;

@import "bootstrap";

デモ： https://www.codeply.com/go/f5OmhIdre

場合によっては、別のexisting Bootstrap変数から新しい色を設定することもできます。この@importでは、関数と変数を最初にインポートして、カスタマイズで参照できるようにします...

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

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

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

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

この回答もご覧ください 、または （CSSまたはSASS）でボタンの色を変更する

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

43
Zim

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

http://getbootstrap.com/customize/

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

または、このバージョンでsassを使用することができます https://github.com/twbs/bootstrap-sass をsass asset/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;

結果をコンパイルします

19
Jorge Luis Saud Rosal

このツールを作成しました： https://lingtalfi.com/bootstrap4-color-generator 、最初のフィールドにprimaryを入力し、色を選択して[生成]をクリックします。

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

このファイルをbootstrap cssの後に含めると、準備完了です。

my-colors.scssファイルがすでに作成されており、頭部に含まれている場合、プロセス全体の要点を取得するには約10秒かかります鬼ごっこ。

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

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

6
ling

「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/ .

5
N. Osil

SASSを使用したBootstrap 4.xのデフォルトのプライマリカラー、またはセカンダリ、成功などのその他のカラーを変更する正しい方法。

次のSASSファイルを作成し、指示に従ってBootstrap SASSをインポートします。

// (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";
2
Alvin Konda

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

1
Rami Alloush

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

$brand-primary:#some-color;

これにより、すべてのUIでプライマリカラーが変更されます。

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

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

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

1
manish kumar