BootStarp4實做入門

1. 準備開發工具

一、安裝

  1. 本次研習用 Visual Studio Code 來進行開發  https://code.visualstudio.com/Download
  2. https://nodejs.org/en/
  3. 請下載適合的版本來安裝使用。

二、安裝擴充套件

  1. 以下是建議安裝的套件：
    • AutoFileName : 讓編輯器自動完成圖片或檔案路徑。
    • Auto Rename Tag : 讓成對的標籤自動一起修改。
    • Auto Close Tag : 讓標籤自動閉合的。
    • Bootstrap 4 & Font awesome snippets : 插入 snippets 的工具，插入 Bootstrap 4 或 Font awesome 圖示。
      • 輸入b4 或fa 即可挑選想用的程式片段
    • stylefmt：美化CSS
    • Preview on Web Server : 將編輯的頁面直接在側邊或預設瀏覽器中預覽
      • Ctrl+Shift+P：在編輯器中開出預覽視窗
      • Ctrl+Shift+L：在預設瀏覽器預覽

三、設定

  1. 點擊左下左齒輪，按下「設定」
  2. 可將左邊系統預設的設定項目，貼到右邊區域中變成自訂項目，並調整設定值，如： 
    {
    "workbench.colorTheme": "Monokai",
    // 控制字型大小 (以像素為單位)。
    "editor.fontSize": 18,
    //  - 'bounded' (當檢視區縮至最小並設定 'editor.wordWrapColumn' 時換行).
    "editor.wordWrap": "on",
    // 控制編輯器是否應自動設定貼上的內容格式。格式器必須可供使用，而且格式器應該能夠設定文件中一個範圍的格式。
    "editor.formatOnPaste": true,
    // 使用滑鼠滾輪並按住 Ctrl 時，縮放編輯器的字型
    "editor.mouseWheelZoom": true,
    // 在儲存時設定檔案格式。格式器必須處於可用狀態、檔案不得自動儲存，且編輯器不得關機。
    "editor.formatOnSave": true,
}

