Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

Bootstrap4 RWD網頁設計超 EASY

使用世界上最受歡迎的前端元件庫，建立響應式、行動優先的專案。

Created by景文鄭

Last updated 12/2019

Chinese (Traditional)

What you'll learn

快速且完整建置出2-3個 RWD 的形象網站首頁
Bootstrap 4 框架套用的技巧與設計
透過簡單易懂的實例練習，快速學會 Bootstrap 的應用
各種版型難不倒你，Bootstrap 4 讓你隨切隨用

Course content

6 sections • 37 lectures • 7h 12m total length

Bootstrap 4 介紹9:30
何謂Bootstrap 4 ，Bootstrap 4官網介紹，Bootstrap 4 範本套用

初始化與排版10:38
Bootstrap 4 基本的HTML標籤元素與樣式說明
圖片與圖文框6:40
圖片的rwd樣式，修改bs裡的css，樣式優先權設定
表格應用11:10
Bootstrap 4 表格與其樣式設定說明，表格的RWD設定
公共樣式導讀9:34
Bootstrap 4 邊框、圖片與多媒體的RWD設定，顯示與隱藏設定
使用 Icon圖標5:42
Bootstrap 4 的ICON圖示設定，免費ICON圖示網站介紹與套用，SublimeText的FontAwesome設定，SublimeText的Bootstrap ICON設定

認識格線系統 I10:20
網格編排的概念，裝置分界點介紹，Chrome跨載具測試方式，結合flex的對齊樣式
認識格線系統 II12:32
結合flex的對齊樣式，4.4版新增的clos樣式，重新排列，區塊推移，巢狀網格編排
購物網頁介面設計16:11
Bootstrap 4 編排雙欄式版型設計
首頁雙欄視覺大圖15:53
首頁雙欄視覺大圖，全螢幕背景，分欄設定，按鈕與欄位樣式
警告提示框與標籤及麵包屑5:22
Bootstrap 4警告提示框與標籤及麵包屑的樣式設定
按鈕群組與下拉選單8:20
按鈕與下拉選單介紹
卡片組件與列表群組13:17
卡片（card）樣式設定與調整
橫幅大圖輪播套用與修改11:55
Carousel輪播套件使用，語法介紹，自適應展示，滿版與留白，jq參數修改，Carousel輪播外觀樣式修改
摺疊面板與大屏幕8:29
摺疊面板與大屏幕
表單與輸入框8:47
表單元素與排列類型
彈出對話框與動態提示效果8:20
Madol，Tooltips，Popovers
導航選單9:06
Navs，Navbar 選單
其他元件5:45
分頁，列表分組，進度條，滑動監視
Flickr相片牆效果10:57
FLICKR相片牆樣式排列，網格編排，調整間距

Bootstrap4 實務設計 I12:29
選單樣式，滿版封面背景圖，置中標題樣式
Bootstrap4 實務設計 II13:59
卡片編排樣式，圖文分欄編排
Bootstrap4 實務設計 III17:04
RWD地圖與資訊對齊，表單欄位對齊編排，社群分享區塊樣式
Bootstrap4 實務設計 IV23:22
頁尾區塊樣式，手機版型樣式調整
Bootstrap4 單頁式作品集網站設計111:42
Bootstrap4 實務設計
Bootstrap4 單頁式作品集網站設計219:33
Bootstrap4 實務設計
Bootstrap4 作品集網站設計24:18
Bootstrap4 實務設計

Bootstrap4 實務延伸介紹117:07
Bootstrap4 實務設計
Bootstrap4 實務延伸介紹215:37
Bootstrap4 實務設計
Bootstrap4 實務延伸介紹3-I10:26
fa樣式設定，偽元素底線，分欄編排
Bootstrap4 實務延伸介紹3-II12:33
滑入灰階圖像切換色彩，社群分享按鈕編排，分欄編排
Bootstrap4 實務延伸介紹3-III11:05
content特殊代碼，位置重疊，分欄編排
Bootstrap4 實務延伸介紹4-I16:54
重疊版塊，分欄調整
Bootstrap4 實務延伸介紹4-II12:53
WOW動態效果，按鈕樣式
線上格線產生器3:48
線上格線產生器介紹

Requirements

具備基本的HTML、CSS概念為
了解一般編輯軟體（VS Code、SublimeText、Bracket等）為佳，本課程以SublimeText為主

Description

Bootstrap 是目前最受歡迎，也是最多人選用的 CSS 前端框架，但「框架」又能拿來做什麼呢？

所謂框架就是「可直接套用功能」的範本（或稱為模板、模組），不論是一般的常見的長形網頁，或是可符合不同尺寸的 RWD 網頁，Bootstrap 已經都替你設計好樣式與功能，只要選擇你想要的效果，即可快速幫你設計好所需的版型，或是建立常見的功能，像是常用的導覽選單、大圖輪播、圖文編排...等等。

Who this course is for:

想從事網頁前端設計的人
學習網頁設計相關科系的學生
想要製作專題作品的學生
轉職到前端視覺的設計人員
想增加收入，兼職接案的朋友
具有基礎網頁技能（HTML / CSS），想快速建立網站的朋友