課程名稱：八屏一雲時代來臨教你HTML5六小時打通(2)

講師：Jollen Chen <[email protected]>Blog：http://www.jollen.org/blog課程：http://www.moko365.com

課程專案：鴻海科技集團贊助課程課程名稱：⼋八屏⼀一雲時代來臨教你HTML5六⼩小時打通關(2)課程⽇日期：2013/1/24 (四)課程時間：10:00~17:00講義版本：v1.3.0

八屏一雲時代來臨教你HTML5六小時打通關(2)

Copyright (C) 2013 Moko365 Inc. All Rights Reserved.

本教材由仕橙3G教室製作與維護

1

http://www.moko365.com/enterprise/html5-app-javascript-frontend

2

《⼋八屏⼀一雲時代來臨教你HTML5六⼩小時打通關》


LICENSE NOTICEThis work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.

You are free:• to Share — to copy, distribute and transmit the work• to make commercial use of the work

Under the following conditions:• Attribution — You must attribute the work in the manner specified by the author or licensor (but not in any

way that suggests that they endorse you or your use of the work).• No Derivative Works — You may not alter, transform, or build upon this work.

With the understanding that:

• Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.• Public Domain — Where the work or any of its elements is in the public domain under applicable law, that

status is in no way affected by the license.• Other Rights — In no way are any of the following rights affected by the license:◦ Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;◦ The author's moral rights;◦ Rights other persons may have either in the work itself or in how the work is used, such as publicity or

privacy rights.• Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The

best way to do this is with a link to this web page.

3



使用 JavaScript 製作動畫：使用 GreenSock

4



GreenSock

5



GSAPGreenSock Animation Platform (GSAP)

使⽤用 JavaScript

6



Tool SuiteTweenLite

TweenMax

TimelineLite

TimelineMax

7



Crazy Fast

8



關於 JavaScript 效能在上⼀一堂課所介紹的觀念，效能由瀏覽器引擎的品質決定

在多媒體應⽤用⽅方⾯面，好的 Browser engine + 好的 JavaScript animation library，開始有能⼒力取代傳統的 Native 實作⽅方法

9



使⽤用 GSAP官⽅方⼊入⾨門教學

➡ http://www.greensock.com/jump-start-js/

可單獨執⾏行

➡ 無須搭配其它 JavaScript 平臺 (eg. jQuery)

可與 jQuery 搭配使⽤用

➡ 建議只將 jQuery 做為 selector

➡ 不使⽤用 jQuery 的 animation 功能

10



使⽤用 TweenLite

<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script><script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>

11



第⼀一個 GSAP 程式 (TweenLite)logo 元素將以 1 秒的時間，擁有⼀一個 CSS property {left:632px}

<script>window.onload = function(){ var logo = document.getElementById("logo"); TweenLite.to(logo, 1, {css:{left:"632px"}});}</script>

Source: http://www.greensock.com

tween

12



TweenLite.to()

TweenLite.to( [target object], [duration in seconds], [destination values] )


13



Scale & Opacity<div id="demo"> <div class="box" id="red"></div> <div class="box" id="yellow"></div> <div class="box" id="green"></div></div>

var red = document.getElementById("red"), yellow = document.getElementById("yellow"), green = document.getElementById("green"); TweenLite.to([red, yellow, green], 1, {css:{scale:0.2, opacity:0.3}});

(JavaScript array)


14



Use jQuery Selector<div id="demo"> <div class="box" id="red"></div> <div class="box" id="yellow"></div> <div class="box" id="green"></div></div>

var red = document.getElementById("red"), yellow = document.getElementById("yellow"), green = document.getElementById("green"); TweenLite.to($(".box"), 1, {css:{scale:0.2, opacity:0.3}});

jQuery Selector


15



Event CallbacksonStart

onUpdate

onComplete

onReverse

onReverseComplete


16



Use Event Callbacks

