Bootstrap(Bootstrap-vue)のNavBarの色を変えてみる

3150 ワード
bootstrapVue Bootstrap 初心者向け Bootstrap テキストリンク

Nuxt.jsの練習がてらwebページを作っているのですが、
デザインはbootstrapでなんとかしようと使ってみています。
（いままで全然使ってこなかった....）

Bootstrap-vue の公式リファレンス？からコピペしてみたのですが、
（画像はちょっと要素消したりしてます。）

デフォルトの色を変えたいと思いつつ、どこをいじればいいのかサッパリ...という感じでした。（どこかで「class="blue"」みたいになっているのかと思ってた....）

公式リファレンスをよくよく読んで見ると、普通に下の方に書いてありましたね...。（こちら）



どうやら以下の感じのようです。

  • 文字の色はtypeで指定
  • 背景色はvariantで指定
<!-- 一番上のところ -->
<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>




いくつかイメージ載せておきます。
（バージョンは"bootstrap-vue": "^2.17.3"）

1.type="dark" variant="primary"

2.type="dark" variant="success"

3.type="dark" variant="info"

4.type="dark" variant="warning"

5.type="dark" variant="danger"

6.type="dark" variant="dark"

7.type="light" variant="light"




ちょっとずつBootstrapの使い方に慣れていこうと思います。

参考文献