行動第一! 使用Bootstrap建立響應式網站!
5.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
27 students enrolled
Wishlisted Wishlist

Please confirm that you want to add 行動第一! 使用Bootstrap建立響應式網站! to your Wishlist.

Add to Wishlist

行動第一! 使用Bootstrap建立響應式網站!

羨慕別人也有響應式的網站嗎?你知道一般人超過60%以上的上網時間都是在手機上嗎? 利用Bootstrap 可以讓您快速的完成響應式的網站。本課程更進一步的教您如何客製化Bootstrap,讓您的網站不會永遠像是樣品!
5.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
27 students enrolled
Last updated 8/2017
Traditional Chinese
Price: $95
30-Day Money-Back Guarantee
Includes:
  • 15 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 學會如何使用Bootstrap 3 快速製作出同時符合電腦, 手機, 平板的網站
  • 了解Bootstrap原理有能力修改預設版型至符合設計師的規劃
  • 利用Sass 做開發與管理,進一步提升職場的戰力
  • 與Sketch和Zeplin等網站設計程式一起作業的能力
View Curriculum
Requirements
  • 知道什麼是瀏覽器,什麼是網站
  • 使用過HTML / CSS / Javascript
  • 使用過jQuery
  • 知道電腦, 手機與平板螢幕大小不同
  • 有一台電腦
Description

學會如何使用Bootstrap 3 快速製作出同時符合電腦, 手機, 平板的網站,
並且了解Bootstrap原理有能力修改預設版型至符合設計師的規劃。
更加一步利用Sass 做開發與管理,進一步提升您的戰力。


課程特點

1. 學習Bootstrap 元件

2. 了解Responsive 

3. 學會快速開發技巧 

4. 學習使用前端工具Sass

5. 學會jQuery 與 Bootstrap的混合實作產生新功能。

Who is the target audience?
  • 想要學習架設響應式網站的人
  • 想要學習Bootstrap 3
  • 想要一次架設好適合手機、平板、筆電的網頁
  • 已經會基礎的HTML / CSS / JavaScript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
68 Lectures
15:13:44
+
元件使用與實作範例
19 Lectures 05:08:01



兩種下拉式選單於導覽條Nav bar與其差異(Dropdown, Collapse)
13:06

導覽條將漢堡圖示(Hamburger Icon)放到左邊
12:47

客製化頁底(Footer)
20:38

向量圖示介紹(glyphs and font awesome)
23:05

卡片型元件(Thumbnail) 以及 按鈕與標籤
19:04

頁籤型元件(tabs and pills)
10:02

Table - 表格介紹
09:49

Modal - 彈跳視窗與其運用
33:39

Form - 表單介紹
26:01

比List更好用的Media object介紹
10:54

圖片輪播 Carousel
25:54

圖片固定比例與影片嵌入(Responsive embed)
15:59

Float 相關元件(pull-right, pull-left and clearfix)
05:04

列表 (List Group)
08:52

Grid System 排序
08:37

進度條實作(Progress bars)
13:56
+
較簡易的元件介紹
7 Lectures 01:02:26

導覽列(麵包屑) Bread crumbs
12:16

分頁 Pagination & pager
09:48

滿版屏幕與頁頭(Jumbotron & Page Header)
04:15

警告與面板 (alert & panel)
06:17

顯示、隱藏 ( hidden-* visible-* )
12:35

+
Bootstrap 與 jQuery
8 Lectures 01:59:27


dropdown 與 jQuery 版本陷阱
16:52

初始化與解決套件衝突
11:41

滑入顯示提醒 (tooltips)
10:21

點擊顯示提醒 (popover)
06:41

滾動追蹤 (scrollspy)
21:19

滾動鎖定標題(affix)
21:25
+
如何使用Sass
12 Lectures 01:50:19


使用Node.js 指令集編譯Sass
12:51


導入(import),合併Css檔
06:56

Sass變數介紹(variables)
04:54

Sass函數與使用(@mixin and @include)
06:34

變數數學運算(variables)
07:03

條件判斷(if & else)
05:32

陣列與鍵值存儲(list and map)
09:27

迴圈(While, for, each loop)
15:21

程式整理優化(&元素、@media)
07:49
+
如何使用Sass設定Bootstrap 3
10 Lectures 01:31:54


格狀系統 Grid system
16:29

Grid col-* 與 navbar 顯示漢堡圖示斷點
13:21

導覽條 Navbar
11:11

固定比例 Responsive embed
03:19

表格 table
09:53

按鈕與標籤
06:45

圖片輪播 Carousel
12:34

圖片輪播 Carousel js
06:16
+
完整網站範例
10 Lectures 03:22:44


設定背景
18:24

客製化導覽條
11:43

標題旋轉盤
31:47

前後排版交換與滑入動畫
29:02

巢狀格狀系統(Grid System)與隱藏區塊
17:39

Footer頁尾
29:04

隱藏半面手機區塊
24:38

手機轉向區塊
21:33
About the Instructor
進度條 ProgressBar
5.0 Average rating
2 Reviews
27 Students
1 Course
線上課程

我們不浪費您的時間,只教您所需的重點!

Google工程師年薪至少10萬美金,Google等級的開發方式真的適合新創事業嗎?

200小時課程看似經濟實惠,卻等於花您一個月的時間機會成本。

不同的科技大多建立在同樣的觀念上,建議不妨帶著既有的知識學習程式,用您能理解的方式吸收。

無論是否同意我們的理念,或單純對課程大綱有興趣,歡迎您訂閱我們的課程。