30
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?