活動規劃

Bootstrap4 是後端的神兵利器，本課程特別針對後端開發人員規劃後端所需了解的應用內容，讓您不用深入學會 CSS 也能快速產出一個精美的網站畫面，Bootstrap 課程著重在觀念、實務、實作，讓您縱使不常切版也能快速產出精美的網站版面，不但能讓您了解 Bootstrap 的運作原理，也讓您學會如何快速撰寫容易維護的頁面方式，本課程著重在大量實作，肌肉學習是很重要的一件事，但放心，學完大家都不會變肌肉男的。💪

活動講師

Amos(李建杭)

擁有豐富業界與教學經驗，個人設有 CSS可樂與壞掉的印表機-設計、生活、態度 網站，擅長 User interface 設計與規劃、User interactive 設計與規劃、Bootstrap 極速網站建置、CSS3 從基礎到深入解析、CSS&HTML 撰寫/優化/講授、SEO 設計/規劃、網頁標籤語意規劃、photoshop影像合成、illustrator插畫設計。

 

講師經歷：

• 五倍紅寶石 講師
• 資策會(台北、中壢) 講師
• 亞馬勁雲科技前端工程師
• Alpha camp 講師
• 中科大業界專家課程 講師
• 致理技術學院業界專家 講師
• 元培醫事科技大學業界專家 講師
• 凌網科技視覺設計師
• 翔偉資安視覺設計師
• 航欣科技視覺設計師
• 大遠百美工
• 中興百貨美工
   

活動介紹

• 關於 CSS 與 HTML
  • 前後端人員的 HTML
  • 關於 CSS
  • CSS 快速入門
  • CSS 選取器與權重
• Bootstrap 介紹與準備
  • 尺寸與斷點
  • 裝置與尺寸
  • 檔案與方法
  • 快速了解 BS4 與 BS3 差異
• 格線與排版
  • 重點觀念
  • 格線撰寫規則
  • 格線偏移與排序
  • 格線應用規則
  • 定寬容器與滿版容器
  • 重要層級說明
  • 對齊控制
  • 卡片組件入門
  • 卡片組件應用實作
  • 版塊的顯示與隱藏
  • 範例版面實作
• 關於 Flex
  • 原理與語法規則
  • 應用觀念
  • 換行控制
  • 寬度控制
  • 對齊控制
  • 後端常見版面實作
• 版面共用組件
  • 距離控制
  • 邊框控制
  • 屬性控制
  • 對齊控制
  • 伸縮超連結區塊控制
  • 區塊尺寸控制
• 內容與表格控制
  • 頁面標題控制
  • 表格組件應用
  • 引用組件與應用
  • 清單設定與應用
  • 圖片 RWD 控制
  • 滿版螢幕組件
  • 進度條組件
  • 警告區塊
• 導覽相關組件
  • 導覽列製作
  • 導覽列修改方式
  • 麵包屑組件
  • 下拉選單製作
  • 清單群組組件
  • 分頁導覽組件
• 表單組件
  • 表單設定
  • 表單群組
  • 輸入群組
  • 表單修改技巧
  • 表單版面實作
• 按鈕組件
  • 按鈕設定方式
  • 按鈕色彩
  • 按鈕尺寸控制
  • 按鈕群組與設定
  • 按鈕於版面應用實作
• JavaScript 組件應用與修改
  • 輪播組件應用與設定
  • 摺疊組件應用與設定
  • Tooltip 組件與 popover 組件應用
  • 滑動組件
  • Ｍodal組件
  • Toasts組件
• 版面實作(視狀況補充與加碼項目)
  • 快速建置後臺版面
  • 網路資源
• 除錯與修正
  • 使用開發者工具方式
  • 手機ＲＷＤ測試方式

預期成果

• 了解前/後端人員使用 Bootstrap4 的差異
• 學會後端人員的 Bootstrap4 版面實作應用
• 學會 Bootstrap4 組件之間的搭配應用
• 了解 CSS 的撰寫方式與原理
• 了解 Bootstrap4 運作原理
• 了解 Bootstrap4 架構
• 學會正確的 Bootstrap4 使用觀念
• 學會如何修改  Bootstrap4 的 CSS
• 學會如何實作出一個版面

講者的話

大家好，我是 Amos，一個熱血的碼農與技術分享者， Bootstrap4 是目前全球超夯的 UI Framework，不管前端、後端都有大量使用者，對後端來說切版始終是個艱難的任務，有了 Bootstrap4 之後，你再也不用煩惱畫面被長官嫌棄了，本課程學完之後，你就能快速製作出一個精美專業且實用的網頁畫面，再也不用對切版感到苦手了。

注意事項

為避免清脆的鍵聲影響其他學員，誠摯的懇求您不要攜帶機械式鍵盤

為達快速切版目的，本課程會使用 Sublime 作為編輯器，需要用到以下外掛:

• emmet
• SublimeCodeIntel
• fakeimg

您也可以使用您習慣的編輯器來上課，但講師的操作示範會使用 Sublime 請您自行斟酌

對於 Sublime 有疑問者，可先觀看免費的線上影片 https://course.cool3c.com/p/sublime

還想知道什麼就留言吧