Bootstrap 4 網頁設計與應用

課程創作:鼻涕男孩

課程適合地區:全球

課程影片總長度: 2.9小時

上架日期:2019-1-29

分享課程:

課程介紹

想要快速地設計出網頁,真的有那麼難嗎?你是否遇到以下難題?

bootstrap basic Stephen
bootstrap basic Stephen
bootstrap basic Stephen

你為何要用 Bootstrap

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

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

bootstrap basic Stephen

加快網頁設計速度與品質

當你學會了 RWD 網站設計的基礎 - HTML 及 CSS 之後,在這個分秒必爭的社會裡,能夠快速並有效率的完成網站設計,並讓設計品質更能符合老闆或是客戶的期待,才能幫助你順利邁向加薪之路,或是有源源不絕接不完的 case。

bootstrap basic Stephen

課程特色

  • 用最快速易懂的方式,快速套用不同的設計效果到空白的網頁中
  • 了解常用的 Bootstrap 效果與設計技巧

對於不知道怎麼設計出網頁版型或是不同功能的你,趕緊跟著老師一起利用 Bootstrap 來快速設計網頁吧!

課程綱要

課程綱要如下,購買課程後可於「教材下載」區下載各單元講義教材。

單元 1 認識 Bootstrap
  • 1.1 Bootstrap 介紹
單元 2 「布局」導讀
  • 2.1 版型與分斷點概述
  • 2.2 媒體對象的使用
單元 3 「內容」導讀
  • 3.1 初始化與排版
  • 3.2 圖片與圖文框
  • 3.3 表格應用
  • 3.4 「公共樣式」導讀
  • 3.5 Icon 圖標使用
單元 4 格線系統與組件
  • 4.1 認識格線系統
  • 4.2 警告提示框與標籤及麵包屑
  • 4.3 按鈕群組與下拉選單
  • 4.4 卡片組件與列表群組
  • 4.5 橫幅大圖輪播
  • 4.6 輪播的按鈕樣式修改
  • 4.7 摺疊面板與大屏幕
  • 4.8 表單與輸入框
  • 4.9 彈出對話框與動態提示效果
  • 4.10 導航選單
  • 4.11 其他
  • 4.12 線上格線產生器

學員上課後會學到什麼或能做什麼

  • Bootstrap 4 套用的技巧與設計
  • 透過簡單易懂的實例練習,快速學會 Bootstrap 的應用

學員上課前需具備哪些軟、硬體設備或常識

  • 對網頁有興趣,並具備 HTML 及 CSS 基礎概念
  • 一台可連上網路的電腦,並已安裝 Sublime Text 文字編輯器

課程適合對象

  • 學習網頁設計相關科系的學生
  • 對於前端網頁設計工作有興趣的人
  • 想快速利用框架設計網頁的人

老師介紹

web frontend design instructor Stephen Photo
鼻涕男孩
經歷:
  • 創意家數位出版:腳本企劃、排版人員
  • 千華數位文化出版:編輯、多媒體、排版人員
  • 電腦書出版:企劃編輯、作者、as 3.0 程式範例
  • 傑森多媒體動畫程式設計
  • 聯成電腦 Office、Adobe、RWD 網頁設計講師
現任:
  • 巨匠電腦講師
  • 聖馬丁設計學苑講師

課程評語與問答