var logo = document.getElementById("logo"), updateOutput = document.getElementById("updateOutput"), completeOutput = document.getElementById("completeOutput"), updateCount = 0; TweenLite.to(logo, 2, {css:{left:"300px"}, onUpdate:updateHandler, onComplete:completeHandler, onCompleteParams:["animation complete!"]}); function updateHandler() { updateCount++; updateOutput.innerHTML = "onUpdate fired " + updateCount; } function completeHandler(message) { completeOutput.innerHTML = "onComplete fired <br/> completeParams = " + message; }


17



Control Playbackplay(), play(5)

pause()

resume()

reverse(), reverse(1)

seek(), seek(3)

timeScale(), timeScale(0.5), timeScale(2)

restart()


18



使⽤用 EasePack

<script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script>

<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script><script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>


19



Call restart() Method

var logo = document.getElementById("logo"), restartBtn = document.getElementById("restartBtn"), tween = TweenLite.to(logo, 1, {css:{left:"632px"}}); restartBtn.onclick = function() { tween.restart(); }

<div id="demo"> <div id="logo"></div></div><input type="button" id="restartBtn" value="restart animation">


20



TweenMax從 TweenLite 升級到 TweenMax

更多的 Animation 功能

並⽀支援許多 plugins

➡ CSSPlugin

➡ BezierPlugin

➡ RoundPropsPlugin


21



使⽤用 TweenMax



<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>

var logo = document.getElementById("logo"); TweenMax.to(logo, 1, {css:{left:"300px"}, repeat:3, yoyo:true});

set repeat Tween will smoothly reverse directioneach time it repeats


22



使⽤用 StaggerstaggerTo()

staggerFrom()


23



Call staggerTo() Method<div id="demo"> <div class="box" id="red"></div> <div class="box" id="yellow"></div> <div class="box" id="green"></div> <div class="box" id="blue"></div> <div class="box" id="pink"></div> <div class="box" id="purple"></div></div>

var red = document.getElementById("red"), yellow = document.getElementById("yellow"), green = document.getElementById("green"), blue = document.getElementById("blue"), pink = document.getElementById("pink"), purple = document.getElementById("purple"); //The last parameter with value of .25 is the stagger amount. Try changing it to 1 see how it impacts the animation. TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1, {css:{scale:0.2, opacity:0.3}}, 0.25);

The fourth parameter called stagger sets the amount of time that will transpire between the start of each animation.


24



TimelineLite建⽴立⼀一系列的動畫效果 (animation sequences)

使⽤用 TimelineLite 的實例來儲存多個動畫 ( thousands of animations)

將多個動畫群組化 (group)

並視為 single tween 來控制

可將 playback control 使⽤用於 Timeline 群組

25



