Tad 教材網 - 線上書籍

:::

\[1092\] 前端技術入門
===============

### 一、關於BootStrap4

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

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

1. 利用`.container>header.row>.col-sm-9+.col-sm-3`建立header
 
 
 ```markup
 
 <div class="container">
 <header class="row">
 <div class="col-sm-9">標題區</div>
 <div class="col-sm-3">搜尋區</div>
 </header>
 </div>
 ```
2. 利用`#nav>.container>.row>nav.col`建立nav、footer等，需要底色滿版的區域（多一層div包著container，以便設定滿版底色）
 
 
 ```markup
 
 <div id="nav">
 <div class="container">
 <div class="row">
 <nav class="col">導覽列</nav>
 </div>
 </div>
 </div>
 ```
3. 利用`.container>.row>aside.col-xl+article.col-xl-7+aside.col-xl`建立中間區域
 
 
 ```markup
 
 <div class="container">
 <div class="row">
 <aside class="col-xl">左區域</aside>
 <article class="col-xl-7">中間區域</article>
 <aside class="col-xl">右區域</aside>
 </div>
 </div>
 ```
 
 <dl> </dl>### 四、比較常用的組合挑選器

1. 同時：div, p：同時套用到任何的<div>以及<p>
2. 後代：div p：套用到<div>中的所有<p>
3. 子層：div>p：僅套用到<div>裡面第一層的<p>
4. 僅隔壁：div+p：僅套用到和<div>同一層並緊接著的
5. 隔壁任何一個div~p：套用到和<div>同一層的任一個
6. 可以自己試試：<div class="row two-col"><div class="col-sm-6 span6 coln-1">HTML部份
 
 
 
 ```markup
 <div>
 A
 B
 </div>
 
 <div>
 C
 <section>
 D
 E
 </section>
 
 F
 </div>
 
 G
 H
 ```
 
 </div><div class="col-sm-6 span6 coln-2">CSS部份
 
 
 
 ```css
 div,p {
 border: 1px solid green;
 padding: 4px;
 text-align: center;
 }
 
 div {
 color: blue;
 width: 40px;
 }
 
 p {
 color: red;
 width: 30px;
 }
 
 ```
 
 </div> </div>
 
### 五、補完各種外連檔案

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

1. 先建構網站基本樣式`css/style.css`部份，設定樣式讓畫面可以看出來基本架構
 
 
 ```css
 body {
 background: #F5F4E9;
 }
 
 #nav {
 background: #A5BB8F;
 }
 
 aside{
 background: #DADEC5;
 min-height: 450px;
 }
 
 article{
 min-height: 450px;
 }
 
 #footer {
 background: #A5BB8F;
 min-height: 150px;
 }
 ```
