More Related Content
Similar to Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Similar to Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介 (20)
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
- 21. 文件
網站
HTTP://JQUERYMOBILE.COM/DEMOS/1.1.0/
- 22. Define
<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>
- 23. Body
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>The content</p>
</div><!-- /content -->
<div data-role="footer">
<h4>The Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
- 24. Body with theme
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>The content</p>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>The Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
- 26. Order List
<div data-role="content">
<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><!-- /content -->
- 27. 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><!-- /footer -->
- 28. ICONS
網站
HTTP://JQUERYMOBILE.COM/TEST/DOCS/BUTTONS/BUTTONS-ICONS.HTML
- 34. 自行訂製
網站
HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
- 35. 文件
網站
HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/SCAFFOLDING.HTML
- 39. Define
<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"/>
<link rel="stylesheet" media="screen"
href="css/bootstrap-responsive.min.css"/>
<script src="js/bootstrap.min.js" type="text/javascript"></
script>
</head>
- 40. Responsive Design
<head>
<title>Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" media="screen"
href="bootstrap.min.css"/>
<link rel="stylesheet" media="screen"
href="bootstrap-responsive.min.css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
</head>
- 41. 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>
配置
- 42. Navigation Bar
<body data-offset="50">
<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>
...
- 43. with icon
<body data-offset="50">
<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>
- 44. ICONS
網站
HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/BASE-CSS.HTML#ICONS
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- &#x7528;&#x76F8;&#x540C;UI Framework, &#x7528;&#x540C;&#x6A23;&#x65B9;&#x5F0F;&#x6E9D;&#x901A;\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- syntax highlight\nhttp://tohtml.com/xml/\n