線上程式教學課程: 行動第一! 使用Bootstrap建立響應式RWD網站!

羨慕別人也有響應式(RWD)的網站嗎？你知道一般人超過60%以上的上網時間都是在手機上嗎? 利用Bootstrap 可以讓您快速的完成響應式的網站。本課程更進一步的教您如何客製化Bootstrap，讓您的網站不會永遠像是樣品!

最後更新時間： 2019/07

售價 NT$: 2400

課程包含:

終生於平台觀看詳情

9個章節，86堂影片

18小時以上的課程時間

本課程未在其他平台上架。

信用卡、超商、ATM、Paypal皆可付款

3、6期信用卡付款零利率查看支援銀行

(信用卡不留卡號，Paypal需非台灣)

課程敘述

[注意: 此課程價格固定不會再進行優惠，以舊版 Bootstrap 3/4 進行課程，一樣會回答問題，但是不再進行課程更動。]

[ Bootstrap 5 課程連結 ]

羨慕別人也有響應式(Responsive web desgin, 縮寫RWD)的網站嗎？你知道一般人超過60%以上的上網時間都是在手機上嗎? 利用Bootstrap 可以讓您快速的完成響應式的網站。本課程更進一步的教您如何客製化Bootstrap，讓您的網站不會永遠像是樣品!

來看看範例實作的成果吧！
https://progressbartw.github.io/bootstrap3/
(此範例為Bootstrap 3 課程完結範例)

課程難度

初級，此課程需要一點基本程式經驗。

請參閱課程需求

課程需求

1. 知道什麼是瀏覽器，什麼是網站
2. 使用過HTML / CSS / Javascript
3. 使用過jQuery
4. 知道電腦, 手機與平板螢幕大小不同
5. 有一台電腦

非必要，但會幫助學習
1. (曾經)有一個網站或需要維護一個網站
2. 有一台Mac電腦，但PC也不影響學習

課程目標

學會如何使用Bootstrap 3 / Bootstrap 4 快速製作出同時符合電腦, 手機, 平板的網站，
並且了解Bootstrap原理有能力修改預設版型至符合設計師的規劃。
更加一步利用Sass 做開發與管理，進一步提升您的戰力。

課程特點

1. 學習Bootstrap 3元件
2. 了解Responsive
3. 學會快速開發技巧
4. 學習使用前端工具Sass
5. 學會jQuery 與 Bootstrap的混合實作產生新功能。

第一章 (總長0.4小時)

Bootstrap 3 安裝與介紹

01. 安裝與開始使用Bootstrap
06:59
02. Bootstrap 3官網連結位置更正
05:02
03. Bootstrap原理，@media 與 viewport
11:54

第二章 (總長5.2小時)

Bootstrap 3 元件使用與實作範例

01. 介紹Grid System
20:39
02. 巢狀 Grid System
18:44
03. 上方導覽條(Nav bar)介紹
16:05
04. 兩種下拉式選單於導覽條Nav bar與其差異(Dropdown, Collapse)
13:06
05. 導覽條將漢堡圖示(Hamburger Icon)放到左邊
12:47
06. 客製化頁底(Footer)
20:38
07. 向量圖示介紹(glyphs and font awesome)
23:05
08. 卡片型元件(Thumbnail) 以及按鈕與標籤
19:04
09. 頁籤型元件(tabs and pills)
10:02
10. Table - 表格介紹
09:49
11. Modal - 彈跳視窗與其運用
33:39
12. Form - 表單介紹
26:01
13. 比List更好用的Media object介紹
10:54
14. 圖片輪播 Carousel
25:54
15. 圖片固定比例與影片嵌入(Responsive embed)
16:00
16. Float 相關元件(pull-right, pull-left and clearfix)
05:04
17. 列表 (List Group)
08:52
18. Grid System 排序
08:37
19. 進度條實作(Progress bars)
13:56

第三章 (總長1.0小時)

Bootstrap 3 較簡易的元件介紹

01. 包含顏色類別元件 btn、label、badge、text 與 bg 介紹
08:52
02. 導覽列(麵包屑) Bread crumbs
12:16
03. 分頁 Pagination & pager
09:49
04. 滿版屏幕與頁頭(Jumbotron & Page Header)
04:15
05. 警告與面板 (alert & panel)
06:17
06. 顯示、隱藏 ( hidden-* visible-* )
12:35
07. 免費Bootstrap版型介紹
08:23