2. 可至<http://www.uugai.com/> 建立簡單的Logo，並存至`images/logo.png`，最後在標題區插入該logo圖片。
3. 圖片可加入連結至` /index.php`（即網站首頁），另可用`.img-fluid`讓圖片也有自適應功能 [https://bootstrap.hexschool.com/docs/4.2/content/images/](https://bootstrap.hexschool.com/docs/4.2/content/images/)
 
 
 ```markup
 <a href="/index.php">
 <img src="images/logo.png" alt="Logo圖" class="img-fluid">
 </a>
 ```
 
 <dl> </dl>### 七、替Logo加上動畫效果

1. 官網：[https://animate.style](https://animate.style)（點擊右邊就有各種效果示範）
2. 加上該套件CSS
 
 
 ```markup
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
 ```
3. 在logo圖上套用喜歡的效果（`.animate__animated.效果名稱`），如：
 
 
 ```markup
 <img src="images/logo.png" alt="Logo圖" class="img-fluid animate__animated animate__lightSpeedInRight">
 ```
 
 <dl> </dl>### 八、建立搜尋區

1. HTML的表單一律放在`<form></form>`中。
2. <http://www.w3big.com/zh-TW/html/html-forms.html>
3. `action`屬性設定表單的內容要送至哪裡？（XOOPS的搜尋檔案為`/search.php`）
4. `method`則是傳送方法（預設為`get`，但`post`其實較常用）
 
 
 1. `get`：參數值會出現在網址列上，可存為書籤，故多用於搜尋情境，有內容長度限制（約3000字）。
 2. `post`：參數不會顯示在網址上，無長度限制，故多用於一般表單。
 
 
 ```markup
 <form action="/search.php">
 <input type="text" name="query" placeholder="請輸入關鍵字">
 <input type="hidden" name="action" value="results">
 <button type="submit">搜尋</button>
 </form>
 ```
5. `<input>`則為表單的輸入元件之一，利用`type`可以產生不同輸入框。其`name`送出後，在PHP中會成為變數名稱；`value`則為表單元件值； `placeholder`則為佔位字元，在未輸入值之前，會出現在元件中，做為提示用。
6. `<button>`按鈕當`type`屬性值為`submit`時，就有送出表單的能力，等同`<input type="subimt">`但比它更為彈性。（[http://www.w3big.com/zh-TW/tags/tag-button.html](http://www.w3big.com/zh-TW/tags/tag-button.html)）
7. 可利用BootStrap4美化表單
 
 
 ```markup
 <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">
 
 </button>
 </div>
 </div>
 </form>
 ```
8. 利用間隔的通用類別`m`（[https://bootstrap.hexschool.com/docs/4.2/utilities/spacing/](https://bootstrap.hexschool.com/docs/4.2/utilities/spacing/)）讓表單可以上下（`my`）空出2個距離單位。
9. 利用輸入群組（[https://bootstrap.hexschool.com/docs/4.2/components/input-](https://bootstrap.hexschool.com/docs/4.2/components/input-group/)[group/](https://bootstrap.hexschool.com/docs/4.2/components/input-group/)）讓輸入框和送出按鈕可以結合成一體。
 
 
 1. 輸入框需搭配`.form-control`（[https://bootstrap.hexschool.com/docs/4.2/components/forms/](https://bootstrap.hexschool.com/docs/4.2/components/forms/)）
 2. 送出鈕則需搭配`.btn`（[https://bootstrap.hexschool.com/docs/4.2/](https://bootstrap.hexschool.com/docs/4.2/components/buttons/)[components/](https://bootstrap.hexschool.com/docs/4.2/components/buttons/)[buttons/](https://bootstrap.hexschool.com/docs/4.2/components/buttons/)）
 3. 文字部份可改為Fontawesome圖示（[https://fontawesome.com/v4.7.0/icons/](https://fontawesome.com/v4.7.0/icons/)）
 
### 九、建立導覽列部份

1. 先至官網 <https://github.com/vinnymoreira/stellarnav/> 下載套件
2. 解壓後將其中的`css`、`js`目錄移至`my_theme`底下（可直接覆蓋）
3. 將以下語法貼到引入 css/style.css 之前
 
 
 ```markup
 <link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.min.css">
 ```
4. 導覽列貼至`<nav>`中
 
 
 ```markup
 <div class="stellarnav">
 <ul>
 <li><a href="#">Item1</a></li>
 <li><a href="#">Item2</a></li>
 <li><a href="#">Item3</a></li>
 </ul>
 </div>
 ```
5. 其中`ul>li` 就是完整的一層選項，若要在Item2 下多加一層，只要在<a href="#">Item2</a>後面再插入一組`ul>li` 即可。
6. 在`</body>`前貼上執行該導覽列語法
 
 
 ```markup
 <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>
 ```
7. 接著利用css來調整導覽列外觀
 
 
 ```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);
 }
 
 ```
8. `z-index` 用來指定該元素的堆疊位置，值越大的，位置會越高（可遮住較低的元素）
 
 
=

</body>

:::