5

htmlで：

<div class="navbar navbar-default">

variable.less ファイル内:

@navbar-default-bg: #f8f8f8;

この 16 進数の色を他の色 (青など) に変更すると、下端の色だけが青に変わることに気付くでしょう。クラス navbar にも背景があるため、@navbar-default-bg 色をブロックします。

サンプル：

1.HTMLで：

<div class="navbar navbar-default">

variable.less で:

@navbar-default-bg: 青;

出力:ここに画像の説明を入力

2.HTMLで：

<div class="navbar navbar-default">

variable.less で:

@navbar-default-bg: 青;

custom.css で:

.navbar{背景: 青}

出力:ここに画像の説明を入力

カスタムcssファイルを作成して配置.navbar{background: blue}すると、ナビゲーションバーの色が希望の色に変わることを知っています。

しかし、私はより少ないファイルを編集することを好みます。それを行う方法はありますか？ これが重複した質問だと思う前に、まず自分の側で試してみてください!

4

2 に答える 2

3

デフォルトの bootstrap-theme.css および bootstrap-theme.min.css ファイルをプロジェクトから削除してみてください。これらはメインの bootstrap.css ファイルのスタイルの一部を上書きすると思われます。

于 2013-10-31T12:17:41.477 に答える
1

あなたの質問はまだ重複していると思います。上記の結論は正しくないと思います。@navbar-default-bg: blue;(in variables.less) を設定し、css (Bootstrap) を再構築します。<div class="navbar navbar-default">次のような青いナビゲーションバーが表示されます。

ここに画像の説明を入力

クラスは背景色を設定せず、.navbarnavbar-default クラスの背景色にも影響しません。

現時点では、navbar のスタイルを設定するために、常に .navbar (navbar-default、navbar-inverse、navbar-custom など) クラスに 2 つ目のクラスを追加する必要があります。参照: https://github.com/twbs/bootstrap/issues/10332

ブートストラップを設定@navbar-default-bg: blue;して再コンパイルすると、.navbar-default の css は次のようになります。

.navbar-default {
  background-color: #0000ff;
  border-color: #0000de;
}

.navbar-default .navbar-brand {
  color: #777777;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}

.navbar-default .navbar-text {
  color: #777777;
}

.navbar-default .navbar-nav > li > a {
  color: #777777;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333333;
  background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #cccccc;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: #dddddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #dddddd;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #cccccc;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #0000de;
}

.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
  border-top-color: #333333;
  border-bottom-color: #333333;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555555;
  background-color: #0000de;
}

.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
  border-top-color: #555555;
  border-bottom-color: #555555;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #777777;
  border-bottom-color: #777777;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555555;
    background-color: #0000de;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
  }
}

.navbar-default .navbar-link {
  color: #777777;
}

.navbar-default .navbar-link:hover {
  color: #333333;
}

blueに設定されます#0000FF;

于 2013-09-19T19:53:11.717 に答える