LoginSignup
30
21

More than 5 years have passed since last update.

Bootstrapのナビゲーションバー(navbar)の背景色を好きな色にする方法とは?

Last updated at Posted at 2018-07-22

やりたいこと

Bootstrap4を使って、navbarの色を好きな色に設定すること。

どうすればいいのか?

こうすればOK!
styleの#以降に好きなカラーコードを指定すればよし!

HTML
<nav class="navbar navbar-dark" style="background-color:#e3f2fd;">
・・・
</nav>

どういう仕組みか?

もともと好きな背景色にこだわらなければこう書けばOK。

HTML
<nav class="navbar navbar-dark bg-dark">
・・・
</nav>

navbar-darkまたはnavbar-lightでnavbar-darkで
「そもそもnavbarって明るめの背景=黒文字っすか?それとも暗めの背景=白文字っすか?」
と指定する。

そしてbg-の部分で背景色を決めている。
(classにbg-
って書くのがbootstrapによってラクできるところっすからね。)

このbg-**を指定せずにstyleを書けばよし!ということっすな。

参考URL
http://cccabinet.jpn.org/bootstrap4/components/navbar#navbar-bg-state

最後に

最後まで読んでいただいてありがとうございました!

実は、ナビゲーションバーの文字色も変えたいんすが、
それはまた後日ということで。
このあたりを解釈すればできるっぽいけど、まだ解釈ができてない。。。
https://torina.top/detail/172/

Twitterでフォローしていただいて応援していただけますと、
もっといろいろ書いていきますー。
https://twitter.com/pocket_ma_kun

30
21
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
21