• 課程時長

    13 小時 2 分

  • 課程級別

    初級

  • 授課語言

    中文

這堂課你將會學到

  • Bootstrap 3 升級至 Bootstrap 4
  • Bootstrap 4 業界實務應用，以及操作技巧
  • 深入 Bootstrap 原理講解，淺出正確觀念
  • Bootstrap 3 與 Bootstrap 4 差異講解
  • 使用 Bootstrap 4 建立響應式網站
  • 最新 Bootstrap 4 革新技能

章節目錄

  • 1

    第 1 章 Bootstrap 快速入門

    • 單元 1 - 你真的了解RWD響應式網頁嗎?

    • 單元 2 - 有其他的RWD框架嗎? 為什麼要選 Bootstrap ?

    • 單元 3 - Bootstrap的起手式

    • 單元 4 - CDN的說明與應用

    • 單元 5 - 響應式的meta標籤說明與html lang設定

    • 單元 6 - Bootstrap 4 支援的瀏覽器版本

    • 單元 7 - IE 9 支援的CSS屬性與設定meta兼容模式
  • 2

    第 2 章 Bootstrap 4 的排版應用技巧

    • 單元 1 - 容器的應用:container與container-fluid

    • 單元 2 - 響應式分界點的介紹

    • 單元 3 - 列與欄的運作:row和col的設定、 響應式圖片的應用

    • 單元 4 - Grid system 12欄網格系統如何運作?

    • 單元 5 - 了解響應式的col尺寸分類

    • 單元 6 - 欄區塊col的實務操作，與巢狀、間距設定

    • 單元 7 - row和col的對齊說明與設定

    • 單元 8 - col的左右位置變化說明與應用

    • 單元 9 - 各裝置尺寸的排版練習
  • 3

    第 3 章 Bootstrap 4 一頁式網站的內容應用技巧

    • 單元 1 - 自訂標題、凸顯標題、凸顯段落、引用來源

    • 單元 2 - 響應式文字排版

    • 單元 3 - 程式碼標示說明

    • 單元 4 - 響應式圖片應用

    • 單元 5 - 表格的基本設定

    • 單元 6 - 表格的應用

    • 單元 7 - 產品圖的使用
  • 4

    第 4 章 Bootstrap 4 一頁式網站的元件應用技巧(一)

    • 單元 1 - 導覽列的說明

    • 單元 2 - 導覽列的應用

    • 單元 3 - banner輪播的控制

    • 單元 4 - banner輪播的方法

    • 單元 5 - 表單的基礎介紹

    • 單元 6 - 表單的進階運用

    • 單元 7 - 自訂表單功能

    • 單元 8 - 表單驗證
  • 5

    第 5 章 Bootstrap 4 一頁式網站的元件應用技巧(二)

    • 單元 1 - 進度條的應用

    • 單元 2 - 廣告屏幕的應用

    • 單元 3 - 列表群組的控制說明

    • 單元 4 - 列表群組的方法應用

    • 單元 5 - 摺疊區塊的說明

    • 單元 6 - 摺疊區塊的用法

    • 單元 7 - 滑鼠滾動監聽的資料屬性應用

    • 單元 8 - 滑鼠滾動監聽的javascript應用
  • 6

    第 6 章 一頁式網站美化與其他彩蛋功能設定

    • 單元 1 - 彩蛋功能一:導覽列選單字體美化設定(google web font)、背景顏色變換

    • 單元 2 - 廣告圖片輪播文字與設定

    • 單元 3 - 關於我們區塊(一)調整與設定

    • 單元 4 - 關於我們區塊(二)調整與設定

    • 單元 5 - 環境介紹區塊與菜單介紹區塊調整與設定

    • 單元 6 - 我們的堅持、主廚介紹與聯絡我們調整

    • 單元 7 - 彩蛋功能二：導覽列選單按鈕連結監控滑動(scrollspy smooth )

    • 單元 8 - 彩蛋功能三：滑動回到頁首按鈕(gotop)

    • 單元 9 - bootstrap4 通用類別-display說明, 導覽列調整

    • 單元 10 - 版面響應式斷點的調整(一)

    • 單元 11 - 版面響應式斷點的調整(二) - 通用類別 display應用

    • 單元 12 - 版面響應式斷點的調整(三)

    • 單元 13 - 一頁式網站完成檔
  • 7

    第 7 章 Bootstrap 4 電商網頁的元件與通用類別應用(一) ： 頭部區

    • 單元 1 - 頁面頭部區塊製作

    • 單元 2 - 頁面頭部區塊設定

    • 單元 3 - 頁面導覽列選單製作

    • 單元 4 - 頁面導覽列搜尋購物車圖示製作

    • 單元 5 - 下拉選單的類型說明

    • 單元 6 - 頁面導覽列下拉選單應用

    • 單元 7 - input群組控制說明

    • 單元 8 - 導覽列搜尋功能應用
  • 8

    第 8 章 Bootstrap 4 電商網頁的元件與通用類別應用(二) : 內容區

    • 單元 1 - 服務說明區塊的製作

    • 單元 2 - 通用類別：服務區塊的邊框應用

    • 單元 3 - 卡片的介紹

    • 單元 4 - 卡片的應用-特色商品區塊

    • 單元 5 - 通用類別:float的說明與應用

    • 單元 6 - 通用類別:間隔 (Spacing)、Clearfix的說明與應用

    • 單元 7 - 標籤的應用

    • 單元 8 - 導覽(Navs)的說明

    • 單元 9 - 商品分類區塊：導覽(Navs)的應用
  • 9

    第 9 章 Bootstrap 4 電商網頁的元件與通用類別應用(三) : 內容區

    • 單元 1 - 互動視窗 (Modal)的說明

    • 單元 2 - 互動視窗 (Modal)的應用

    • 單元 3 - 文字排版：縮寫、列表、行內和描述型列表對齊說明

    • 單元 4 - 工具提示框 (Tooltips)說明與應用

    • 單元 5 - 彈出提示框(Popovers)

    • 單元 6 - 通用類別：顏色的說明、崁入的應用

    • 單元 7 - 通用類別：圖片取代、螢幕閱讀器的應用

    • 單元 8 - 訂閱電子報的區塊製作

    • 單元 9 - 警報 (Alerts)的說明與應用

    • 單元 10 - Flex的說明

    • 單元 11 - 練習：footer區塊製作
  • 10

    第 10 章 Bootstrap 4 電商網頁的元件與通用類別應用(四) : 商品列表頁

    • 單元 1 - 麵包屑的應用

    • 單元 2 - 按鈕、按鈕群組、分頁的應用

    • 單元 3 - 練習：產品列表頁套用導覽(Nav)

    • 單元 4 - 媒體物件的介紹

    • 單元 5 - 通用類別：尺寸、文字的介紹

    • 單元 6 - 垂直對齊、可視性和關閉圖示的介紹

    • 單元 7 - 練習：電商網頁響應式的調整
  • 11

    第 11 章 Bootstrap 4 V.S Bootstrap 3

    • 單元 1 - 斷點的調整、重新設計類別綴詞、自動平均分配欄寬

    • 單元 2 - 加入換行、移除預設距離( no-gutter)

    • 單元 3 - 水平方向的對齊、垂直方向的對齊

    • 單元 4 - 區塊的排列順序、圖片響應化

    • 單元 5 - card組件取代.panel、.well 與 .thumbnail