XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

### 一、加底色，加陰影

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;
    }
    ```

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D957

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器