1. ホーム
  2. colors

[解決済み] Twitter Bootstrap の navbar の色

2022-09-12 15:59:16

質問

Twitter Bootstrap 2.0.2のナビバーの背景色を変更するにはどうすればよいですか? ナビバーのすべての要素の色を変更して、背景色を反映させるにはどうすればよいですか。

どのように解決するのですか?

ブートストラップ・カラーを上書きすることができ、その中には .navbar-inner クラスも含めてブートストラップ・カラーを上書きすることができます。

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

これらのスタイルをすべて独自のものに変更すれば、それが取り込まれます。たとえば、このような例では、グラデーション効果をすべて排除して、黒一色の背景色を設定するだけです。

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

などを活用することができます。 Colorzilla グラデーションエディタ といったツールを活用し、すべてのブラウザに対応した独自のグラデーションカラーを作成し、元の色を自分の色に置き換えることができます。

そして、コメントで述べたように、bootstrap.cssスタイルシートを直接修正することはお勧めしません。なぜなら、スタイルシートが更新されると、すべての変更が失われるからです(現在のバージョンは v2.0.2 である) ので、 bootstrap.css スタイルシートと一緒に、 あなた自身のスタイルシートの中にすべての変更を含めることが望ましいです。しかし、ブラウザ間の一貫性を持つために、適切なプロパティのすべてを上書きすることを忘れないでください。