Bootstrap
本次上課將學習使用 Bootstrap CSS Framework.
考慮到 Bootstrap 本身已提供相當完整的說明文件，課程便不再另行提供詳細的說明文件，以下內容僅做為授課時練習參考。
工具類別
文字顏色
背景顏色
留白
margin: 同時有 m, mx, my, mr, ml, mt, mb 版本
padding: 同時有 p, px, py, pr, pl, pt, pb 版本
邊框
使用 border, 再接上 border-<顏色> 與 border-<方向>. 例如:
圓角
使用 rounded 或 rounded-* 系列:
陰影
使用 shadow 或 shadow-* 系列:
應用練習
使用以上類別快速做出一張卡片
元件類別
卡片元件
預先設立好的元件, 可呈現卡片 / 面板效果. 可參考 這裡
按鈕元件
使用 btn 搭配各種尺寸與顏色來建立按鈕
Alert 元件
使用 alert 類別搭配對應顏色與樣式:
進站畫面元件 Jumbotron
讓您跟上時代的潮流
面日響，力可史密人思；求經女跟生的度會師天！
天、生性計下生開英，說是規水，不機的：此會印很驗亞看強他子工，思業事事最可們門土當二，高響風重福：給樣在學水同一計，議說得是們眼全。模有歷……密不說要你馬！月有能，王的且了所；就以什園幾？
網站標題列
網站標題列 + 下拉式選單
排版與格點
使用 .container-* 加上對應尺寸設定響應式容器大小
使用 w-*, h-* 設定比例大小
運用 Grid System
三欄式訴求
正港奇片
各位讀者大家好，我叫正港奇片，我的興趣是創作有趣搞笑的漫畫，雖然我還有很多地方要再加強，但我會盡力分享最好的
公告事項
ATM僅能提款、存款、轉帳及更改密碼，沒有退稅功能，也無法取消扣款、分期設定，亦無法將款項轉入自己帳戶。
鼎王食記
並不是有200元就可以甘願被水和麻辣湯潑，知後她驚呼，所以轉讓給想要去朋友，還可以直接外帶鍋底有夠貼心！
三欄式訴求 / 2
正港奇片
各位讀者大家好，我叫正港奇片，我的興趣是創作有趣搞笑的漫畫，雖然我還有很多地方要再加強，但我會盡力分享最好的
公告事項
ATM僅能提款、存款、轉帳及更改密碼，沒有退稅功能，也無法取消扣款、分期設定，亦無法將款項轉入自己帳戶。
鼎王食記
並不是有200元就可以甘願被水和麻辣湯潑，知後她驚呼，所以轉讓給想要去朋友，還可以直接外帶鍋底有夠貼心！
三欄式訴求 / 3 ( with CTA )
正港奇片
各位讀者大家好，我叫正港奇片，我的興趣是創作有趣搞笑的漫畫，雖然我還有很多地方要再加強，但我會盡力分享最好的
公告事項
ATM 僅能提款、存款、轉帳及更改密碼，沒有退稅功能，也無法取消扣款、分期設定，亦無法將款項轉入自己帳戶。
鼎王食記
並不是有200元就可以甘願被水和麻辣湯潑，知後她驚呼，所以轉讓給想要去朋友，還可以直接外帶鍋底有夠貼心！
三欄式訴求 / 4 ( with CTA & 提醒事項 )
正港奇片
各位讀者大家好，我叫正港奇片，我的興趣是創作有趣搞笑的漫畫，雖然我還有很多地方要再加強，但我會盡力分享最好的
公告事項
ATM 僅能提款、存款、轉帳及更改密碼，沒有退稅功能，也無法取消扣款、分期設定，亦無法將款項轉入自己帳戶。
鼎王食記
並不是有200元就可以甘願被水和麻辣湯潑，知後她驚呼，所以轉讓給想要去朋友，還可以直接外帶鍋底有夠貼心！
使用樣板與資源
網路上有很多人為了各種目的 ( 練習、分享、營利、行銷 ) 製作了各種免費 / 付費的樣板，使我們不需從頭開始製作。以 Bootstrap 為例，他自身即提供了各式用途的網頁樣板：
其它可參考的樣板網站：
使用網路資源必須要有基本的授權概念。
開放授權與開放原始碼
關於開放授權 ( Open License ) 與 開放原始碼 ( Open Source ) 的基本概念，建議可以閱讀這些文章：
在網路上取用任何素材 ( 影像、源碼函式庫、圖示、樣板包 ) 時，務必確認素材的使用授權。常見的授權包括：
- Creative Commons ( 創用授權 ), 其中還包含：
- Share Alike (SA) - 以相同方式分享
- No-Derivs(ND) - 禁止改作
- Non-Commercial(NC) - 禁止商業利用
- Attribution(BY) - 需標註作者姓名
在使用創用 CC 授權時，常以縮寫組合上述幾種授權方式並附上對應連結使用。範例使用方式：本課程網頁使用 CC-BY-SA 4.0 授權方式釋出。