ProgressBar

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

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

最後更新時間： 2023/11/13

售價 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的混合實作產生新功能。
 

 

第一章

Bootstrap 3 安裝與介紹
▼
  • ▶

    01. 安裝與開始使用Bootstrap

    06:59
  • ▶

    02. Bootstrap 3官網連結位置更正

    05:02
  • ▶

    03. Bootstrap原理，@media 與 viewport

    11:54

第二章 (總長5小時)

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小時)

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

第四章 (總長1小時)

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小時)

如何使用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小時)

如何使用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小時)

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小時)

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

第九章

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工程師