四、常用快捷鍵

  1. Ctrl+N：建立新檔
  2. Ctrl+C：複製
  3. Ctrl+V：貼上
  4. Ctrl+F：搜尋
  5. Ctrl+Shift+F：跨檔搜尋
  6. Ctrl+H：取代
  7. Ctrl+/：註解
  8. Ctrl+`：開終端機
  9. Ctrl+B：關閉左側工具
  10. Ctrl+X：刪除目前行
  11. Ctrl+G：跳至某行
  12. Ctrl+end：跳至文件結尾
  13. Ctrl+Z：回上個動作（復原）
  14. Ctrl+Y：回下個動作（再做）
  15. shift+alt+F：美化（格式化）語法
  16. shift+alt+滑鼠左鍵：區塊標記
  17. 完整快捷鍵整理：https://poychang.github.io/vscode/

BootStarp4實做入門

2. 相關資源網站

一、BootStrap相關資源

  1. BootStrap4官網：https://getbootstrap.com/
  2. 正體中文手冊：http://bootstrap.hexschool.com/docs/4.0/getting-started/introduction/
  3. 簡體中文手冊：http://wiki.jikexueyuan.com/project/bootstrap4/getting-started/introduction/
  4. BootStrap4簡介：https://www.slideshare.net/chihchengwang3/bootstrap4

二、相關軟體網站

  1.  Visual Studio Code 編輯器：https://code.visualstudio.com/Download

三、相關素材網站

  1. Fontawesome圖示：http://fontawesome.io/

四、相關套件網站

  1. jquery：https://jquery.com/
  2. popper.js ：https://popper.js.org/

五、相關資源網站

  1. CSS參考手冊：http://css.doyoe.com/

BootStarp4實做入門

3. 製作基本頁面

  1. 建立一個專案目錄，例如：bs4
  2. 先下載最新版 bootstrap4：http://bootstrap.hexschool.com/docs/4.0/getting-started/download/
  3. 下載後，解壓縮到專案目錄中，會得到 js 及 css 兩個資料夾。
  4. 由於BootStrap4拿掉了圖示，所以，我們可以直接到 http://fontawesome.io/ 下載，解壓後，將 fonts 及 css 複製到 bs4 裡面。
  5. 接著下載 jquery：https://jquery.com/download/，並存入 js 資料夾中
  6. 最後下載popper.js ：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js，存入 js 資料夾中
  7. 建立新檔 index.html，內容如下： 
    <!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/my.css">
</head>

<body>
    <h1>Hello, world!</h1>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>
  8. width=device-width ：表示寬度是設備螢幕的寬度
  9. initial-scale=1：表示初始的縮放比例， 可以讓網頁的寬度自動適應手機螢幕的寬度
  10. 但蘋果在iOS9更新中更改了initial-scale 的用途，故使用shrink-to-fit=no 來替代，以讓網頁的寬度自動適應手機螢幕的寬度
  11. 其中的 css/my.css 是用來放置自己定義的CSS 內容，例如想要讓頁面改用微軟正黑體，只要在裡面加入字型設定即可： 
    body{
  font-family: '微軟正黑體';
}
  12. 下方的JS引入順序請勿隨意調整。
  13. 詳情：http://bootstrap.hexschool.com/docs/4.0/getting-started/introduction/

BootStarp4實做入門

4. CSS基本概念

一、關於CSS

  1. 由於BooStrap是一套CSS框架，故簡單了解CSS用法是必要的。
  2. CSS，英語：Cascading Style Sheets，簡稱CSS，中文通常稱為層疊樣式表或串接樣式表
  3. CSS可用來替網頁上的各種元件設定其外觀。
  4. 一般HTML負責搭建網頁的文件結構，而透過CSS來美化其外觀。

二、使用方法

  1. 基本概念：挑選網頁中的元件，套上指定樣式。
  2. 一組CSS宣告的組成為「挑選器 {樣式屬性 : 值;}」，如： 
    body {
  font-family: '微軟正黑體';
}
  3. 若有多個宣告，請用「;」隔開。
  4. CSS樣式屬性以及可用的值可從這裡查詢： http://css.doyoe.com
  5. 套用樣式的三種方法：

     

    行內樣式

    內部樣式

    外部樣式

    影響範圍

    最小

    單一頁中

    許多頁

    優先權

    最高

     

     

    用法

    <HTML標籤 style="CSS宣告;">

    <style type="text/css">

    CSS宣告;

    </style>

    <link href="CSS檔.css" rel="stylesheet">
  6. 一個頁面可以同時套用好幾個css檔或設定，若裡面有挑選器重複的，則以最後讀到的為主。
  7. 在CSS檔中，還可以用import來引入其他的CSS檔：如：@import url("block.css");

三、CSS的三種挑選器

  1. 標籤挑選器：即一般網頁標籤。如：body、h1、div、p...等，只要是該標籤都會受影響。
    • (1) 樣式表：p {CSS屬性: 值;}
    • (2) 網頁：<p></p>
  2. ID挑選器：樣式表以「#名稱」宣告，網頁則需使用id屬性，id不可重複，如：
    • (1) 樣式表：#home{CSS屬性: 值;}
    • (2) 網頁：<div id="home"></div>
  3. 類別挑選器：樣式表以「.名稱」宣告，網頁則需使用class屬性，class可以重複，且可以同時設定好幾個，如：
    • (1) 樣式表：.row{CSS屬性: 值;}
    • (2) 網頁：<div class="row"></div>
  4. 基本上，BootStrap就是一堆類別挑選器的組合

BootStarp4實做入門

5. 容器應用

一、容器基本概念

  1. 凡是要用 BootStrap 的網格系統來排版，一定要使用容器（container）。
  2. 一個頁面中可以有多個容器。
  3. 容器也可以巢狀使用（容器中還有容器）
  4. 容器有兩種，一種是寬度有上限的容器： 
    <div class="container">
  ...
</div>

  5. 另一種是全螢幕容器：

    <div class="container-fluid">
  ...
</div>

  6. 沒加容器之前。網頁內容會緊貼著邊緣，加上之後，預設就有邊距出現。

  7. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/overview/#%E5%AE%B9%E5%99%A8

二、容器應用：滿版底色+有限寬度

  1. 在 .container 之外多一層 <div> 並設想要的底色或底圖即可。 
    <div style="background-color: #185252;">
    <div class="container">
    </div>
</div>

     

BootStarp4實做入門

6. 網格系統

一、使用網格的注意事項

  1. BootStrap4的網格系統以 flexbox（CSS3）為基礎（取代 table、floats…），因此可以做到自動等寬等高的欄位 、自動平均欄位、垂直置中等以往很難做的功能。
  2. 同時也代表對 IE9（以下）不再支援，至少要用IE10才行。
  3. 網格系統必須在容器（.container）中才有作用

二、指定欄寬用法

  1. 一般使用範例： 
    <div class="container">
    <div class="row">
        <div class="col-sm-3">側邊三欄</div>
        <div class="col-sm-9">右邊九欄</div>
    </div>
</div>

  2. .row 代表一個橫列，以確保裡面的欄位可以對齊、排序。

  3. .col-sm 式斷點前綴詞，後面接的是欄位寬度設定，預設滿版為12欄

  4. 若超過12欄，則會自動新增一個 .row

三、自動等寬用法

  1. 在 BootStrap4 中也可以這樣使用等寬欄位：

    <div class="container">
    <div class="row">
        <div class="col">col 等寬 1/5</div>
        <div class="col">col 等寬 2/5</div>
        <div class="col">col 等寬 3/5</div>
        <div class="col">col 等寬 4/5</div>
        <div class="col">col 等寬 5/5</div>
    </div>
    <div class="row">
        <div class="col-sm">col-sm 等寬 1/5</div>
        <div class="col-sm">col-sm 等寬 2/5</div>
        <div class="col-sm">col-sm 等寬 3/5</div>
        <div class="col-sm">col-sm 等寬 4/5</div>
        <div class="col-sm">col-sm 等寬 5/5</div>
    </div>
</div>

  2. 上方的用法就是不管螢幕多大，都要分成五欄

  3. 下方的用法是當螢幕在 576 以上時，才分五欄，在 576 以下的時候，會自動調成單欄式。

小技巧：
輸入 .row>.col-sm*5 然後按 tab 鍵，可以快速產生以上語法

四、指定欄寬+自動欄寬

  1. 可以指定某幾欄的欄寬，其餘的自行自動平均 
    <div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-7">指定佔 7 欄</div>
        <div class="col-sm">自動平均分配</div>
    </div>
</div>

五、根據內容多寡自動調整欄寬

  1. 若不確定該站多少欄寬，亦可讓電腦自行根據內容多寡來判斷： 
    <div class="container">
    <div class="row">
        <div class="col-sm">自動平均分配</div>
        <div class="col-sm-auto">根據中間內容多多寡來判斷欄寬</div>
        <div class="col-sm">自動平均分配</div>
    </div>
</div>

六、不同斷點的欄寬搭配

  1. 可以在同一個欄位根據不同斷點給予不同大小 
    <div class="container">
    <div class="row">
        <div class="col">自動平均分配</div>
        <div class="col-sm-6 col-md-7 col-lg-8">根據不同螢幕大小來指定中間欄位欄寬</div>
        <div class="col">自動平均分配</div>
    </div>
</div>
  2. 如果是只有用col，那麼，任何裝置都會按照 col 設定來分欄位（不管螢幕多大多小）
  3. 可以同時用多個斷點，例如：col-sm-4 col-md-3，意思就是用手機看時，該區域寬度佔4欄，用平板看時，該區域寬度佔3欄。
  4. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/

 

BootStarp4實做入門

6-1 斷點

一、什麼是斷點？

  1. 先來聽一首歌....就會明白？
  2. 還是不明白吧！（廢話）所謂斷點，在這裡指的是當螢幕尺寸符合斷點範圍時，才會根據斷點設定來實施網格系統（例如左邊9欄，右邊3欄），若是不符合斷點範圍，則自動調整為一欄式（通常是在手機瀏覽的情況下）。
  3. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/overview/#%E9%9F%BF%E6%87%89%E5%BC%8F%E6%96%B7%E9%BB%9E

二、BootStrap4 的斷點

sm >= 576 px

md >= 768 px

lg >= 992 px

xl >= 1200 px

  1. 如果寫：.col-sm-3，意思就是當螢幕 >= 576px 時，就會將此區域的寬度設為螢幕的 3/12。
  2. 若同時寫：col-sm-4 col-md-3。意思就是當螢幕 >= 768 px時，就會將此區域的寬度設為螢幕的 3/12，若螢幕 < 768 但 >= 576px 時，就會將此區域的寬度設為螢幕的 4/12。

BootStarp4實做入門

6-2 BootStrap3 及 BootStrap4 的斷點比較

  1. BootStrap4 的斷點前綴詞範圍和BootStrap3 不同：
    • 最小斷點改為 575px，
    • 又多了一個 col-xl 前綴詞，
    • 並將 col-xs 改為 col-，
    • 此外，BootStrap3 一定要設寬度，例如 col-sm-3、col-sm-9，但在 BootStrap4 允許不設寬度，例如四組 col-sm 時，每個欄位會自動調為 25%，因此，可以輕鬆做到五欄、七欄、八欄...等效果。
  2. 斷點差異比較表：
      575 px 以下 576 ~ 767 px 768 ~ 991 px 992 ~ 1199 px 1200 px 以上
    BootStrap3 前綴 col-xs col-sm col-md col-lg
    BootStrap4 前綴 col- col-sm col-md col-lg col-xl
    對應裝置 any 手機 平板 桌機螢幕 大螢幕


    3.  

BootStarp4實做入門

6-3 欄位排序

  1. 最常見的例子是三欄式畫面（左側邊+主內容+右側邊），在手機觀看，變成單欄式時，希望變成：（主內容→左側邊→右側邊）的順序。
  2. 利用 .order 就能調整： 
    <div class="container">
  <div class="row">
    <div class="col-sm-7 order-sm-2">
      在中間的主內容區
    </div>
    <div class="col-sm order-sm-1">
      在左邊的側邊欄
    </div>
    <div class="col-sm order-sm-3">
      在右邊的側邊欄
    </div>
  </div>
</div>

  3. 寫的時候，請依照在單欄式情況下，希望呈現的先後順序來寫，然後再利用 order 來調整位置。在三欄式時（未自適應前），就會按照 order 的順序來排，在單欄式時，就會忽略 order，依照語法順序來排。

  4. 範例：

    See the Pen 欄位排序 by Tad (@tad0616) on CodePen.

     

BootStarp4實做入門

6-4 欄位推移

  1. BootStrap4 裡面已經沒辦法用 .col-offset-x 或者 .offset-sm-x 來跳過幾欄。
  2. 可以利用 .mr-auto 來將右邊剩下的空位謄出來。 
    <div class="container">
    <div class="row">
        <div class="col-2">col 等寬 1/3</div>
        <div class="col-2 mr-auto">col 等寬 2/3</div>
        <div class="col-2">col 等寬 3/3</div>
    </div>ass="col-2">col 等寬 3/3</div>
    </div>
</div>
  3. 或者用 .mx-auto 把空位平均分散到左右兩邊 
    <div class="container">
    <div class="row">
        <div class="col-2">col 等寬 1/3</div>
        <div class="col-2 mx-auto">col 等寬 2/3</div>
        <div class="col-2">col 等寬 3/3</div>
    </div>
</div>
  4. 或用 .ml-auto 把空位放到左邊 
    <div class="container">
    <div class="row">
        <div class="col-2">col 等寬 1/3</div>
        <div class="col-2 ml-auto">col 等寬 2/3</div>
        <div class="col-2">col 等寬 3/3</div>
    </div>
</div>
  5. 範例：

    See the Pen 欄位推移 by Tad (@tad0616) on CodePen.

BootStarp4實做入門

6-5 巢狀欄位

  1. .row 裡面還可以有 .row，子 .row 會以父 .row 的寬度為依據來進行寬度調整
  2. 例如： 
    <div class="container">
  <div class="row">
    <div class="col-sm-8">
      主內容
      <div class="row">
        <div class="col-sm-3">欄</div>
        <div class="col-sm-6">欄</div> 
        <div class="col-sm-3">欄</div> 
      </div>
    </div>    
    <div class="col-sm-4">
      側邊
      <div class="row">
        <div class="col-sm-3">欄</div>
        <div class="col-sm-6">欄</div> 
        <div class="col-sm-3">欄</div> 
      </div>
    </div>
  </div>
</div>

     

  3. 範例：

    See the Pen 巢狀（套嵌） by Tad (@tad0616) on CodePen.

BootStarp4實做入門

6-6 Flexbox方向性

  1. 水平：.flex-row（這是預設值）
  2. 反向水平：.flex-row-reverse
  3. 垂直：.flex-column
  4. 反向垂直：.flex-column-reverse
  5. 範例：

    See the Pen flex方向性 by Tad (@tad0616) on CodePen.

BootStarp4實做入門

7. 間隔工具

  1. 間隔工具的組成為「屬性邊緣-尺寸」
  2. 屬性設定:
    • m - 這個 class 會設定 margin
    • p - 這個 class 會設定 padding
  3. 邊緣設定:
    • t - 這個 class 會設定 margin-top 或 padding-top
    • b - 這個 class 會設定 margin-bottom 或 padding-bottom
    • l - 這個 class 會設定 margin-left 或 padding-left
    • r - 這個 class 會設定 margin-right 或 padding-right
    • x - 這個 class 會設定 *-left 和 *-right
    • y - 這個 class 會設定 *-top 和 *-bottom
    • 空白 - 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣
  4. 尺寸設定:
    • 0 - 這個 class 會設定 margin 或 padding 的樣式值為 0
    • 1 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
    • 2 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
    • 3 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
    • 4 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
    • 5 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
  5. 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/spacing/

BootStarp4實做入門

8. 按鈕

一、BootStrap4 按鈕

  1. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/buttons/
  2. 按鈕可用在 <button> 、<input type="button"> 及 <a> 上
  3. 用法如下： 
    <button class="btn btn-primary btn-block">主按鈕</button>

二、新增自定義按鈕

  1. 自行定義按鈕工具：http://blog.koalite.com/bbg/
  2. 定義出來的按鈕可以放在 css/my.css 中
  3. 若希望底色是透明的，可以在產生後，自行將背景顏色取代為 transparent

三、製作圖示按鈕

  1. 請連至 http://fontawesome.io/icons/ 搜尋需要的圖示
  2. 複製該圖示語法到檔案中即可，進階的圖示用法可參考：http://fontawesome.io/examples/ 
    <a href="#" class="btn btn-tools">
    <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>
    <div>站內搜尋</div>
</a>
  3. 若欲調整按鈕字形大小或其他屬性，可以自行在 css/my.css 中加入 CSS 宣告 
    .btn-tools div { 
  font-size: 12px;
  margin-top: 4px;
}

     

BootStarp4實做入門

9. 套用不同的呈現方式

一、套用display方法

  1. 練習素材 
    <a href="#"><span>考生</span></a>
<a href="#"><span>新生</span></a>
<a href="#"><span>學生</span></a>
<a href="#"><span>教師</span></a>
<a href="#"><span>職員</span></a>
<a href="#"><span>家長</span></a>
<a href="#"><span>訪客</span></a>
<a href="#"><span>畢業生及校友</span></a>
  2. display 可以改變元件的呈現方式，以下是 BootStrap4 支援的：
    • .d-none
    • .d-inline
    • .d-inline-block
    • .d-block
    • .d-table
    • .d-table-cell
    • .d-flex
    • .d-inline-flex
  3. flexbox 可以讓我們簡單靈活的進行排版。
  4. 但並不是所有元件的呈現方式都改成了 flexbox
  5. 若想讓元件套用Flexbox，可以用 .d-flex 的方式來套用（display: flex 之意）。
  6. 若想使用行內的flexbox，可以用 .d-inline-flex
  7. 不管是 .d-flex 或.d-inline-flex 均可套用斷點，例如：.d-sm-flex 或 .d-sm-inline-flex
  8. 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/display/

二、在大螢幕換行呈現，在手機不斷行的作法

  1. 由於手機呈現時，會用單欄式呈現，故一些選項無須斷行。
  2. 視斷點換行的方式，display 預設為 inline，但符合 lg 斷點時，改變 display為 block： 
    <div class="col-sm">
    <a href="#" class="btn-tools"><span>考生</span></a>
    <a href="#" class="btn-tools"><span>新生</span></a>
    <a href="#" class="btn-tools"><span>學生</span></a>
    <a href="#" class="btn-tools"><span>教師</span></a>
    <a href="#" class="btn-tools"><span>職員</span></a>
    <div class="d-inline d-lg-block"></div>
    <a href="#" class="btn-tools"><span>家長</span></a>
    <a href="#" class="btn-tools"><span>訪客</span></a>
    <a href="#" class="btn-tools"><span>畢業生及校友</span>
    </a>
</div>

     

BootStarp4實做入門

10. 容器垂直對齊

  1. 全部垂直靠上對齊 .align-items-start 
    <div class="container">
    <div class="row align-items-start">
        <div class="col">col 等寬 1/3</div>
        <div class="col">col 等寬 2/3</div>
        <div class="col">col 等寬 3/3</div>
    </div>
</div>

  2. 全部垂直置中對齊 .align-items-center

    <div class="container">
    <div class="row align-items-center">
        <div class="col">col 等寬 1/3</div>
        <div class="col">col 等寬 2/3</div>
        <div class="col">col 等寬 3/3</div>
    </div>
</div>

  3. 全部垂直靠下對齊 .align-items-end

    <div class="container">
    <div class="row align-items-end">
        <div class="col">col 等寬 1/3</div>
        <div class="col">col 等寬 2/3</div>
        <div class="col">col 等寬 3/3</div>
    </div>
</div>
  4. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/#%E5%9E%82%E7%9B%B4%E5%B0%8D%E9%BD%8A
  5. 範例：

    See the Pen 全部垂直對齊 by Tad (@tad0616) on CodePen.

BootStarp4實做入門

10-1 個別項目的垂直對齊

  1. 請寫在各個<div>中即可： 
    <div class="container">
    <div class="row">
        <div class="col align-self-start">垂直靠上</div>
        <div class="col align-self-center">垂直置中</div>
        <div class="col align-self-end">垂直靠下</div>
    </div>
</div>
  2. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/#%E5%9E%82%E7%9B%B4%E5%B0%8D%E9%BD%8A
  3. 範例：

    See the Pen 個別項目的垂直對齊 by Tad (@tad0616) on CodePen.

BootStarp4實做入門

10-2 水平對齊

  1. 靠左對齊 .justify-content-start 
    <div class="container">
    <div class="row justify-content-start">
        <div class="col-2">col 1/3</div>
        <div class="col-2">col 2/3</div>
        <div class="col-2">col 3/3</div>
    </div>
</div>
  2. 置中對齊 .justify-content-center 
    <div class="container">
    <div class="row justify-content-center">
        <div class="col-2">col 1/3</div>
        <div class="col-2">col 2/3</div>
        <div class="col-2">col 3/3</div>
    </div>
</div>
  3. 靠右對齊 .justify-content-end 
    <div class="container">
    <div class="row justify-content-end">
        <div class="col-2">col 1/3</div>
        <div class="col-2">col 2/3</div>
        <div class="col-2">col 3/3</div>
    </div>
</div>
  4. 分散對齊（含左右） .justify-content-around 
    <div class="container">
    <div class="row justify-content-around">
        <div class="col-2">col 1/3</div>
        <div class="col-2">col 2/3</div>
        <div class="col-2">col 3/3</div>
    </div>
</div>
  5. 分散對齊（不含左右） .justify-content-between 
    <div class="container">
    <div class="row justify-content-between">
        <div class="col-2">col 1/3</div>
        <div class="col-2">col 2/3</div>
        <div class="col-2">col 3/3</div>
    </div>
</div>
  6. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/#%E6%B0%B4%E5%B9%B3%E5%B0%8D%E9%BD%8A
  7. 範例：

    See the Pen 水平對齊 by Tad (@tad0616) on CodePen.

BootStarp4實做入門

10-3 內容的對齊

  1. 之前講的都是<div>容器本身的對齊，這裡講的是<div>裡面內容的對齊。
  2. 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/text/
  3. 讓logo圖靠右用 .text-right： 
    <div class="col-sm text-right"><img src="images/logo.png" alt="logo"></div>

  4. 讓中間按鈕置中用 .text-center：

    <div class="col-sm-auto text-center">按鈕語法</div>

  5. 要注意的是，這種對齊僅對行內元件（inline）有效，如果內容是區塊元件（block），如 <div>，那就要用別的方式。

BootStarp4實做入門

11. 導覽列

  1. BootStrap4 有內建導覽列：http://bootstrap.hexschool.com/docs/4.0/components/navbar/
  2. 直接照著下面的架構做即可： 
    <nav class="navbar navbar-expand-md">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <!--此處加入選項-->

        </ul>
    </div>
</nav>

  3. .navbar-expand-md 是指在 md 範圍以上才會直接展開選項

  4. <button>中的data-target="#navbarSupportedContent" 必須對應下方<div>中的id="navbarSupportedContent"

  5. 目前就只能一層，要多層的話，須改用其他的導覽列工具。
  6. 若想加入一個不含子選單的選項，可用： 
    <li class="nav-item">
    <a class="nav-link" href="#">選項</a>
</li>

  7. 若想加入一個有含子選單的選項，可用（注意 id 必須每個選項不一樣）：

    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
    <div class="dropdown-menu" aria-labelledby="navbar1">
        <a class="dropdown-item" href="#">子選項1</a>
        <a class="dropdown-item" href="#">子選項2</a>
    </div>
</li>

  8. 我們可以在<nav>中加入 p-sm-0 m-sm-0 讓導覽列在電腦螢幕上看起來瘦一點。

    <nav class="navbar navbar-expand-md  p-sm-0 m-sm-0">
  9. 讓導覽列的選項置中，利用 .mx-auto 即可（即 margin-left: auto; margin-right: auto; 之意）： 
    <ul class="navbar-nav mx-auto">

     

 

 

BootStarp4實做入門

11-1 調整導覽列外觀

一、加底色，加陰影

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

     

BootStarp4實做入門

11-2 導覽列選項

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">認識本校</a>
    <div class="dropdown-menu" aria-labelledby="navbar1">
        <a class="dropdown-item" href="#">創辦人</a>
        <a class="dropdown-item" href="#">現任校長</a>
        <a class="dropdown-item" href="#">學校簡史</a>
        <a class="dropdown-item" href="#">教育理念</a>
        <a class="dropdown-item" href="#">聆聽校歌</a>
        <a class="dropdown-item" href="#">校徽釋義</a>
        <a class="dropdown-item" href="#">校園景觀</a>
        <a class="dropdown-item" href="#">聯絡及交通</a>
        <a class="dropdown-item" href="#">校園配置圖</a>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">招生資訊</a>
    <div class="dropdown-menu" aria-labelledby="navbar2">
        <a class="dropdown-item" href="#">本國學生招生</a>
        <a class="dropdown-item" href="#">　五加二護理專班招生專區</a>
        <a class="dropdown-item" href="#">　五專入學招生專區</a>
        <a class="dropdown-item" href="#">　四技入學招生專區</a>
        <a class="dropdown-item" href="#">　二技入學招生專區</a>
        <a class="dropdown-item" href="#">　轉學生招生專區</a>
        <a class="dropdown-item" href="#">　研究所招生</a>
        <a class="dropdown-item" href="#">　進修部招生</a>
        <a class="dropdown-item" href="#">　進修學院招生</a>
        <a class="dropdown-item" href="#">境外生招生專區</a>
        <a class="dropdown-item" href="#">　外國生招生專區</a>
        <a class="dropdown-item" href="#">　僑生及港澳生招生專區</a>
        <a class="dropdown-item" href="#">　陸生招生專區</a>
        <a class="dropdown-item" href="#">本校招生入學網路報名系統</a>
        <a class="dropdown-item" href="#">獎助學金專區</a>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">校務資訊</a>
    <div class="dropdown-menu" aria-labelledby="navbar3">
        <a class="dropdown-item" href="#">校務資訊系統</a>
        <a class="dropdown-item" href="#">Google Apps信箱</a>
        <a class="dropdown-item" href="#">教職員Webmail（新版）</a>
        <a class="dropdown-item" href="#">教職員Webmail（舊版）</a>
        <a class="dropdown-item" href="#">e-Portfolio(新版)</a>
        <a class="dropdown-item" href="#">e-Portfolio(舊版)</a>
        <a class="dropdown-item" href="#">e-Learning網路學園</a>
        <a class="dropdown-item" href="#">電算中心服務系統</a>
        <a class="dropdown-item" href="#">本校行動app下載</a>
        <a class="dropdown-item" href="#">慈濟儲存雲</a>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">學生資訊</a>
    <div class="dropdown-menu" aria-labelledby="navbar4">
        <a class="dropdown-item" href="#">學生資訊系統</a>
        <a class="dropdown-item" href="#">Google Apps信箱</a>
        <a class="dropdown-item" href="#">e-Portfolio(新版)</a>
        <a class="dropdown-item" href="#">e-Portfolio(舊版)</a>
        <a class="dropdown-item" href="#">e-Learning網路學園</a>
        <a class="dropdown-item" href="#">電算中心服務系統</a>
        <a class="dropdown-item" href="#">選課系統</a>
        <a class="dropdown-item" href="#">本校行動APP下載</a>
        <a class="dropdown-item" href="#">軟硬體資訊服務</a>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">行政單位</a>
    <div class="dropdown-menu" aria-labelledby="navbar5">
        <a class="dropdown-item" href="#">校長室</a>
        <a class="dropdown-item" href="#">秘書室</a>
        <a class="dropdown-item" href="#">教務處</a>
        <a class="dropdown-item" href="#">學務處</a>
        <a class="dropdown-item" href="#">總務處</a>
        <a class="dropdown-item" href="#">研究發展處</a>
        <a class="dropdown-item" href="#">電子計算機中心</a>
        <a class="dropdown-item" href="#">圖書館</a>
        <a class="dropdown-item" href="#">進修推廣部</a>
        <a class="dropdown-item" href="#">人事室</a>
        <a class="dropdown-item" href="#">人文室</a>
        <a class="dropdown-item" href="#">會計室</a>
        <a class="dropdown-item" href="#">國際暨兩岸教育資源中心</a>
        <a class="dropdown-item" href="#">教師發展暨教學資源中心</a>
    </div>
</li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbar6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">教學單位</a>
    <div class="dropdown-menu" aria-labelledby="navbar6">
        <a class="dropdown-item" href="#">護理學院</a>
        <a class="dropdown-item" href="#">　護理系</a>
        <a class="dropdown-item" href="#">　長期照護研究所</a>
        <a class="dropdown-item" href="#">　醫學影像暨放射科學系</a>
        <a class="dropdown-item" href="#">　放射醫學科學研究所</a>
        <a class="dropdown-item" href="#">健康科技管理學院</a>
        <a class="dropdown-item" href="#">　醫務暨健康管理系</a>
        <a class="dropdown-item" href="#">　行銷與流通管理系</a>
        <a class="dropdown-item" href="#">　資訊科技與管理系</a>
        <a class="dropdown-item" href="#">全人教育中心(通識中心)</a>
        <a class="dropdown-item" href="#">附設進修學院</a>
    </div>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">推廣教育</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">圖書資訊</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">研究發展</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">海外交流</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">辦學成果</a>
</li>

 

BootStarp4實做入門

12. 讓HTML可以被引入

  1. 如果開始覺得HTML檔太大，想要做適當的切割引入，那麼，可以試試此單元作法。
  2. 這個功能基本上無關BootStrap
  3. 請在 <head> 中加入： 
    <script src="https://www.w3schools.com/lib/w3.js"></script>

  4. 或者將該檔案下載，存入js目錄下，並引入之亦可：

    <script src="js/w3.js"></script>

  5. 接著在</body>之前加入

    <!-- Optional JavaScript -->
<script>
    w3.includeHTML();
</script>

  6. 這樣就完成基本步驟了！

  7. 將整個 <ul class="navbar-nav m-auto"> 剪下，建立一個 nav.html 檔並貼入剛剛剪下的內容，並儲存。

  8. 在原來的位置貼入以下語法即可引入 nav.html

    <div w3-include-html="nav.html"></div>

  9. 原本 .m-auto 在 <ul>中，請將之移到 <div> 中，以便讓引入的區塊可以置中。

    <div w3-include-html="nav.html" class="m-auto"></div>

     

BootStarp4實做入門

13. 檢查手機用畫面

一、調整單欄內容的對齊方向

  1. 如果是用 FireFox，可以點擊 Ctrl+Shift+M 開啟自適應模式。
  2. 當畫面變成小螢幕時，會自動調整成單欄式，此時，若沿用多欄時的對齊方向，畫面看起來就會很詭異。
  3. 例如小螢幕時，logo會靠右邊，顯得奇怪，因此，可以改成「大螢幕時靠右，小螢幕時置中」，換成語法便是： 
    <div class="col-sm text-center text-sm-right"><img src="images/logo.png" alt="logo"></div>

  4. .text-center 定義沒事就置中，.text-sm-right則是定義當螢幕大於 576px 時，就把 logo 靠右之意。

  5. 右邊的連結也可以比照辦理：

     <div class="col-sm text-center text-lg-left">一堆連結</div>

二、調整按鈕間距

  1. 小螢幕時，可能會導致圖形按鈕變兩行，此時，可以利用間隔工具做自適應調整。 
    <a href="#" class="btn btn-tools m-1 mx-sm-2 p-0">
    <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>
    <div>站內搜尋</div>
</a>

  2. .p-0 就是不要有內距（padding）

  3. .m-1 就是平時都設邊距1個空格單位

  4. .mx-sm-2 則是當螢幕大於 576px 時，邊距設為左右2個空格單位。

三、讓文字不換行

  1. 由於最右邊是一堆連結，當畫面變小時，空間變小，可能會導致連結文字被壓縮，變成一大串，為了避免這種狀況，可以利用 .text-nowrap 設定為文字不換行 
    <div class="col-sm text-center text-lg-left text-nowrap">一堆連結</div>

     

 

BootStarp4實做入門

14. 佔位圖片

  1. 佔位圖片是開發時用來取代圖片用的工具
  2. 英文版：http://holderjs.com/
  3. 中文版：http://docs.mydaima.com/holder/
  4. 安裝方式，下載解壓，將holder.min.js放到js目錄下
  5. 在引入jquery之後加入以下語法即可： 
    <script src="js/holder.min.js"></script>

     

BootStarp4實做入門

15. 輪播（滑動圖）

一、輪播基本語法

  1. 基本語法： 
    <div id="carousel-bs4" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-bs4" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-bs4" data-slide-to="1"></li>
        <li data-target="#carousel-bs4" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            滑動內容1
        </div>
        <div class="carousel-item">
            滑動內容2
        </div>
        <div class="carousel-item">
            滑動內容3
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-bs4" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-bs4" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>

  2. 滑動內容可以放任何東西，例如用媒體物件來做就蠻方便的。

  3. 上方的<ol>是用來製作下方的指示器，拿掉亦可。

  4. 下方的兩個<a>是用來做左右控制項，不用也行。

  5. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/carousel/

二、多一組輪播內容

  1. 若要多一組輪播內容，上方的<ol>就要多一組<li>：

    <li data-target="#carousel-bs4" data-slide-to="3"></li>

  2. 中間的 <div> 就要多一組對應設定：

    <div class="carousel-item"> 
    滑動內容4 
</div>

三、快速語法

在 Visual Studio Code 中輸入b4-carousel-caption按 Enter 可以快速產生 carousel 的語法

 

BootStarp4實做入門

15-1 媒體物件

  1. 基本的媒體物件長這樣，僅用到 .media 及 .media-body： 
    <div class="media">
    <img class="mr-3" src="http://fakeimg.pl/750x375/6ba85e/000">
    <div class="media-body">
        <h3>媒體物件 media object</h3>
        媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。
    </div>
</div>

  2. .mr-3 是間隔工具，代表 margin-right 隔 3 倍空間

  3. http://fakeimg.pl則是一個假圖服務。
  4. 更多功能請見：http://bootstrap.hexschool.com/docs/4.0/layout/media-object/

  5. 媒體物件固然簡單，但沒有自適應功能。

BootStarp4實做入門

15-2 把導覽列往上提

  1. 目前滑動圖會蓋住導覽列的陰影，若是想讓導覽列蓋住滑動圖該如何做？很簡單，調整 z-index 屬性即可。
  2. 修改 my.css，找到 .bg-green 的設定，加入 z-index 設定（http://css.doyoe.com/properties/positioning/z-index.htm） 
    .bg-green {
    background-color: #276F6F;
    box-shadow: 0px 3px 8px 0px #000;
    z-index: 5;
}

     

BootStarp4實做入門

15-3 讓輪播內容也自適應

  1. 由於媒體物件無法自適應，所以，可以改用格線系統來做即可。 
    <div class="row">
    <div class="col-sm-auto">
        <img src="http://fakeimg.pl/750x375/6ba85e/000">
    </div>
    <div class="col-sm">
        <h3>媒體物件 media object</h3>
        媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。
    </div>
</div>

     

BootStarp4實做入門

15-4 標題

  1. 從最大的 <h1> 到最小的 <h6>
  2. 若是不方便用 <h1> 的，可以用 <p class="h1"> 來取代 <h1>
  3. 在標題中可以用 <small> 做出次標題 
    <h3>
  大標題
  <small class="text-muted">次標題</small>
</h3>

  4. BootStrap4新增了 .display-1 ~ .display-4 比h1還更大！

    <h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

     

BootStarp4實做入門

16. 無間隔+直角邊框

一、取消欄位間間隔

  1. 在 BootStrap4 中可以透過 .no-gutters 來取消間隔 
    <div class="container">
    <div class="row no-gutters">
        <div class="col">col 等寬 1/3</div>
        <div class="col">col 等寬 2/3</div>
        <div class="col">col 等寬 3/3</div>
    </div>
</div>

二、滿版按鈕

  1. 滿版按鈕，可以加入 .btn-block 使按鈕變成滿版，例如： 
    <a href="#" class="btn btn-green btn-block">新生入學專區</a>

  2. 上面的 .btn-green 是用自定義按鈕工具：http://blog.koalite.com/bbg/ 做出來的。

  3. 利用間隔工具 .p-3 讓按鈕間變大一點，並利用 .mb-1 在按鈕下方加點距離。

    <div class="container">
    <div class="row no-gutters">
        <div class="col-sm-6"><a href="#" class="btn btn-green btn-block p-3 mb-1">106年度教育部技職校院教學卓越計畫10年成果展</a></div>
        <div class="col-sm-6"><a href="#" class="btn btn-green btn-block p-3 mb-1">新生入學專區</a></div>
    </div>
</div>

  4. 按鈕詳情：http://bootstrap.hexschool.com/docs/4.0/components/buttons/

三、直角及邊框

  1. 若想讓按鈕變成直角，可利用 .rounded-0 來設定之，例如： 
    <a href="#" class="btn rounded-0 btn-green2 btn-block p-3 mb-1">本國學生招生</a>

  2. 若是想替按鈕加上邊框，可加上 .border-white 將框線設為白色，並用 .border-top-0 指定上方不用框線。

    <a href="#" class="btn btn-green btn-block p-3 mb-1 rounded-0 border-white border-top-0">新生入學專區</a>
  3. 詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/borders/

BootStarp4實做入門

17. 文字顏色、底色

  1. 顏色的通用類別：http://bootstrap.hexschool.com/docs/4.0/utilities/colors/
  2. 利用 .bg-* 及 .text-* 可以分別設定文字的背景色和前景色。 
    <span class="bg-secondary text-white p-1 px-5 my-2 d-inline-block">新聞影音專區</span>

  3. .px-5 是加大文字的左右內距。

  4. .my-2 是加大文字上下和其他元件的距離。

  5. .d-inline-block 則是將該文字設定為行內區塊，使之具有區塊特色（可以設定 margin），亦可隨文字多寡而調整大小。

BootStarp4實做入門

18. 卡片

一、關於卡片

  1. BootStrap4 的卡片整合了 BootStrap3 的面板 (panels)、wells、縮圖 (thumbnails) ...等功能。
  2. 基本的卡片結構（若沒指定尺寸，會是滿版） 
    <div class="card">
  <div class="card-header">卡片頁首</div>
  <img class="card-img-top" src="上方圖片.jpg" alt="上方圖片">
  <div class="card-body">
    <h4 class="card-title">卡片主標題</h4>
    <h6 class="card-subtitle">卡片次標題</h6>
    <p class="card-text">卡片內文</p>
    <a href="#" class="card-link">卡片連結</a>
  </div>
  <img class="card-img-bottom" src="下方圖片.jpg" alt="下方圖片">
  <div class="card-footer">卡片頁尾</div>
</div>

  3. 基本上，卡片裡面的任何一個元件，沒用到的話都可以省略。簡單講，有需要再用即可。

  4. 一個卡片內，可以有好幾個 .card-body

二、卡片的排版

  1. 如果卡片之間不想要有空隙，可用.card-group將卡片包起來。若是有頁尾，會自動對齊，看起來很整齊。 
    <div class="card-group">
    一堆卡片
</div>

  2. 若是不希望相連，則可改用.card-deck，如此，卡片之間會有縫隙。頁尾一樣會自動對齊。

    <div class="card-deck"> 
    一堆卡片 
</div>

  3. 上面這些都是橫式排列，亦可用直式排列，做出瀑布流的效果，只要改用.card-columns即可

    <div class="card-columns"> 
    一堆卡片 
</div>

三、快速產生

在 Visual Studio Code 中輸入b4-card-decks按 Enter 可以快速產生card-deck的語法

BootStarp4實做入門

18-1 調整卡片內容

  1. 我們來調整一下卡片內容： 
    <div class="card">
  <img class="card-img-top" src="images/part_37092_7280548_30803.jpg" alt="Card image cap">
  <div class="card-body p-0">
  </div>
  <div class="card-footer text-center px-2 bg-white">
    <a href="#" class="text-dark">慈大慈科大舉辦說明會 招攬人才</a>
  </div>
</div>

  2. 為了讓卡片文字可以互相對齊，我們將文字放在卡片頁尾.card-footer中，且加上.card-body才會有對齊的作用。

  3. 為了不讓.card-body空一塊，我們加上.p-0，把內距設為 0。

  4. 頁尾部份，我們用.text-center讓文字至中，用.px-2騰出文字上下的空間，並用.bg-white將底色設為白色。

  5. 最後，為了讓連結看起來是黑色的，我們在連結中加入了.text-dark，把文字變成黑色。

BootStarp4實做入門

19. 導覽

一、導覽頁籤

  1. 導覽有兩種，一種是頁籤式（nav-tabs）的，一種是藥丸式（nav-pills）的。
  2. 詳情：http://bootstrap.hexschool.com/docs/4.0/components/navs/#javascript-%E8%A1%8C%E7%82%BA
  3. 我們直接拿範例（稍微簡化）來修改： 
    <ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#內容1" role="tab" aria-controls="home" aria-expanded="true">選項1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#內容2" role="tab" aria-controls="profile">選項2</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="內容1" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="內容2" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>
  4. 上方<ul>是導覽列，其中的<li>就是導覽選項，利用href來連結到下方對應內容
  5. 下方的<div>則是點選導覽選項對應的內容，必須設定id才能和導覽選項對應上。

二、調整導覽列

  1. 預設是頁籤式的，我們將 .nav-tabs 改為 .nav-pills 即可換成藥丸式的。

  2. 為了讓選項滿版，我們加入.nav-fill。

  3. 順便改變底色，所以加入了.bg-secondary，使之呈現為灰色。

  4. 讓他和上下有點距離，所以加入.my-2，設定邊距為2個空白空間。最後看起來像這樣：

    <ul class="nav nav-pills nav-fill bg-secondary my-2" id="myTab" role="tablist">
    <!--選項-->
</ul>

三、調整選項

  1. 要多一組選項，就要在上方<ul>中多一組<li>，同時，下方<div>也要多一組設定。
  2. 上方導覽選項，例如： 
    <li class="nav-item">
    <a class="nav-link text-white active" id="tab-0" data-toggle="tab" href="#tab-content-0" role="tab" aria-controls="tab-0" aria-expanded="true">綜合公告</a>
</li>

  3. 由於我們有改變底色為深色系，故將選項顏色利用.text-white設為白色，此外，可以根據需求修改href值，以便範下方內容對應。

四、調整對應內容

  1. 下方內容區範例： 
    <div class="tab-pane fade show active" id="tab-content-0" role="tabpanel" aria-labelledby="content-0-tab">
    <div w3-include-html="table.html"></div>
</div>

  2. 主要是修改id值，以便和上方選項對應。

  3. 其內容可以直接寫在<div>中，此處為了精簡畫面，另做 table.html 來引入之。

五、快速產生

在 Visual Studio Code 中輸入b4-nav-tabs-pills-ul-variation按 Enter 可以快速產生導覽的語法，不過其中的 .nav-stacked 是 BootStrap3用的，在BS4中沒作用，故可以拿掉。

 

 

 

BootStarp4實做入門

20. 表格

一、快速產生

在 Visual Studio Code 中輸入b4-table-default按 Enter 可以快速產生表格的語法。

二、關於BootStrap4的表格

  1. 詳情：http://bootstrap.hexschool.com/docs/4.0/content/tables/
  2. 要套用BootStrap4的表格只要在<table>中加入 .table即可，會變成只有橫向的灰線，無垂直框線。
  3. 在<table>中加入 .table-inverse 可以變為深色表格。
  4. 在<thead>中加入 .thead-inverse 可以變為深色表格標題，若用.thead-default則是淺灰標題。
  5. 在<table>中加入 .table-striped 可以讓表格內容呈現一白一灰的斑馬紋。
  6. 在<table>中加入 .table-bordered 可以讓表格加上框線。
  7. 在<table>中加入 .table-hover 當滑鼠移過表格內容時，會即時改變底色。
  8. 在<table>中加入 .table-sm 更為緊密的表格，看起來比較不那麼胖（BS4新語法）。
  9. 在<table>中加入 .table-responsive 可變成響應式表格，但只有小於768px時有效，會變成需要左右移動。
  10. 另外，關於顏色部份，可參考：http://bootstrap.hexschool.com/docs/4.0/content/tables/#%E8%AA%9E%E6%84%8F%E5%8C%96-class

BootStarp4實做入門

21. 自動增行

  1. 在.row裡面，一般欄位數加起來應該要12，但若是超過12，BootStrap其實會自動新增一行： 
        <div class="container">
        <div class="row">
            <div class="col-sm-4"><a href="#">畢業生流向調查(畢業校友聯絡網)</a></div>
            <div class="col-sm-4"><a href="#">就業/工讀/實習訊息</a></div>
            <div class="col-sm-4"><a href="#">兼任助理勞動權益保障專區</a></div>
            <div class="col-sm-4"><a href="#">校外人士活動報名系統</a></div>
            <div class="col-sm-4"><a href="#">自我評鑑專區</a></div>
            <div class="col-sm-4"><a href="#">徵才訊息</a></div>
            <div class="col-sm-4"><a href="#">個人資料保護宣導</a></div>
            <div class="col-sm-4"><a href="#">校務及財務公開網</a></div>
            <div class="col-sm-4"><a href="#">國內策略聯盟學校</a></div>
        </div>
    </div>

  2. 其中為了做成綠色按鈕，我們在連結中加入.btn及字定義的.btn-green。

  3. 為了讓按鈕變大一點，我們加入.p-3，內距社為3個空白空間。

  4. 此外，加了.rounded-0讓按鈕從圓角變為直角。

  5. 最後，加上.border-white白色框線，讓按鈕間看起來有點距離，不至於擠成一團。

  6. 詳情：http://bootstrap.hexschool.com/docs/4.0/layout/grid/#%E6%AC%84%E7%9A%84%E5%A4%96%E5%9C%8D

BootStarp4實做入門

22. 表單

一、基本表單語法

  1. 在 Visual Studio Code 中輸入b4-form-grid按 Enter 可以快速產生一整組表單語法。 
    <div class="container">
    <form>
        <div class="form-group row">
            <label for="inputName" class="col-sm-1-12 col-form-label"></label>
            <div class="col-sm-1-12">
                <input type="text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week" class="form-control" name="inputName" id="inputName" placeholder="">
            </div>
        </div>
        <fieldset class="form-group row">
            <legend class="col-form-legend col-sm-1-12">Group name</legend>
            <div class="col-sm-1-12">
                
            </div>
        </fieldset>
        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Action</button>
            </div>
        </div>
    </form>
</div>
  2. 在一般的HTML中<fieldset>和<legend>是有其獨特用途和外觀的，但在 BS4 的表單中，<fieldset>等同<div>，<legend>等同<label>，因此，擇一即可，效果是一樣的。
  3. 此表單無法直接用，必須修改後才能使用，例如： 
    <form>
    <div class="form-group row">
        <label for="name" class="col-sm-2 col-form-label">姓名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">
        </div>
    </div>
    <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
            <button type="submit" class="btn btn-primary">送出</button>
        </div>
    </div>
</form>

BootStarp4實做入門

22-1 表單群組

一、標籤在上，輸入框在下的表單群組

  1. 「表單群組」是指一組「標籤+輸入元件」。
  2. 在 Visual Studio Code 中輸入b4-form-group按 Enter 可以快速產生一組表單元件群組的語法。 
    <div class="form-group">
  <label for=""></label>
  <input type="text|password|email|number|submit|date|datetime|datetime-local|month|color|range|search|tel|time|url|week" name="" id="" class="form-control" placeholder="" aria-describedby="helpId">
  <small id="helpId" class="text-muted">Help text</small>
</div>

  3. 一樣，要修改後才能用，例如：

    <div class="form-group">
    <label for="name">姓名</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">
</div>

二、標籤在左，輸入框在右的表單群組

  1. 在.form-group後要加一個.row，才能變成水平輸入表單。
  2. 在<label>中要加入.col-sm-* 指定標籤空間大小，還要加入.col-form-label確保和輸入元件可以垂直對齊。
  3. <input>外面要用<div>包起來，並加入.col-sm-* 指定輸入框的空間大小
  4. 若是希望標籤可以靠右邊對齊，則可加入.text-sm-right，如此，只有螢幕大於576px時才會靠右，小螢幕時，最自動回到左上方。例如： 
    <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label text-sm-right">姓名</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" name="name" id="name" placeholder="請輸入姓名">
    </div>
</div>

  5. 如果要在欄位下方加上說明，可用.form-text，並用.text-danger來設定成紅色，如：

    <p class="form-text text-danger">
    此為修改資料用的密碼
</p>

     

BootStarp4實做入門

23. 20170923上課範例

 

BootStarp4實做入門

23-1 index.html

<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BootStrap4練習</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/my.css">
</head>

<body>
    <div style="background-color:#185252;">
        <div class="container">
            <div class="row py-4 align-items-center">
                <div class="col-sm text-center text-lg-right">
                    <img src="images/logo.png" alt="logo">
                </div>
                <div class="col-sm-auto text-center">
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>
                        <div>站內搜尋</div>
                    </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-car fa-2x" aria-hidden="true"></i>
                        <div>交通路線</div>
                        </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-file-o fa-2x" aria-hidden="true"></i>
                        <div>網站地圖</div>
                    </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
                        <div>意見箱</div>
                    </a>
                    <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-globe fa-2x" aria-hidden="true"></i>
                        <div>English</div>
                    </a>
                </div>
                <div class="col-sm text-center text-lg-left">
                    <a href="#" class="btn-tools"><span>考生</span></a>
                    <a href="#" class="btn-tools"><span>新生</span></a>
                    <a href="#" class="btn-tools"><span>學生</span></a>
                    <a href="#" class="btn-tools"><span>教師</span></a>
                    <a href="#" class="btn-tools"><span>職員</span></a>
                    <div class="d-inline d-lg-block"></div>
                    <a href="#" class="btn-tools"><span>家長</span></a>
                    <a href="#" class="btn-tools"><span>訪客</span></a>
                    <a href="#" class="btn-tools"><span>畢業生及校友</span></a>
                </div>
            </div>
        </div>
    </div>


    <nav class="navbar navbar-expand-md navbar-dark bg-green p-sm-0">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <!--此處加入選項-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
                        <div class="dropdown-menu" aria-labelledby="navbar1">
                            <a class="dropdown-item" href="#">子選項1</a>
                            <a class="dropdown-item" href="#">子選項2</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbar2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">選項1</a>
                        <div class="dropdown-menu" aria-labelledby="navbar2">
                            <a class="dropdown-item" href="#">子選項1</a>
                            <a class="dropdown-item" href="#">子選項2</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">選項</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

 

BootStarp4實做入門

23-2 css/my.css

body {
  font-family: '微軟正黑體';
}

/* 上方工具列按鈕 */
.btn-tools {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
}

.btn-tools:hover,
.btn-tools:focus,
.btn-tools:active,
.btn-tools.active,
.open .dropdown-toggle.btn-tools {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
}

.btn-tools:active,
.btn-tools.active,
.open .dropdown-toggle.btn-tools {
  background-image: none;
}

.btn-tools.disabled,
.btn-tools[disabled],
fieldset[disabled] .btn-tools,
.btn-tools.disabled:hover,
.btn-tools[disabled]:hover,
fieldset[disabled] .btn-tools:hover,
.btn-tools.disabled:focus,
.btn-tools[disabled]:focus,
fieldset[disabled] .btn-tools:focus,
.btn-tools.disabled:active,
.btn-tools[disabled]:active,
fieldset[disabled] .btn-tools:active,
.btn-tools.disabled.active,
.btn-tools[disabled].active,
fieldset[disabled] .btn-tools.active {
  background-color: transparent;
  border-color: transparent;
}

.btn-tools .badge {
  color: transparent;
  background-color: #ffffff;
}

.btn-tools div {
  font-size: 0.8rem;
  margin-top: 4px;
}

.btn-tools span {
  font-size: 0.9rem;
}

/* 導覽列底色 */
.bg-green {
  background: #276f6f;
  box-shadow: 0px 3px 8px 0px #000;
}

 

BootStarp4實做入門

24. 20170924上課範例

 

BootStarp4實做入門

24-1 index.html

<!DOCTYPE html>
<html lang="zh-Hant-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BootStrap4練習</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/my.css">
    <script src="js/w3.js"></script>
</head>

<body>
    <!-- 頁首 -->
    <div w3-include-html="header.html"></div>
    <!-- 輪播 -->
    <div w3-include-html="carousel.html"></div>
    <!-- 按鈕組1 -->
    <div w3-include-html="button1.html"></div>
    <!-- 按鈕組2 -->
    <div w3-include-html="button2.html"></div>

    <div class="container">
        <div class="row">
            <div class="col-sm">
                <!-- 新聞影音專區 -->
                <div w3-include-html="video.html"></div>
            </div>
            <div class="col-sm">
                <!-- 公告 -->
                <div w3-include-html="news.html"></div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row no-gutters">
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">畢業生流向調查(畢業校友聯絡網)</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">就業/工讀/實習訊息</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">兼任助理勞動權益保障專區</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">校外人士活動報名系統</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">自我評鑑專區</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">徵才訊息</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">個人資料保護宣導</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">校務及財務公開網</a></div>
            <div class="col-sm-4"><a href="#" class="btn btn-block btn-color1 rounded-0 border-white py-3">國內策略聯盟學校</a></div>
        </div>
    </div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/holder.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Optional JavaScript -->
    <script>
        w3.includeHTML();
    </script>
</body>

</html>

 

BootStarp4實做入門

24-2 header.html

<div style="background-color:#185252;">
    <div class="container">
        <div class="row py-4 align-items-center">
            <div class="col-sm text-center text-lg-right">
                <img src="images/logo.png" alt="logo">
            </div>
            <div class="col-sm-auto text-center">
                <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-search fa-2x fa-flip-horizontal" aria-hidden="true"></i>
                        <div>站內搜尋</div>
                    </a>
                <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-car fa-2x" aria-hidden="true"></i>
                        <div>交通路線</div>
                        </a>
                <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-file-o fa-2x" aria-hidden="true"></i>
                        <div>網站地圖</div>
                    </a>
                <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
                        <div>意見箱</div>
                    </a>
                <a href="#" class="btn btn-tools p-1 p-sm-2">
                        <i class="fa fa-globe fa-2x" aria-hidden="true"></i>
                        <div>English</div>
                    </a>
            </div>
            <div class="col-sm text-center text-lg-left">
                <a href="#" class="btn-tools"><span>考生</span></a>
                <a href="#" class="btn-tools"><span>新生</span></a>
                <a href="#" class="btn-tools"><span>學生</span></a>
                <a href="#" class="btn-tools"><span>教師</span></a>
                <a href="#" class="btn-tools"><span>職員</span></a>
                <div class="d-inline d-lg-block"></div>
                <a href="#" class="btn-tools"><span>家長</span></a>
                <a href="#" class="btn-tools"><span>訪客</span></a>
                <a href="#" class="btn-tools"><span>畢業生及校友</span></a>
            </div>
        </div>
    </div>
</div>

<!-- 導覽列 -->
<nav class="navbar navbar-expand-md navbar-dark bg-green p-sm-0">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div w3-include-html="nav.html" class="m-auto"></div>
        </div>
    </div>
</nav>

 

BootStarp4實做入門

24-3 nav.html

<ul class="navbar-nav">
    <!--此處加入選項-->
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">認識本校</a>
        <div class=" dropdown-menu rounded-0" aria-labelledby="navbar1">
            <a class="dropdown-item" href="#">創辦人</a>
            <a class="dropdown-item" href="#">現任校長</a>
            <a class="dropdown-item" href="#">學校簡史</a>
            <a class="dropdown-item" href="#">教育理念</a>
            <a class="dropdown-item" href="#">聆聽校歌</a>
            <a class="dropdown-item" href="#">校徽釋義</a>
            <a class="dropdown-item" href="#">校園景觀</a>
            <a class="dropdown-item" href="#">聯絡及交通</a>
            <a class="dropdown-item" href="#">校園配置圖</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">招生資訊</a>
        <div class=" dropdown-menu rounded-0" aria-labelledby="navbar2">
            <a class="dropdown-item" href="#">本國學生招生</a>
            <a class="dropdown-item" href="#">　五加二護理專班招生專區</a>
            <a class="dropdown-item" href="#">　五專入學招生專區</a>
            <a class="dropdown-item" href="#">　四技入學招生專區</a>
            <a class="dropdown-item" href="#">　二技入學招生專區</a>
            <a class="dropdown-item" href="#">　轉學生招生專區</a>
            <a class="dropdown-item" href="#">　研究所招生</a>
            <a class="dropdown-item" href="#">　進修部招生</a>
            <a class="dropdown-item" href="#">　進修學院招生</a>
            <a class="dropdown-item" href="#">境外生招生專區</a>
            <a class="dropdown-item" href="#">　外國生招生專區</a>
            <a class="dropdown-item" href="#">　僑生及港澳生招生專區</a>
            <a class="dropdown-item" href="#">　陸生招生專區</a>
            <a class="dropdown-item" href="#">本校招生入學網路報名系統</a>
            <a class="dropdown-item" href="#">獎助學金專區</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">校務資訊</a>
        <div class=" dropdown-menu rounded-0" aria-labelledby="navbar3">
            <a class="dropdown-item" href="#">校務資訊系統</a>
            <a class="dropdown-item" href="#">Google Apps信箱</a>
            <a class="dropdown-item" href="#">教職員Webmail（新版）</a>
            <a class="dropdown-item" href="#">教職員Webmail（舊版）</a>
            <a class="dropdown-item" href="#">e-Portfolio(新版)</a>
            <a class="dropdown-item" href="#">e-Portfolio(舊版)</a>
            <a class="dropdown-item" href="#">e-Learning網路學園</a>
            <a class="dropdown-item" href="#">電算中心服務系統</a>
            <a class="dropdown-item" href="#">本校行動app下載</a>
            <a class="dropdown-item" href="#">慈濟儲存雲</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">學生資訊</a>
        <div class=" dropdown-menu rounded-0" aria-labelledby="navbar4">
            <a class="dropdown-item" href="#">學生資訊系統</a>
            <a class="dropdown-item" href="#">Google Apps信箱</a>
            <a class="dropdown-item" href="#">e-Portfolio(新版)</a>
            <a class="dropdown-item" href="#">e-Portfolio(舊版)</a>
            <a class="dropdown-item" href="#">e-Learning網路學園</a>
            <a class="dropdown-item" href="#">電算中心服務系統</a>
            <a class="dropdown-item" href="#">選課系統</a>
            <a class="dropdown-item" href="#">本校行動APP下載</a>
            <a class="dropdown-item" href="#">軟硬體資訊服務</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">行政單位</a>
        <div class=" dropdown-menu rounded-0" aria-labelledby="navbar5">
            <a class="dropdown-item" href="#">校長室</a>
            <a class="dropdown-item" href="#">秘書室</a>
            <a class="dropdown-item" href="#">教務處</a>
            <a class="dropdown-item" href="#">學務處</a>
            <a class="dropdown-item" href="#">總務處</a>
            <a class="dropdown-item" href="#">研究發展處</a>
            <a class="dropdown-item" href="#">電子計算機中心</a>
            <a class="dropdown-item" href="#">圖書館</a>
            <a class="dropdown-item" href="#">進修推廣部</a>
            <a class="dropdown-item" href="#">人事室</a>
            <a class="dropdown-item" href="#">人文室</a>
            <a class="dropdown-item" href="#">會計室</a>
            <a class="dropdown-item" href="#">國際暨兩岸教育資源中心</a>
            <a class="dropdown-item" href="#">教師發展暨教學資源中心</a>
        </div>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbar6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">教學單位</a>
        <div class=" dropdown-menu rounded-0" aria-labelledby="navbar6">
            <a class="dropdown-item" href="#">護理學院</a>
            <a class="dropdown-item" href="#">　護理系</a>
            <a class="dropdown-item" href="#">　長期照護研究所</a>
            <a class="dropdown-item" href="#">　醫學影像暨放射科學系</a>
            <a class="dropdown-item" href="#">　放射醫學科學研究所</a>
            <a class="dropdown-item" href="#">健康科技管理學院</a>
            <a class="dropdown-item" href="#">　醫務暨健康管理系</a>
            <a class="dropdown-item" href="#">　行銷與流通管理系</a>
            <a class="dropdown-item" href="#">　資訊科技與管理系</a>
            <a class="dropdown-item" href="#">全人教育中心(通識中心)</a>
            <a class="dropdown-item" href="#">附設進修學院</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">推廣教育</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">圖書資訊</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">研究發展</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">海外交流</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">辦學成果</a>
    </li>
</ul>

 

BootStarp4實做入門

24-4 carousel.html

<div style="background-color:#E2E2E2;">
    <div class="container">
        <div id="carouselId" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselId" data-slide-to="0" class="active"></li>
                <li data-target="#carouselId" data-slide-to="1"></li>
                <li data-target="#carouselId" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="row">
                        <div class="col-sm-auto">
                            <img src="http://fakeimg.pl/750x375/6ba85e/000" class="img-fluid">
                        </div>
                        <div class="col-sm p-3">
                            <h3>媒體物件 media object</h3>
                            媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row">
                        <div class="col-sm-auto">
                            <img src="http://fakeimg.pl/750x375/6ba85e/000" class="img-fluid">
                        </div>
                        <div class="col-sm p-3">
                            <h3>媒體物件 media object</h3>
                            媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="row">
                        <div class="col-sm-auto">
                            <img src="http://fakeimg.pl/750x375/6ba85e/000" class="img-fluid">
                        </div>
                        <div class="col-sm p-3">
                            <h3>媒體物件 media object</h3>
                            媒體物件有助於建立複雜和可重複元件，其中一些媒體可以不需要包覆在另一個上。此外，通過flexbox，只需要兩個 class 就可以完成這些工作。
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselId" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
            <a class="carousel-control-next" href="#carouselId" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
        </div>
    </div>
</div>

 

BootStarp4實做入門

24-5 button1.html

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm">
            <a href="#" class="btn btn-info btn-block py-3 rounded-0 mb-1" style="border-right:1px solid white;">106年度教育部技職校院教學卓越計畫10年成果展</a>
        </div>
        <div class="col-sm">
            <a href="#" class="btn btn-info btn-block py-3 rounded-0 mb-1">新生入學專區</a>
        </div>
    </div>
</div>

 

BootStarp4實做入門

24-6 button2.html

<div class="container">
    <div class="row no-gutters">
        <div class="col-sm"><a href="#" class="btn btn-color1 btn-block py-3 rounded-0 mb-1">本國學生招生</a></div>
        <div class="col-sm"><a href="#" class="btn btn-color2 btn-block py-3 rounded-0 mb-1">境外生招生</a></div>
        <div class="col-sm"><a href="#" class="btn btn-color3 btn-block py-3 rounded-0 mb-1">獎助學金專區</a></div>
        <div class="col-sm"><a href="#" class="btn btn-color4 btn-block py-3 rounded-0 mb-1">招生入學網路報名系統</a></div>
    </div>
</div>

 

BootStarp4實做入門

24-7 video.html

<span class="d-inline-block bg-title text-white px-4 py-1">新聞影音專區</span>

<div class="card-deck my-2">
    <div class="card">
        <img class="card-img-top" src="images/1.jpg" alt="圖片1">
        <div class="card-body p-0"></div>
        <div class="card-footer bg-white p-0 py-2 text-center"><a href="#" class="card-link text-dark">系列活動迎新 校園生活寫新扉頁</a></div>
    </div>

    <div class="card">
        <img class="card-img-top" src="images/2.jpg" alt="圖片2">
        <div class="card-body p-0"></div>
        <div class="card-footer bg-white p-0 py-2 text-center"><a href="#" class="card-link text-dark">素食午餐結緣 校園齋戒行之有年</a></div>
    </div>
</div>
<div class="card-deck my-2">
    <div class="card">
        <img class="card-img-top" src="images/3.jpg" alt="圖片1">
        <div class="card-body p-0"></div>
        <div class="card-footer bg-white p-0 py-2 text-center"><a href="#" class="card-link text-dark">特色教育名聞遐邇 吸引海外學子</a></div>
    </div>

    <div class="card">
        <img class="card-img-top" src="images/4.jpg" alt="圖片2">
        <div class="card-body p-0"></div>
        <div class="card-footer bg-white p-0 py-2 text-center"><a href="#" class="card-link text-dark">話劇護生傳正念 心繫苦難中災民</a></div>
    </div>
</div>
<div class="card-deck my-2">
    <div class="card">
        <img class="card-img-top" src="images/5.jpg" alt="圖片1">
        <div class="card-body p-0"></div>
        <div class="card-footer bg-white p-0 py-2 text-center"><a href="#" class="card-link text-dark">難民義診療身心 天涯之愛遍溫情</a></div>
    </div>

    <div class="card">
        <img class="card-img-top" src="images/6.jpg" alt="圖片2">
        <div class="card-body p-0"></div>
        <div class="card-footer bg-white p-0 py-2 text-center"><a href="#" class="card-link text-dark">慈科大姊妹校交流 習人文樂服務</a></div>
    </div>
</div>

 

BootStarp4實做入門

24-8 news.html

<ul class="nav nav-pills bg-title nav-fill" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active text-white" id="home-tab" data-toggle="tab" href="#綜合公告" role="tab" aria-controls="綜合公告" aria-expanded="true">綜合公告</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-white" id="profile-tab" data-toggle="tab" href="#招生資訊" role="tab" aria-controls="招生資訊">招生資訊</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-white" id="profile-tab" data-toggle="tab" href="#活動公告" role="tab" aria-controls="活動公告">活動公告</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-white" id="profile-tab" data-toggle="tab" href="#來文公告" role="tab" aria-controls="來文公告">來文公告</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-white" id="profile-tab" data-toggle="tab" href="#榮譽榜" role="tab" aria-controls="榮譽榜">榮譽榜</a>
    </li>
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="綜合公告" role="tabpanel" aria-labelledby="綜合公告-tab">
        <div w3-include-html="table.html"></div>
    </div>
    <div class="tab-pane fade" id="招生資訊" role="tabpanel" aria-labelledby="招生資訊-tab">
        <div w3-include-html="table.html">
        </div>
    </div>
    <div class="tab-pane fade" id="活動公告" role="tabpanel" aria-labelledby="活動公告-tab">
        <div w3-include-html="table.html">
        </div>
    </div>
    <div class="tab-pane fade" id="來文公告" role="tabpanel" aria-labelledby="來文公告-tab">
        <div w3-include-html="table.html">
        </div>.</div>
    <div class="tab-pane fade" id="榮譽榜" role="tabpanel" aria-labelledby="榮譽榜-tab">
        <div w3-include-html="table.html">
        </div>
    </div>
</div>

 

BootStarp4實做入門

24-9 table.html

<table class="table table-striped table-hover table-sm table-responsive">
    <thead class="thead-inverse">
        <tr>
            <th>標題</th>
            <th class="text-nowrap">公告單位</th>
            <th>日期</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row">★9/25-10/20【我的微行動宣言】新學期分享新目標，學諮好禮雙重送!</td>
            <td>學諮中心</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">【今日活動提醒】2017公視巡迴電影院好戲上場你來看~邀請全校師生一同觀賞喔~</td>
            <td>課外活動組</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">★9/25-10/20【我的微行動宣言】新學期分享新目標，學諮好禮雙重送!</td>
            <td>學諮中心</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">【今日活動提醒】2017公視巡迴電影院好戲上場你來看~邀請全校師生一同觀賞喔~</td>
            <td>課外活動組</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">★9/25-10/20【我的微行動宣言】新學期分享新目標，學諮好禮雙重送!</td>
            <td>學諮中心</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">【今日活動提醒】2017公視巡迴電影院好戲上場你來看~邀請全校師生一同觀賞喔~</td>
            <td>課外活動組</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">★9/25-10/20【我的微行動宣言】新學期分享新目標，學諮好禮雙重送!</td>
            <td>學諮中心</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">【今日活動提醒】2017公視巡迴電影院好戲上場你來看~邀請全校師生一同觀賞喔~</td>
            <td>課外活動組</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">★9/25-10/20【我的微行動宣言】新學期分享新目標，學諮好禮雙重送!</td>
            <td>學諮中心</td>
            <td>2017-09-22</td>
        </tr>
        <tr>
            <td scope="row">【今日活動提醒】2017公視巡迴電影院好戲上場你來看~邀請全校師生一同觀賞喔~</td>
            <td>課外活動組</td>
            <td>2017-09-22</td>
        </tr>
    </tbody>
</table>

 

BootStarp4實做入門

24-10 css/my.css

body {
  font-family: '微軟正黑體';
}

/* 上方工具列按鈕 */
.btn-tools {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
}

.btn-tools:hover,
.btn-tools:focus,
.btn-tools:active,
.btn-tools.active,
.open .dropdown-toggle.btn-tools {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
}

.btn-tools:active,
.btn-tools.active,
.open .dropdown-toggle.btn-tools {
  background-image: none;
}

.btn-tools.disabled,
.btn-tools[disabled],
fieldset[disabled] .btn-tools,
.btn-tools.disabled:hover,
.btn-tools[disabled]:hover,
fieldset[disabled] .btn-tools:hover,
.btn-tools.disabled:focus,
.btn-tools[disabled]:focus,
fieldset[disabled] .btn-tools:focus,
.btn-tools.disabled:active,
.btn-tools[disabled]:active,
fieldset[disabled] .btn-tools:active,
.btn-tools.disabled.active,
.btn-tools[disabled].active,
fieldset[disabled] .btn-tools.active {
  background-color: transparent;
  border-color: transparent;
}

.btn-tools .badge {
  color: transparent;
  background-color: #ffffff;
}

.btn-tools div {
  font-size: 0.8rem;
  margin-top: 4px;
}

.btn-tools span {
  font-size: 0.9rem;
}

/* 導覽列底色 */
.bg-green {
  background: #276f6f;
  box-shadow: 0px 3px 8px 0px #000;
  z-index: 5;
}

.bg-green .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
}

.bg-green .navbar-brand,
.bg-green .navbar-text {
  color: rgb(255, 255, 255);
}

.bg-green .nav-item.active .nav-link,
.bg-green .nav-item:hover .nav-link {
  color: #f7fe22;
}

.bg-green .dropdown-menu {
  background-color: #2c3232;
}

.bg-green .dropdown-item {
  color: #ffffff;
}

.bg-green .dropdown-item:hover {
  background-color: #3c70ef;
}

.btn-color1 {
  color: #ffffff;
  background-color: #389c90;
  border-color: #389c90;
}

.btn-color1:hover,
.btn-color1:focus,
.btn-color1:active,
.btn-color1.active,
.open .dropdown-toggle.btn-color1 {
  color: #ffffff;
  background-color: #2c7d74;
  border-color: #389c90;
}

.btn-color1:active,
.btn-color1.active,
.open .dropdown-toggle.btn-color1 {
  background-image: none;
}

.btn-color1.disabled,
.btn-color1[disabled],
fieldset[disabled] .btn-color1,
.btn-color1.disabled:hover,
.btn-color1[disabled]:hover,
fieldset[disabled] .btn-color1:hover,
.btn-color1.disabled:focus,
.btn-color1[disabled]:focus,
fieldset[disabled] .btn-color1:focus,
.btn-color1.disabled:active,
.btn-color1[disabled]:active,
fieldset[disabled] .btn-color1:active,
.btn-color1.disabled.active,
.btn-color1[disabled].active,
fieldset[disabled] .btn-color1.active {
  background-color: #389c90;
  border-color: #389c90;
}

.btn-color1 .badge {
  color: #389c90;
  background-color: #ffffff;
}

.btn-color2 {
  color: #ffffff;
  background-color: #c7982d;
  border-color: #c7982d;
}

.btn-color2:hover,
.btn-color2:focus,
.btn-color2:active,
.btn-color2.active,
.open .dropdown-toggle.btn-color2 {
  color: #ffffff;
  background-color: #967321;
  border-color: #c7982d;
}

.btn-color2:active,
.btn-color2.active,
.open .dropdown-toggle.btn-color2 {
  background-image: none;
}

.btn-color2.disabled,
.btn-color2[disabled],
fieldset[disabled] .btn-color2,
.btn-color2.disabled:hover,
.btn-color2[disabled]:hover,
fieldset[disabled] .btn-color2:hover,
.btn-color2.disabled:focus,
.btn-color2[disabled]:focus,
fieldset[disabled] .btn-color2:focus,
.btn-color2.disabled:active,
.btn-color2[disabled]:active,
fieldset[disabled] .btn-color2:active,
.btn-color2.disabled.active,
.btn-color2[disabled].active,
fieldset[disabled] .btn-color2.active {
  background-color: #c7982d;
  border-color: #c7982d;
}

.btn-color2 .badge {
  color: #c7982d;
  background-color: #ffffff;
}

.btn-color3 {
  color: #ffffff;
  background-color: #d96459;
  border-color: #d96459;
}

.btn-color3:hover,
.btn-color3:focus,
.btn-color3:active,
.btn-color3.active,
.open .dropdown-toggle.btn-color3 {
  color: #ffffff;
  background-color: #b05148;
  border-color: #d96459;
}

.btn-color3:active,
.btn-color3.active,
.open .dropdown-toggle.btn-color3 {
  background-image: none;
}

.btn-color3.disabled,
.btn-color3[disabled],
fieldset[disabled] .btn-color3,
.btn-color3.disabled:hover,
.btn-color3[disabled]:hover,
fieldset[disabled] .btn-color3:hover,
.btn-color3.disabled:focus,
.btn-color3[disabled]:focus,
fieldset[disabled] .btn-color3:focus,
.btn-color3.disabled:active,
.btn-color3[disabled]:active,
fieldset[disabled] .btn-color3:active,
.btn-color3.disabled.active,
.btn-color3[disabled].active,
fieldset[disabled] .btn-color3.active {
  background-color: #d96459;
  border-color: #d96459;
}

.btn-color3 .badge {
  color: #d96459;
  background-color: #ffffff;
}

.btn-color4 {
  color: #ffffff;
  background-color: #4aa5cc;
  border-color: #4aa5cc;
}

.btn-color4:hover,
.btn-color4:focus,
.btn-color4:active,
.btn-color4.active,
.open .dropdown-toggle.btn-color4 {
  color: #ffffff;
  background-color: #3c86a6;
  border-color: #4aa5cc;
}

.btn-color4:active,
.btn-color4.active,
.open .dropdown-toggle.btn-color4 {
  background-image: none;
}

.btn-color4.disabled,
.btn-color4[disabled],
fieldset[disabled] .btn-color4,
.btn-color4.disabled:hover,
.btn-color4[disabled]:hover,
fieldset[disabled] .btn-color4:hover,
.btn-color4.disabled:focus,
.btn-color4[disabled]:focus,
fieldset[disabled] .btn-color4:focus,
.btn-color4.disabled:active,
.btn-color4[disabled]:active,
fieldset[disabled] .btn-color4:active,
.btn-color4.disabled.active,
.btn-color4[disabled].active,
fieldset[disabled] .btn-color4.active {
  background-color: #4aa5cc;
  border-color: #4aa5cc;
}

.btn-color4 .badge {
  color: #4aa5cc;
  background-color: #ffffff;
}

.bg-title {
  background: #709698;
}