實例化 TimelineLite<script>$(window).load(function() { var logo = $("#logo"), timelineLite = $("#timelinelite"), tagline = $("#tagline span"), restartBtn = $("#restartBtn"), tl = new TimelineLite(); // Timeline 的實例化 tl.from(logo, 0.5, {css:{left:"-=60px"}, ease:Back.easeOut}) .from(timelinelite, 0.5, {css:{width:"0px", alpha:0}}, -0.02) .staggerFrom(tagline, 0.5, {css:{top:"-=30px", rotation:"-40deg", alpha:0, scale:1.8}, ease:Back.easeOut}, 0.2); restartBtn.click(function() { tl.restart(); }); //show the demoBackground div after DOM is ready and all images loaded TweenLite.set($("#demoBackground"), {css:{visibility:"visible"}});}); </script>

26



使⽤用 TimelineLite Lables加⼊入 lables 以做為導覽列 (navigation)

tl.append("skew") // adds a new label .append(getSkewAnimation()) // method returns a TimelineLite instance that gets nested at the end .append(getStaggerAnimation(), "stagger") //creates new label and adds animation there .append(getParticlesAnimation(), "particles")

27



TimelineMax如同 TweenLite 與 TweenMax 的關係

TimelineMax 可⽀支援

➡ set repeat

➡ yoyo

➡ currentLabel()

➡ getLabelAfter()

➡ getLablesArray()

➡ tweenFromTo()

28



多屏 Layout & CSS 定義：Adaptive CSS Framework

29



Less Framework 4

30



課程回顧

31



adapt.js前次課程使⽤用

替代 CSS Media Query

➡ 有瀏覽器相容性問題

Less Framework 4 是⽐比 adapt.js 更重量級的⼯工具

32



使⽤用 adapt.js <script> var ADAPT_CONFIG = { path: 'css/',

dynamic: true,

range: [ '0px to 480px = 480.css', '480px to 600px = 600.css', '600px to 720px = 720.css', '720px to 800px = 800.css' ] }; </script> <script src="./adapt.js"></script>

33



認識 Less Framework 4CSS grid system

For designing adaptive websites

4 layouts

3 sets of typography presets

基於 Media Query 技術

Permissive license (MIT license)

⽀支援 Retina Media Query *

Source: http://lessframework.com

34



4 Layouts


35



使⽤用 Less Framework 4


36



技術⾯面有對基礎的 element 做 reset

➡ html, body, div, span ...

沒有對不同的瀏覽器與裝置做 “base”

➡ 請參考第⼀一堂課介紹

➡ Cross browser and cross devices

使⽤用 “px” 較不合適

➡ 請參考第⼀一堂課介紹

➡ 改⽤用 “rem” 等較合適的單位

37



技術細節：使⽤用 Media Query/* Wide Mobile Layout: 480px. Gutters: 24px. Outer margins: 22px. Inherits styles from: Default Layout, Mobile Layout.------------------------------------------------------------cols 1 2 3 4 5px 68 160 252 344 436 */

@media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; padding: 36px 22px 48px; } }

38



技術細節：Retina Media Query

