ホームページ > 記事 > ウェブフロントエンド > Bootstrapのレスポンシブナビゲーションバーcomponent_html/css_WEB-ITnose
Bootstrapのレスポンシブナビゲーションバーcomponent_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:231379ブラウズ
レスポンシブ ナビゲーション バー: PC およびタブレットではデフォルトですべてのコンテンツが表示されますが、携帯電話ではデフォルトでナビゲーション バーには「ロゴ/ブランド」と「メニュー折りたたみ展開ボタン」のみが表示されます。クリックすると折りたたまれます。 ボタンを押すと、すべてのメニュー項目が表示されます。
基本クラス: .navbar
1. Bootstrap のナビゲーション バーの位置:
1) 上部のナビゲーション バー
2) 下部のナビゲーション バー
Bootstrap のナビゲーション バーの色:
1 ) 明るい背景 暗い言葉.navbar-default
2) 暗い背景と明るい言葉.navbar-inverse
Bootstrapにおけるナビゲーションバーの位置:
1) 相対的な配置位置: 相対的なデフォルト値
2) 固定の配置位置: 修正 .navbar-fixed-top/bottom
2. ナビゲーション バーの構造: