2. 進階自適應排版技術

一、關於BootStrap4

官網：http://getbootstrap.com/
手冊：https://bootstrap.hexschool.com/docs/4.2/
Fontawesome4 圖示：https://fontawesome.com/v4.7.0/icons/
Fontawesome5圖示：https://fontawesome.com/icons?d=gallery
BootStrap都是用class來套用樣式
BootStrap4的網格系統以 flexbox為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位、自動平均欄位、垂直置中等以往很難做的功能。
對 IE9（以下）不再支援，至少要用IE10才行。
BootStrap把畫面分成12等份，為網格之基礎，必須在容器（.container）中才有作用
1. 一個頁面中可以有多個容器。
2. 容器也可以巢狀使用（容器中還有容器）
3. .container 是寬度有上限的容器，.container-fluid是全螢幕容器
4. 容器中用.row來產生一個橫列，並用.col來指定欄位
5. .row中的.col總和需為12，若超過12，會自動往下移
建立一個新的theme.html，並用!bcdn來產生基本頁面
在body中執行：「.container>.row>.col-sm-4*3」，可產生三欄式畫面
https://bootstrap.hexschool.com/docs/4.2/layout/overview/

二、斷點

當螢幕寬度符合其指定大小時，就執行指定之格線系統，否則就變成單欄
1. sm >= 576px（手機）
2. md >= 768px（平板）
3. lg >= 992px（桌機）
4. xl >= 1200px
.col-sm-3，意思就是當螢幕 >= 576px 時，就會將此區域的寬度設為螢幕的 3/12
可以使用多重斷點，例如：.col-sm-2 .col-md-3 .col-lg-4
.col表示自動平分，.col-auto表示會根據內容大小來自動調整寬度

三、生成版面基本結構

利用.container>header.row>.col-sm-9+.col-sm-3建立header

<!-- 標題區 -->
<div class="container">
    <header class="row">
        <div class="col-sm-9">標題區</div>
        <div class="col-sm-3">搜尋區</div>
    </header>
</div>

利用#nav>.container>.row>nav.col建立nav、footer等，需要底色滿版的區域（多一層div包著container，以便設定滿版底色）

<!-- 導覽列 -->
<div id="nav">
    <div class="container">
        <div class="row">
            <nav class="col">導覽列</nav>
        </div>
    </div>
</div>

利用.container>.row>aside.col-xl+article.col-xl-7+aside.col-xl建立中間區域

<!-- 主要顯示區 -->
<div class="container">
    <div class="row">
        <aside class="col-xl">左區域</aside>
        <article class="col-xl-7">中間區域</article>
        <aside class="col-xl">右區域</aside>
    </div>
</div>

四、比較常用的組合挑選器

同時：div, p：同時套用到任何的<div>以及<p>
後代：div p：套用到<div>中的所有<p>
子層：div>p：僅套用到<div>裡面第一層的<p>
僅隔壁：div+p：僅套用到和<div>同一層並緊接著的<p>
隔壁任何一個div~p：套用到和<div>同一層的任一個<p>

可以自己試試：

HTML部份


<div>
    A
    <p>B</p>
</div>

<div>
    C
    <section>
        D
        <p>E</p>
    </section>

    <p>F</p>
</div>

<p>G</p>
<p>H</p>

CSS部份


div,p {
  border: 1px solid green;
  padding: 4px;
  text-align: center;
}

div {
  color: blue;
  width: 40px;
}

p {
  color: red;
  width: 30px;
}

五、補完各種外連檔案

https://cdnjs.com/ 是一個可以引入各種套件的CDN（內容傳遞）網站
bootstrap請改為當下最新的4.5.2版
font-awesome目前最新為5.14.0，但4.7.0更為常用
jquery請改為當下最新的3.5.1並使用 jquery.min.js（原本的jquery.slim.min.js 為精簡版，少了蠻多東西，不建議使用）
popper請改為當下最新的2.4.4版
就後就是修正原本style.css的路徑，將之改放到css下
```
<link rel="stylesheet" href="css/style.css">
```

六、建立標題部份

先建構網站基本樣式css/style.css部份，設定樣式讓畫面可以看出來基本架構

body {
    background: #F5F4E9;
}

#nav {
    background: #A5BB8F;
}

aside{
    background: #DADEC5;
    min-height: 450px;
}

article{
    min-height: 450px;
}

#footer {
    background: #A5BB8F;
    min-height: 150px;
}