/* Retina media query. Overrides styles for devices with a device-pixel-ratio of 2+, such as iPhone 4.----------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { body { }

39



總結使⽤用 Media Query 做為⼋八屏的基本技術

不需從新寫起，但要了解其原理 (第⼀一堂課)

使⽤用現有的 UI Framework (如 Less Framework 4)

以 Less Framework 4 為例，有些⼋八屏 (cross devices) 的技術細節未考慮到

40



Less+ Framework

Source: http://www.angrycreative.se/wordpress/plugins/less-framework/

41



簡介 Less+ FrameworkLess+ Framework is a cross-device CSS grid system using media queries

Less Framework 4 的⼀一個擴充插件

改⽤用 jQuery Media Query

➡ 取代 CSS Media Query

➡ 以克服課堂所提的問題

同樣有對基礎的 element 做 “reset”

42



使⽤用 Less+ Framework  <link rel="stylesheet" href="reset.css" media="all" /> <link rel="stylesheet" href="fonts.css" media="all" /> <link rel="stylesheet" href="style.css" media="all" />  <link rel="stylesheet" href="10col.css" media="all" />  <link rel="stylesheet" href="10col.css" media="only screen and (min-width: 992px)" /> <link rel="stylesheet" href="8col.css" media="only screen and (min-width: 768px) and (max-width: 991px)" /> <link rel="stylesheet" href="3col.css" media="only screen and (max-width: 767px)" /> <link rel="stylesheet" href="5col.css" media="only screen and (min-width: 480px) and (max-width: 767px)" />Source: http://www.angrycreative.se/wordpress/plugins/less-framework/

43



總結“reset” + “base” 將成為 cross device 的重要技術

⼤大部份 UI Framework 都會進⾏行 “reset”

“base” 部份⺫⽬目前仍需由開發者⾃自⾏行處理

Cross device (⼋八屏) 的技術關鍵

➡ cross-device CSS grid system

44



Feature Detection & yepnope 載入器

45



⺫⽬目的負責實作 HTML5 標準的是瀏覽器

我們所製作的 HTML5 應⽤用程式會使⽤用到許多 HTML5 特⾊色

檢查⺫⽬目的瀏覽器是否⽀支援這些特⾊色 (features)

46



例如：WebSocket 的⽀支援性請參考 http://en.wikipedia.org/wiki/WebSocket

47



主要瀏覽器的 WebSocket ⽀支援Firefox 6 以後

Google Chrome 14 以後

Internet Explorer 10 Developer Preview 以後

Opera 11 以後⽀支援舊版 WebSocket 實作

Safari 5 以後⽀支援舊版 WebSocket 實作

iOS 4.2 以後⽀支援舊版 WebSocket 實作

Android 4.x 內建瀏覽器不⽀支援 WebSocket

48



使⽤用 yepnope Loader

49



關於 yepnope LoaderAn asynchronous conditional resource loader

Super-fast

Allows you to load only the scripts that your users need

➡ Load on demand

以⾮非同步⽅方式載⼊入 Javascript 或其它 resource，可增強 usability

Yep - yes, has, ok

Nope - no, doesn’t has, not ok

See more: http://yepnopejs.com

50



使⽤用 Modernizr

51



關於 Modernizr可協助開發者進⾏行 feature detection

可客製化 Javascript library

包含 yepnope loader

52



使⽤用 modernizr Library

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>A HTML5 Page</title><script src="modernizr.min.js"></script></head> <body>...</body> </html>

53



是否⽀支援 Canvas<!DOCTYPE html> <html><head><meta charset="utf-8"><title>A HTML5 Page</title><script src="modernizr.min.js"></script></head> <body><script>if (Modernizr.canvas) { alert("Your browser supports Canvas");} else { alert("Oh my god. Your need a good browser!");}</script></body> </html>

54



檢查 LocalStorage

if (Modernizr.localstorage) { // Good} else { // No good}

55



是否⽀支援 Web Workers

if (Modernizr.webworkers) { // Good} else { // No good}

56



Application Cache

if (Modernizr.applicationcache) { // Good} else { // No good}

57



Touch Events檢查瀏覽器是否⽀支援 touch event

➡ if (Modernizr.touch)

58



使⽤用 yepnode Loader不要使⽤用 <script> 來載⼊入 JavaScript

<head> <meta charset="utf-8"> <title>NO Game</title> <script src="modernizr.min.js"></script> <script src="loader.js"></script> ...</head>

59



使⽤用 ‘yepnope’ Loader

10 window.addEventListener("load", function() { 11 12 Modernizr.load([ 13 { 14 load : [ 15 "jquery.min.js", 16 "CSSPlugin.min.js", 17 "TweenLite.min.js" 18 ], 19 complete : function() { 20 start(); 21 } 22 } 23 ]); 24 25 }, false);

60



Sync and Async

12 Modernizr.load([ 13 { 14 load : [ 15 "jquery.min.js", 16 "CSSPlugin.min.js", 17 "TweenLite.min.js" 18 ], 19 complete : function() { 20 start(); 21 } 22 } 23 ]);

<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script><script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>

61



JavaScript 教學(2)

62



使⽤用 Local Storage

<textarea id="input"></textarea>

<script> var input = document.getElementById("input"); input.value = localStorage.getItem("mytext") || ""; input.addEventListener("keyup", function() { localStorage.setItem("mytext", input.value); }, false); </script>

63



使⽤用 Session Storage

<textarea id="input"></textarea>

<script>var input = document.getElementById("input");

input.value = sessionStorage.getItem("mytext") || "";

input.addEventListener("keyup", function() { sessionStorage.setItem("mytext", input.value);}, false);

</script>

64



關於 Web WorkersJavaScript threading

無法存取 DOM

可實作 “Message Handler”

不共⽤用資料

➡ 無法存取 Parent Thread 的資料

65



Web Worker 的⽤用法var worker = new Worker(“worker.js”);

worker.terminate();

worker.postMessage(“hello webworker”);

worker.onmessage(function(event) {});

➡ worker.addEventListener(“message”, function(event) {}, false);

See more: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html

66



Web Worker 範例：計算 Prime<p>The highest prime number is: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script>

// worker.js 1 var n = 1; 2 search: while (true) { 3 n += 1; 4 for (var i = 2; i <= Math.sqrt(n); i += 1) 5 if (n % i == 0) 6 continue search; 7 // found a prime! 8 postMessage(n); // Don’t use return 9 }

67



Prototype 的技術⾯面基於 JavaScript 的 Prototype 觀念

➡ JavaScript OO

直接在瀏覽器與 HTML DOM 裡⾯面加⼊入功能 (methods)

擴充 element 的原貌 (prototype)

與 jQuery pattern 有何不同？

➡ 延續第⼀一堂課

68



JavaScript 的 Prototype每個 JavaScript 物件都有⼀一個 “prototype” 屬性

JavaScript 引擎的實作並不提供 class 觀念

➡ 延續第⼀一堂課的觀念

➡ 使⽤用 function() 來表⽰示 class，再使⽤用 “new” 來取得 instance

➡ Constructor pattern 與 Factory method pattern

➡ 上述做法，class 並不具備 OOP (C++/Java) 的必要特性

因此，使⽤用 JavaScript 的 “prototype” 來模擬 class 的 OO 特性

69



Class 宣告 & Instance

function Person(name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };} var person = new Person("Jollen", "Software Developer");person.queryJob();

70



定義 Functional Object

var Person = function (name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };}; var jollen = new Person("Jollen", "Software Developer");

jollen.queryJob();

71



動態加⼊入新的 Methodvar Person = function (name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };};

Person.prototype.getName = function () { return this.name;}

var jollen = new Person("Jollen", "Software Developer");

jollen.queryJob(); // “Software Developer”jollen.getName(); // “Jollen”

72



改變的是 Prototype (Class)var Person = function (name, job) { this.name = name; this.job = job; this.queryJob = function() { alert(this.job); };};

var jollen = new Person("Jollen", "Software Developer");

// 順序交換不改變其結果Person.prototype.getName = function () { return this.name;}

jollen.queryJob(); // “Software Developer”jollen.getName(); // “Jollen”

73



什麼要學 JavaScript PrototypePrototype 改變的是 “base object”

DOM 裡有許多 Function Object (class)

➡ 如何改變其 base object ?

使⽤用 JavaScript “prototype” 屬性

更簡單 “extend DOM’ 的⽅方式

➡ 使⽤用 prototype.js

74



引⼊入 Prototype.js

See more: http://prototypejs.org

75



使⽤用 Prototype.js加⼊入 prototype.js

➡ JavaScript prototype library

<scriptsrc="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js></script>

76



關於 Prototype.jsPrototype provides functions to make HTML DOM programming easier

Like jQuery, Prototype has its $() function

The $() function accepts HTML DOM element id values (or DOM elements), and adds new functionality to DOM objects

Unlike jQuery, Prototype has no ready() method to take the place of window.onload(). Instead, Prototype adds extensions to the browser and the HTML DOM

See more: http://www.w3schools.com/js/js_lib_prototype.asp

77



Prototype.js 範例<div id="watch"></div><script>var w = document.getElementById("watch");w.setAttribute(); // OK. DOM Element 裡的 method

// Prototype.js 的官方範例var MyUtils = { truncate: function(element, length){ element = $(element); return element.update(element.innerHTML.truncate(length)); }, updateAndMark: function(element, html){ return $(element).update(html).addClassName('updated'); }}; Element.addMethods(MyUtils); // Prototype.js 擴充 DOM

$('watch').truncate(100); // OK. 使用 Prototype 擴充了 Element$('watch').helloWorld(); // OK.w.helloWorld(); // OK. 呼叫 DOM</script>

See more: http://prototypejs.org

See more: http://www.w3schools.com/dom/dom_element.asp

78



實作 Drag and Drop

79



關於 Drag and DropHTML5 的正式標準

可⽀支援任何的 Element

直接實作

或使⽤用 jQuery UI 更為⽅方便

➡ 可將任何 Element 設定為 Draggable

80



使⽤用 Drag and Drop 標籤屬性

<!DOCTYPE HTML><html><head></head><body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body></html>

Source: http://www.w3schools.com/html/html5_draganddrop.asp

(target)

“div1”

ondragover

ondrop

81



實作 Taget 的 onDrop() 事件<script>function allowDrop(ev){ ev.preventDefault();}

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

function drop(ev){ ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}</script>

Source: http://www.w3schools.com/html/html5_draganddrop.asp

prevent the browser default handling of the data (default is open as link on drop)(任何的 event callbacks 都有其 default 處理方式)

82



認識 jQuery 與 Javascript UI Framework

講師：Jack Sun

83



AgendaIntroduce jQuery

Concept

Hello jQuery

Examples

JavaScript UI Framework

Overview

Mobile Development

jQuery UI Examples

Sencha Touch UI Examples

84



Concept of jQueryClient side & Server side

85



Concept of jQueryJavaScript Foundations

HTML DOM – HTML Document Object Model

AJAX – Asynchronous JavaScript and XML

jQuery is the most popular

JavaScript library.

86



Hello jQueryWrite less, do more.

<script src=“http://code.jquery.com/jquery-latest.min.js”></script>

87



jQuery Examples<!doctype html><html><head> <meta charset=utf-8> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <style> .emphasis { font-weight: bold;} </style> <script> $(document).ready(function() { $('li:first-child').addClass('emphasis'); }); </script> </head><body><ul> <li>hello</li> <li>hello 2</li> <li>hello 3</li></ul></body></html>

88



JavaScript UI FrameworkWhat’s the different between…

jQuery

- Is a way to find stuff on a page and work with that stuff.

- Write less, do more, a JavaScript library.

jQuery UI

- Is a UI library that works with jQuery. (need jQuery)

jQuery Mobile

- Is a UI library for Mobile devices that works with jQuery as well. (need jQuery)

89



JavaScript UI FrameworkThe Alternatives for Mobile Development

Zepto (not fully support IE)

Xui

jqmobi / jqui

Use Cases :

jQuery + jQuery UI

jQuery + jQuery Mobile

Zepto/jQuery + jQTouch

jQuery/Zepto/Xui + Custom UI

Sencha Touch (commercial)

How about use all of these…

jQuery : 'libs/jquery/jquery-loader',Handlebars : 'libs/handlebars/handlebars-loader',Underscore : 'libs/underscore/underscore-loader',Backbone : 'libs/backbone/backbone-loader',WebSocket : 'libs/websocket-loader',order : 'libs/require/order-1.0.5',text : 'libs/require/text-1.0.7',domReady : 'libs/require/domReady-1.0.0',iScroll : 'libs/iscroll/iscroll-loader',PhoneGap : 'libs/phonegap/phonegap-loader',

90



如何應用 Bootstrap 製作 Responsive Website Design

91



AgendaIntroduce Bootstrap

What’s Bootstrap

File Structure

What’s Included

HTML Template

Example

Customize

Bootstrap Tutorial

92



Introduce BootstrapWhat’s Bootstrap

93



Introduce BootstrapFile Structure

94



Introduce BootstrapWhat’s included

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

95



Introduce BootstrapHTML Template

96



Introduce BootstrapExample

97



Introduce BootstrapCustomize

98



Bootstrap TutorialCreate a Responsive Design Blog using Bootstrap.

99

更多資訊請上 Go8Panel.com

100

Technology

課程名稱：八屏一雲時代來臨 教你HTML5六小時打通(2)

課程名稱：八屏一雲時代來臨教你HTML5六小時打通(2)