:::

2. 進階自適應排版技術

一、關於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為基礎(取代 tablefloats…),因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
  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建立navfooter等,需要底色滿版的區域(多一層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. 利用間隔的通用類別mhttps://bootstrap.hexschool.com/docs/4.2/utilities/spacing/)讓表單可以上下(my)空出2個距離單位。

  9. 利用輸入群組(https://bootstrap.hexschool.com/docs/4.2/components/input-group/)讓輸入框和送出按鈕可以結合成一體。

    1. 輸入框需搭配.form-controlhttps://bootstrap.hexschool.com/docs/4.2/components/forms/

    2. 送出鈕則需搭配.btnhttps://bootstrap.hexschool.com/docs/4.2/components/buttons/

    3. 文字部份可改為Fontawesome圖示(https://fontawesome.com/v4.7.0/icons/

九、建立導覽列部份

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

  2. 解壓後將其中的cssjs目錄移至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 用來指定該元素的堆疊位置,值越大的,位置會越高(可遮住較低的元素)

 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

15人線上 (8人在瀏覽線上書籍)

會員: 0

訪客: 15

更多…