可至http://www.uugai.com/ 建立簡單的Logo，並存至images/logo.png，最後在標題區插入該logo圖片。
圖片可加入連結至 /index.php（即網站首頁），另可用.img-fluid讓圖片也有自適應功能 https://bootstrap.hexschool.com/docs/4.2/content/images/
```
<a href="/index.php">
    <img src="images/logo.png" alt="Logo圖" class="img-fluid">
</a>
```

七、替Logo加上動畫效果

官網：https://animate.style（點擊右邊就有各種效果示範）

加上該套件CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

在logo圖上套用喜歡的效果（.animate__animated.效果名稱），如：

<img src="images/logo.png" alt="Logo圖" class="img-fluid animate__animated animate__lightSpeedInRight">

八、建立搜尋區

HTML的表單一律放在<form></form>中。
http://www.w3big.com/zh-TW/html/html-forms.html
action屬性設定表單的內容要送至哪裡？（XOOPS的搜尋檔案為/search.php）
method則是傳送方法（預設為get，但post其實較常用）
1. get：參數值會出現在網址列上，可存為書籤，故多用於搜尋情境，有內容長度限制（約3000字）。
2. post：參數不會顯示在網址上，無長度限制，故多用於一般表單。
```
<form action="/search.php">
    <input type="text" name="query" placeholder="請輸入關鍵字">
    <input type="hidden" name="action" value="results">
    <button type="submit">搜尋</button>
</form>
```
<input>則為表單的輸入元件之一，利用type可以產生不同輸入框。其name送出後，在PHP中會成為變數名稱；value則為表單元件值； placeholder則為佔位字元，在未輸入值之前，會出現在元件中，做為提示用。
<button>按鈕當type屬性值為submit時，就有送出表單的能力，等同<input type="subimt">但比它更為彈性。（http://www.w3big.com/zh-TW/tags/tag-button.html）

可利用BootStrap4美化表單

<form action="/search.php" class="my-2">
    <div class="input-group">
        <input type="text" name="query" class="form-control" placeholder="請輸入關鍵字">
        <input type="hidden" name="action" value="results">
        <div class="input-group-append">
            <button class="btn btn-primary" type="submit">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>
</form>

利用間隔的通用類別m（https://bootstrap.hexschool.com/docs/4.2/utilities/spacing/）讓表單可以上下（my）空出2個距離單位。
利用輸入群組（https://bootstrap.hexschool.com/docs/4.2/components/input-group/）讓輸入框和送出按鈕可以結合成一體。
1. 輸入框需搭配.form-control（https://bootstrap.hexschool.com/docs/4.2/components/forms/）
2. 送出鈕則需搭配.btn（https://bootstrap.hexschool.com/docs/4.2/components/buttons/）
3. 文字部份可改為Fontawesome圖示（https://fontawesome.com/v4.7.0/icons/）

九、建立導覽列部份

先至官網 https://github.com/vinnymoreira/stellarnav/ 下載套件
解壓後將其中的css、js目錄移至my_theme底下（可直接覆蓋）

將以下語法貼到引入 css/style.css 之前

<link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.min.css">

導覽列貼至<nav>中

<div class="stellarnav">
     <ul>
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
     </ul>
</div>

其中ul>li 就是完整的一層選項，若要在Item2 下多加一層，只要在<a href="#">Item2</a>後面再插入一組ul>li 即可。

在</body>前貼上執行該導覽列語法

<script type="text/javascript" src="js/stellarnav.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        jQuery('.stellarnav').stellarNav({
            menuLabel: '選單',
            position: 'left',
            scrollbarFix: true
        });
    });
</script>

接著利用css來調整導覽列外觀

/* 讓導覽列靠左 */
.stellarnav ul {
    text-align: left;
}

/* 設定選項的文字顏色*/
.stellarnav li a {
    color: #3c583d;
}

/* 選項滑過時顏色 */
.stellarnav a:hover {
    color: #BBCCA8;
    background: #3c583d;
}

/* 第二層選項的背景、框線及陰影設定 */
.stellarnav ul ul {
    background: #fdfdf9;
    border: 1px solid #A5BB8F;
    box-shadow: 1px 1px 4px rgb(48, 49, 48, 0.8);
}

/* 手機模式下，預設導覽列外觀 */
.stellarnav.mobile ul {
    background: rgba(165, 187, 143, 0.9);
    box-shadow: none;
    z-index: 10;
}

/* 手機模式下，第二層子選項外觀 */
.stellarnav.mobile ul ul {
    background: rgba(185, 207, 163, 0.9);
}

/* 手機模式下，第三層子選項外觀 */
.stellarnav.mobile ul ul ul {
    background: rgba(205, 227, 183, 0.9);
}