Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介

Developer 也可以做出漂
亮網站
Twitter Bootstrap/jQuery Mobile 簡介

Developer 為什麼要用
UI Framework？

老：
今天要的東西，昨天就要

嘴砲之外
技術規格
流程
UI
實現新功能
測試

Developer較擅長的
技術規格
流程
UI
實現新功能
測試

讓專業的來? (Designer)
技術規格
流程
UI
實現新功能
測試

不擅長UI？

自己做不好看
不會畫圖(img)
不會做圖示(icon)

UI Framework
讓Developer/Designer用同一套設計語言溝通

WEB開發(前端)

html + js +
css + img + icon

WEB開發-Developer向

html + js +
css + img + icon

WEB開發-Designer向

html + js +
css + img + icon

WEB開發-UI Framework

html + js +
css + img + icon

使用UI Framework

少做多得
專注流程與新功能（有價值的）
護肝早下班

少做多得

一樣用html+js
跨平台、 ��裝置
跨瀏覽器

想介紹的UI Framework
JQuery Mobile / Twitter Bootstrap

適用情境
jQuery Mobile：
列表型態的行動網頁/行動應用

Twitter Bootstrap：
面、平板、行動網頁

JQUERY MOBILE
網站

http://jquerymobile.com/

GALLERY
網站

HTTP://WWW.JQMGALLERY.COM/

CODIQA
網站

HTTP://WWW.CODIQA.COM/

文件
網站

HTTP://JQUERYMOBILE.COM/DEMOS/1.1.0/

Deﬁne

<head>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
</head>

Body
<div data-role="page">

<div data-role="header">
<h1>Title</h1>
</div>

<div data-role="content">
<p>The content</p>
</div>

<div data-role="footer">
<h4>The Footer</h4>
</div>
</div>

Body with theme
<div data-role="page" data-theme="c">

<div data-role="header" data-theme="b">
<h1>Title</h1>
</div>

<p>The content</p>
</div>

<div data-role="footer" data-theme="b">
<h4>The Footer</h4>
</div>
</div>

THEMEROLLER
網站

HTTP://JQUERYMOBILE.COM/THEMEROLLER/

Order List
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">Web Sites</li>
<li><a href="http://www.gasolin.idv.tw">gasolin</a></li>
<li><a href="http://letshow.me">LetShow</a></li>
</ul>
</div>

Navigation Bar
<div data-role="footer" data-theme="b">
<div data-role="navbar">
<ul>
<li>
<a href="#" data-icon="info" data-iconpos="top">Info</a>
</li><li>
<a href="#" data-icon="star" data-iconpos="top">Mark</a>
</li><li>
<a href="#" data-icon="gear" data-iconpos="top">Pref</a>
</li>
</ul>
</div>
</div>

ICONS
網站

HTTP://JQUERYMOBILE.COM/TEST/DOCS/BUTTONS/BUTTONS-ICONS.HTML

Tada!

REFERENCE HTTP://GOO.GL/NFVBZ

MOBISCROLL
網站

HTTP://MOBISCROLL.COM/

TWITTER BOOTSTRAP
網站

HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/

BUILT WITH BOOTSTRAP
網站

HTTP://BUILTWITHBOOTSTRAP.COM/

BOOTSWATCH
網站

HTTP://BOOTSWATCH.COM/

自行訂製
網站

HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/

文件
網站

HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/SCAFFOLDING.HTML

Deﬁne
<head>
<title>Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" media="screen"
href="css/bootstrap.min.css"/>
href="css/bootstrap-responsive.min.css"/>
<script src="js/bootstrap.min.js" type="text/javascript"></
script>
</head>

Responsive Design
<head>
<title>Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
href="bootstrap.min.css"/>
href="bootstrap-responsive.min.css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
</head>

Body (Grid) 面
<body data-offset="50">
<div id="row">
<div class="span3">
平板
<h3>Left</h3>
</div>
<div class="span9">
<h1>Main</h1> 手機
</div>
</div>
</body>

配置

Navigation Bar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">GTUG Taipei</a>
<ul class="nav">
<li><a href="/">gasolin</a></li>
<li class="active">
<a href="http://letshow.me">LetShow</a></li>
</ul>
</div>
</div>
</div>
...

with icon
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">GTUG Taipei</a>
<ul class="nav">
<li><a href="/">gasolin</a></li>
<li class="active">
<a href="http://letshow.me">
<i class="icon-headphones icon-white"></i> LetShow
</a></li>
</ul>
</div>
</div>
</div>

ICONS
網站

HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/BASE-CSS.HTML#ICONS

FONT AWESOME
網站

HTTP://FORTAWESOME.GITHUB.COM/FONT-

Live Demo

Hero Unit
Badge
Alerts
Plugins

THANKS!
JQuery Mobile / Twitter Bootstrap

Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介

More Related Content

Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介

Editor's Notes