Bootstrap で LESS-color とナビゲーション バーをカスタマイズする (推奨)

高洛峰
リリース: 2016-12-06 11:00:44
オリジナル
1532 人が閲覧しました

テーマカラー

variables.lessファイルの先頭に、グレーとブランドカラーのデフォルトの変数とその値が表示されます

@gray-darker: lighten(#000,13.5%); //#222
@gray-dark
ログイン後にコピー

完全なグレースケール空間をカバーするためにそれらを直接置き換えることができます。 need

@gray-darker: #222;
@gray-dark: #454545;
@gray: #777;
@gray-light: #aeaeae;
@gray-lighter: #ccc
@gray-lightest: #ededed
@offwhite: #fafafa;
ログイン後にコピー

ブランドの色を黄金色に変更します:

@brand-primary: #c1ba62;
ログイン後にコピー

ナビゲーション バーの色変数

variables.less の次の値を変更します:

@navbar-height: 64px;
@navbar-margin-bottom: 0; // was @line-height-computed
...
@navbar-default-color: @gray;
@navbar-default-bg: #fff;
@navbar-default-border: @gray-light; // darken(@navbar-default-bg, 9.5%);
...
// Navbar links
@navbar-default-link-color: @navbar-default-color;
@navbar-default-link-hover-color: @link-hover-color;
@navbar-default-link-hover-bg: @off-white;
@navbar-default-link-active-color: @link-hover-color;
@navbar-default-link-active-bg: @gray-lightest;
@navbar-default-link-disabled-color: @gray-lighter;
@navbar-default-link-disabled-bg: transparent;
ログイン後にコピー

関連するナビゲーションバーに新機能が表示されます。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート