線上書籍

Home

[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

    <!-- 標題區 --> <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，以便設定滿版底色）

    <!-- 導覽列 --> <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建立中間區域

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

     

四、比較常用的組合挑選器
  1. 同時：div, p：同時套用到任何的<div>以及<p>
  2. 後代：div p：套用到<div>中的所有<p>
  3. 子層：div>p：僅套用到<div>裡面第一層的<p>
  4. 僅隔壁：div+p：僅套用到和<div>同一層並緊接著的<p>
  5. 隔壁任何一個div~p：套用到和<div>同一層的任一個<p>
  6. 可以自己試試：

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

     

五、補完各種外連檔案
  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下 <link rel="stylesheet" href="css/style.css">

     

六、建立標題部份

  1. 先建構網站基本樣式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; }

     

  2. 可至http://www.uugai.com/ 建立簡單的Logo，並存至images/logo.png，最後在標題區插入該logo圖片。

  3. 圖片可加入連結至 /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加上動畫效果

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

  2. 加上該套件CSS

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

     

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

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

     

八、建立搜尋區

  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：參數不會顯示在網址上，無長度限制，故多用於一般表單。

      <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）

  7. 可利用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>

     

  8. 利用間隔的通用類別m（https://bootstrap.hexschool.com/docs/4.2/utilities/spacing/）讓表單可以上下（my）空出2個距離單位。

  9. 利用輸入群組（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/）

九、建立導覽列部份

  1. 先至官網 https://github.com/vinnymoreira/stellarnav/ 下載套件

  2. 解壓後將其中的css、js目錄移至my_theme底下（可直接覆蓋）

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

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

     

  4. 導覽列貼至<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>

     

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

  6. 在</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>

     

  7. 接著利用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 用來指定該元素的堆疊位置，值越大的，位置會越高（可遮住較低的元素）