調整導覽列外觀

:::

BootStarp4實做入門

11-1 調整導覽列外觀

若導覽列是深色背景請加 .navbar-dark，若是淺色背景則用 .navbar-light，然後搭配通用類別 .bg-* 就已可以改變導覽列底色，例如：
```
<nav class="navbar navbar-expand-md navbar-dark bg-green p-sm-0 m-sm-0">
```
通用類別可參考：http://bootstrap.hexschool.com/docs/4.0/utilities/colors/

若沒有適合的顏色，亦可自己定義，例如：

.bg-green{
    background-color: #276F6F;
    box-shadow: 0px 3px 8px 0px #000;
}

基本版是這樣：

.bg-green .navbar-nav .nav-link {
    color: rgb(255, 255, 255);
}

完整版請再補上：

.bg-green .navbar-brand,
.bg-green .navbar-text {
    color: rgb(255, 255, 255);
}

若希望移過選項以變色，請再加上：

.bg-green .nav-item.active .nav-link,
.bg-green .nav-item:hover .nav-link {
    color: #F7FE22;
}

修改子選單底色：

.bg-green .dropdown-menu{
    background-color: #2C3232;
}

修改子選單文字連結顏色

.bg-green .dropdown-item{
    color: #FFFFFF;
}

修改子選單文字連結滑過時的底色

.bg-green .dropdown-item:hover{
    background-color: #3C70EF;
}

:::

展開 | 闔起