css - Twitter の Bootstrap CSS の色を変更するにはどうすればよいですか?

Question

私は今日まであまり使用していません。

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

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

次に、より少ないファイルに準拠しました。それはすべて出てきましたが、すべてがまだ青でした。

そこで、js.less ルートを試してみました。まだ青い。

Answer 1

これが写真から機能するブートストラップテーマジェネレーターです。「古い」ウェブサイトの写真を撮ってここにアップロードするだけで、古い配色に一致するテーマが生成されます。

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

http://www.lavishbootstrap.com/

もちろん、Bootstrap自体を使用すると、今すぐダウンロードするときに色をカスタマイズできますが、これには、配色の切り取りと貼り付けがたくさん含まれます。上記のツールを使用すると、すべてがわかります。

http://getbootstrap.com/customize/

Answer 2

Bootstrap Generatorが便利な場合があります。色などを選択して、コンパイルされたBoostrapCSSファイルを生成できます。

Answer 3

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からブートストラップを使用するのは初めてですが、これが状況のようです。

Answer 4

これは＃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;
 }

Answer 5

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

@linkColor: @orange;

Answer 6

@orangeこのように、変数を色に設定しましたか

@orange: #FF2400;