8

Lessまたはcssを使用してTwitterのBootstrap 3でナビゲーションバーのスタイルを変更するには? navbar-defaultおよびnavbar-inverseクラスによって提供されるさまざまなスタイルを使用します。

4

1 に答える 1

10

ボタンやパネルと同様に、ナビゲーション バーには 2 つのクラスがあります ( https://github.com/twbs/bootstrap/issues/10332を参照)。最初のクラス ( .navbar) は構造を設定します。2 番目のクラスはスタイリングを設定します。デフォルトでは、スタイリング用に と の 2 つのクラスがあり.navbar-defaultます.navbar-inverse。navbar のスタイルを変更するには、これらのスタイリング クラスのスタイルを変更する必要があります。これを行う最善の方法は、Less を使用して Bootstrap を再コンパイルすることです。

Less の使用

.navbar-defaultおよびの変数は.navbar-inverse、variables.less で設定され、navbar.less によって使用されます。カスタム navbar スタイルを定義するには、変数を変更する.navbar-defaultか.navbar-inverse、このクラスを再利用します。元のコードを変更したくない場合。customnavbar.less ファイルを作成し (これを bootstrap.less にインポートすることを忘れないでください)、.navbar-defaultnavbar.less からこのファイルにパーツをコピーします。変数の名前を変更して設定します。ここを参照してください: Twitter ブートストラップ 3.0 navbar クラスの背景色を以下で変更して、背景を青に設定します。

CSS の使用

のように css を定義します.navbar-default。スタイルを変更するには。背景<nav class"navbar navbar-custom">を青色に設定します。

.navbar-custom { background-color: #0000FF;}

その他のスタイルと簡単なスタイリングについては、http ://twitterbootstrap3navbars.w3masters.nl/ を参照してください。

于 2013-09-22T13:06:08.880 に答える