web-dev-qa-db-ja.com

TwitterのBootstrap CSSの色をどのように変更しますか？

今日はこれまであまり使っていません。

Preboot.lessの色を次のように変更しました。

// Color Scheme
@baseColor:         @orange;                  // Set a base color

次に、より少ないファイルをコンパイルしました。それはすべて出ましたが、すべてはまだ青でした。

だから私はjs.lessルートを試しました。まだ青。

csslesstwitter-bootstrap
17
speg

bootstrapテーマジェネレーターは写真から機能します。..だから、「古い」ウェブサイトの写真を撮ってここにアップロードすれば、それに一致するテーマが生成されますあなたの古い配色！

注：このサイトは現在オフラインのようです。それでもこの機能が必要な場合は、 サイトをGithubリポジトリからインストールできます で、そこから試してください。

http://www.lavishbootstrap.com/

そしてもちろんBootstrapそれ自体は、今すぐダウンロードするときに色をカスタマイズすることができますが、それは多くの配色の切り取りと貼り付けを含みます... ...

http://getbootstrap.com/customize/

11
Brad Parks

Bootstrap Generator が便利な場合があります。色などを選択して、コンパイル済みのBoostrap CSSファイルを生成できます。

4
Phil Gyford

2.0-wipバージョンを使用している場合は、これが問題です。

.primaryクラスは、ボタンのグラデーションを作成するために@blueおよび@blueDark変数を使用します。これらの変数は、variables.lessファイルに設定されます。

Buttons.lessファイルでは、他のボタンクラスは16進値でハードコードされています。

// Danger and error appear as red
  &.danger {
    .gradientBar(#ee5f5b, #c43c35);
  }
  // Success appears as green
  &.success {
    .gradientBar(#62c462, #57a957);
  }
  // Info appears as a neutral blue
  &.info {
    .gradientBar(#5bc0de, #339bb9);
  }

これらの16進値を変更するか、16進値を置き換える変数を作成する必要があります。私はTwitterからbootstrapを自分で使用するのは初めてですが、これは状況のようです。

2
wuliwong

リンクの色と.btn-primary（これは質問が参照していたと思います）をカスタマイズするには、@ linkColorを調整します。

@linkColor: @orange;
0
Josh W Lewis

これは＃01a4d9カラーbtn用です

.btn {
    border-color:#c5c5c5;
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
 }

.btn-primary {
    color:#ffffff;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color:#007cc5;
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9),  to(#0193c5));
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5);
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5);
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0);
    border-color:#0193c5 #0193c5 #003479;
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] {
    color:#ffffff;
    background-color:#0193c5;
    *background-color:#0049ac;
 }

.btn-primary:active,.btn-primary.active {
    background-color:#003f92 \9;
 }
0
goldyorchita

@orange変数から色へ

@orange: #FF2400;

0
Jason Gennaro