ホーリーのプログラミング日記

ホーリーのプログラミング日記

エキセントリック・スーパーアプリクリエイター。プログラミング歴4年。独学。リリース本数:約30本。総ダウンロード数:25万

【Bootstrap】nav-pillsの色を変更する

 

自分用のメモでございます。

 

Bootstrapのnav-pillsってやつを使って、ナビゲーションメニューを配置してるんですが、これの色を変えるのに若干手間取ってしまいました。

具体的にはクリックしたとき、つまりactiveになったときのカラーリングですね。

 

f:id:gevvoihorry:20190724184844p:plain

(一番下に5個並んでるマークがナビゲーションメニュー)

 

しかし、この記事を見て解決。

css - bootstrap 4 change color of nav-pill active - Stack Overflow

 

<ul class="nav nav-pills">

  <li class="nav-item pill-1">

    <a class="nav-link active" href="#">pill one</a>

  </li>

  <li class="nav-item pill-2">

    <a class="nav-link" href="#">pill two</a>

  </li>

  <li class="nav-item pill-3">

    <a class="nav-link" href="#">pill three</a>

  </li>

</ul>

 

HTMLがこんな感じだったとすれば。

 

.pill-1 a {

    background-color: pink;

    color: yellow;

}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {

    color: #fff;

    background-color: green;

}

 

CSSをこんな風に書いちゃう。

 

すると結果はこう。

 

f:id:gevvoihorry:20190724185021p:plain

 

むーん、とりあえずOK。

ここまで分かれば、もうnav-pillsのカラーリングに悩むことはないでしょう。