11-1 調整導覽列外觀

一、加底色，加陰影

1. 若導覽列是深色背景請加 .navbar-dark，若是淺色背景則用 .navbar-light，然後搭配通用類別 .bg-* 就已可以改變導覽列底色，例如：

   <nav class="navbar navbar-expand-md navbar-dark bg-green p-sm-0 m-sm-0">

2. 通用類別可參考：http://bootstrap.hexschool.com/docs/4.0/utilities/colors/
3. 若沒有適合的顏色，亦可自己定義，例如：

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

4. CSS的底色設定：http://css.doyoe.com/properties/background/background-color.htm
5. CSS的陰影設定：http://css.doyoe.com/properties/border/box-shadow.htm

二、修改選項顏色

1. CSS的前景顏色設定：http://css.doyoe.com/properties/color/color.htm
2. 基本版是這樣：

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

3. 完整版請再補上：

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

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

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

三、修改子選項外觀

1. 修改子選單底色：

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

2. 修改子選單文字連結顏色

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

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

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