Bootstrap (Bootstrap-vue)의 NavBar 색상을 변경해보십시오.

Nuxt.js의 연습이 웹 페이지를 만들고 있지만,
디자인은 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의 사용법에 익숙해 가고 싶습니다.

참고문헌