第四章 (總長2.0小時)

Bootstrap 3 與 jQuery

01. 與jQuery的關係使用簡介
20:31
02. alert close 與事件綁定
10:37
03. dropdown 與 jQuery 版本陷阱
15:13
04. 初始化與解決套件衝突
11:41
05. 滑入顯示提醒 (tooltips)
10:21
06. 點擊顯示提醒 (popover)
06:41
07. 滾動追蹤 (scrollspy)
21:20
08. 滾動鎖定標題(affix)
21:25

第五章 (總長2.0小時)

如何使用Sass

01. Sass 簡易介紹
03:04
02. 使用桌面程式Scout編譯Sass
08:25
03. [Mac] 使用Node.js 指令集編譯Sass
12:51
04. [Windows] 使用Node.js 指令集編譯Sass
10:37
05. 使用Sass自製CSS組件
22:23
06. 導入(import)，合併Css檔
06:57
07. Sass變數介紹(variables)
04:55
08. Sass函數與使用(@mixin and @include)
06:34
09. 變數數學運算(variables)
07:03
10. 條件判斷(if & else)
05:32
11. 陣列與鍵值存儲(list and map)
09:27
12. 迴圈(While, for, each loop)
15:21
13. 程式整理優化(&元素、@media)
07:49

第六章 (總長1.5小時)

如何使用Sass設定Bootstrap 3

01. 使用Bootstrap的Sass版本進行編譯
07:26
02. 建立含有Sass的Bootstrap開發環境
04:41
03. 格狀系統 Grid system
16:29
04. Grid col-* 與 navbar 顯示漢堡圖示斷點
13:21
05. 導覽條 Navbar
11:11
06. 固定比例 Responsive embed
03:20
07. 表格 table
09:53
08. 按鈕與標籤
06:46
09. 圖片輪播 Carousel
12:35
10. 圖片輪播 Carousel js
06:16

第七章 (總長3.4小時)

Bootstrap 3完整網站範例

01. 範例介紹
03:49
02. 範例圖檔分析
15:06
03. 設定背景
18:24
04. 客製化導覽條
11:43
05. 標題旋轉盤
31:48
06. 前後排版交換與滑入動畫
29:03
07. 巢狀格狀系統(Grid System)與隱藏區塊
17:40
08. Footer頁尾
29:05
09. 隱藏半面手機區塊
24:39
10. 手機轉向區塊
21:34

第八章 (總長2.2小時)

Bootstrap 4 元件介紹

01. Bootstrap 4課程介紹
09:05
02. 安裝與開始使用Bootstrap4
12:42
03. Container, 斷點, 與Grid system
16:03
04. 以範例帶功能介紹，前言
06:38
05. Navbar與修改注意事項
11:05
06. 按鈕文字與圖片(btn, lead, image-fluid)
13:14
07. 巢狀 Grid System
07:52
08. Grid System排序
09:37
09. 切換版本到4.3.x
03:14
10. 藉由Bootstrap4官網內容了解使用Bootstrap 4比較理想的方式
13:17
11. Bootstrap utilities Spacing與css Margin Collapsing(px-5, mx-auto)
13:33
12. 分析與實作Bootstrap 4首頁，詳敘Button的使用方式
15:21

第九章 (總長0.5小時)

Bootstrap 4 原始碼編譯

01. 使用桌面程式編譯Bootstrap4
06:46
02. 使用node-sass 編譯Sass版本Bootstrap4
11:19
03. Bootstrap 4 Sass 三種編譯版本差異
02:48
04. 利用官網設定完整的編譯Bootstrap 4(包含JavaScript)
08:35

課程講師

縱裕

iOS 工程師 / Ruby On Rails 網站工程師

現職為iOS 工程師，但同時也在鑽研網站技術並且建立多個網站。
曾協助多個新創公司，範圍包含網站前端到桌面應用程式倉存管理與電子機關互動。
從網站架設，手機APP到系統底層都有豐富的經驗。
擅長不同系統架構的整合與創新想法的實現。

經歷：
進度條技術顧問
Digilog.tw 網站與倉庫後台程式架構設計與建置
Zooe 線上教學平台網站架構設計與建置
HelloStudy 楓禾留遊學網設計與建置
Funlock 放樂工作室真實密室逃脫遊戲 - 魔鏡迷城電子機關設計與製作
iOS App - Rock Click 節拍器
Nexcom ARM韌體與軟體工程師
Insyde BIOS工程師