search
LoginSignup
21
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

やりたいこと

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

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
What you can do with signing up
21
Help us understand the problem. What are the problem?