Bootstrap 網頁設計實作課程 - 假日班 | 五倍紅寶石

Bootstrap 網頁設計實作課程 - 假日班

立刻學會最熱門的前端網頁框架 Bootstrap 4,更加碼帶你一窺 Bootstrap 5 的面貌!
運用 Bootstrap 開發,能迅速提升工作效率,彈指間製作高質感網站,無痛開發 RWD。
本課程將帶你完整掌握 Bootstrap 的運作原理,從建立觀念到學會實際操作、技巧心法!
只要 24 小時,學會運用 Bootstrap ,實現你的網頁開發創意!

開課時段 5 月|假日班5/17 (日)、5/24 (日)、5/31 (日)、6/7 (日) 10:00 ~ 17:00,共計 24 小時

原價 NTD 17,400 優惠價 NTD 14,400

此課程已在上課中,暫不開放報名。
如對此堂課有興趣,歡迎和 我們聯絡 取得最新課程資訊。

Amos Lee 李建杭 | CSS 動畫課程教學 | RWD 課程教學推薦 | 五倍紅寶石

講師

李建杭 (Amos Lee)

資策會(台北、中壢) 講師
ModernWeb 研討會講者
亞馬勁雲科技前端工程師
中科大業界專家課程 講師
致理技術學院業界專家 講師
元培醫事科技大學業界專家 講師
凌網科技視覺設計師

本課程適合

  • 想入門網頁開發
  • 想節省網頁開發時間
  • 想製作響應式網頁(RWD)
  • 想提升網站開發力
  • 想快速美化網頁版面

你將會學到

  • 格線與排版
  • Flex
  • 內容與表格控制
  • 導覽相關組件
  • 表單組件
  • 按鈕組件
  • JavaScript 組件

為什麼我應該學 Bootstrap?

Bootstrap 網頁設計實作課程 - 假日班

Bootstrap 是近年最熱門的網頁開發框架,也是網頁設計者必學工具。

它內建強大元件與 RWD 效果,大幅節省網頁開發時間。

本次課程主要學習 Bootstrap 4 ,它全面支援 Flexbox 與導入 Node SASS,對網頁開發新手的你來說,將可讓你獲得完全貼近業界主流開發模式的技能。

若你曾學過 Bootstrap 3 以前的版本,更應該深入了解 Bootstrap 4,學習如何活用 Bootstrap 4 更便利的新元素!

五倍紅寶石的 Bootstrap 課程將由業界名師 Amos Lee 老師帶領,不只幫你建立基本觀念,更讓你學會實務操作技巧。24 小時,迅速增長網頁開發力!

本次還會帶你搶先窺探 Bootstrap 5 的樣貌,千萬不可錯過!

扎實課程內容搶先看

Bootstrap 網頁設計實作課程 - 假日班

第一階段:快速認識 Bootstrap

由業界經驗豐富講師 Amos 帶領,快速了解 Bootstrap 不同版本的差異,並瞭解 Bootstrap 最重要的格線切版觀念、不同裝置尺寸如何設置 RWD 效果,以及更多關於 Bootstrap 的基礎觀念。

除此之外更詳細瞭解 Bootstrap 4 一大變革「全面導入 Flexbox」,讓你不只是學會 Bootstrap,也一邊學會最新的 CSS 觀念。

Bootstrap 網頁設計實作課程 - 假日班

第二階段:常用元件全面解析

Bootstrap 最方便的功能之一就是整理了很多現代網頁中常見的元素,並將它們變為單個的元件,只要按照 Bootstrap 的命名規則套用,即使對設計並不擅長,也能夠快速建構出美觀的網頁。

常用元件介紹包含導覽列、麵包屑、表單、按鈕...等超實用網頁元素,Bootstrap 當中重要的卡片組件,也會清楚介紹觀念與應用實務!

Bootstrap 網頁設計實作課程 - 假日班

第三階段:進階瞭解 JavaScript 組件

以為 Bootstrap 只能幫你解決切版和 RWD 問題嗎?不!Bootstrap 也有內建常用的 JavaScript 組件,諸如常見的圖片輪播、摺疊功能,甚至是 Popover、Tooltip、滑動、滾動監聽、彈出視窗等都直接幫你一次解決囉!對 JavaScript 還不甚熟悉,但卻有以上功能的設計需求的話,絕對不能錯過!

Bootstrap 課程內容

一、介紹與準備

  • 尺寸與斷點
  • 裝置與尺寸
  • 檔案與方法
  • 快速了解 Bootstrap 不同版本的差異

二、格線與排版

  • 重點觀念
  • 格線撰寫規則
  • 格線偏移與排序
  • 格線應用規則
  • 定寬容器與滿版容器
  • 重要層級說明
  • 對齊控制
  • 顯示與隱藏控制
  • 重要的卡片組件
  • 卡片組件應用實務

三、關於 Flex

  • 原理與語法規則
  • 應用觀念
  • 換行控制
  • 寬度控制
  • 對齊控制

四、內容與表格控制

  • 頁面標題控制
  • 表格組件應用
  • 引用組件
  • 清單設定
  • 原始碼組件
  • 圖片 RWD 控制
  • 滿版螢幕組件
  • 進度條組件
  • 警告區塊

五、導覽相關組件

  • 導覽列製作
  • 導覽列修改方式
  • 麵包屑
  • 下拉選單製作
  • 清單群組組件
  • 分頁導覽組件

六、表單組件

  • 表單設定
  • 表單群組
  • 輸入群組
  • 表單修改技巧

七、按鈕組件

  • 按鈕設定方式
  • 按鈕色彩
  • 按鈕尺寸控制
  • 按鈕群組與設定

八、JavaScript 組件

  • 輪播組件應用與設定
  • 摺疊組件應用與設定
  • Popover 組件
  • Tooltip 組件
  • 滑動組件
  • 滾動監聽組件
  • 彈出視窗組件

五倍紅寶石課程提供

程式網頁設計課程結業證書證明 | 五倍紅寶石

課程結業證書證明

程式網頁設計線上補課 | 五倍紅寶石

每週二獨家默默會讓你問題問到飽 & 業界高手一同交流

前端後端課程詢問 | 五倍紅寶石

共同討論課程群組,老師同學即時交流

程式課程環境 | 五倍紅寶石

舒適教室環境,備有插座及快速穩定免費 wifi 連線操作

程式網頁設計線上補課 | 五倍紅寶石

線上補課,不怕跟不上進度!

程式課程貓 | 五倍紅寶石

吉祥物貓貓加持

五倍紅寶石上課環境、地點

上課地點:台北市中正區衡陽路 7 號 5 樓
交通資訊:台大醫院站 1 號出口 (走路 4 分鐘)

立即揪團課程享折扣(名額有限)

超值加購方案

2 人同行 or 一次購買 2 堂課,可享 9 折優惠

3 人同行 or 一次購買 3 堂課,可享 85 折優惠

更多團報 or 相關課程諮詢請洽 02 - 2331-8188

報名及付款方式:

  1. 很抱歉,目前課程暫不開放報名。
  2. 有任何問題,或想獲取最新的課程資訊,都歡迎和 我們聯絡

注意事項:

  1. 課程內容、日期及講師可能因故有所修改,主辦單位保留異動之權利。
  2. 學員需自備筆記型電腦。
  3. 本次課程僅開放 30 人報名。
  4. 報名費不包含餐費。
  5. 若報名學員人數不足 10 人,將視情況取消當次課程,並全額退還報名費用。
  6. 如有企業或團體課程需求,歡迎直接來信洽詢。

聽聽看同學怎麼說