css - カスタム スタイルをブートストラップ ナビゲーション バーに追加する

Question

Bootstraps のナビゲーション バーを次のようにスタイルする方法を知りたいです。

私は標準の Bootstrap navbar-inner クラスを使用しており、CSS スタイルはほとんどありません。ナビゲーションに影響を与えずに、ナビゲーションバー内に色付きの長方形が必要です。

エフェクトを実現するには、CSS または画像を使用するのが最善でしょうか?

Answer 1

repeat-xあなたが言及したパターンを含むボックス全体に背景画像を使用します。

このようなもの：

.navbar-inner {
    background-image: url(image.png);
    background-repeat: repeat-x;
    background-position: top left;
    padding-top: 10px; /*Height of the image*/
}

次のような画像を使用できます。