Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
Download as key, pdf127 likes9,571 views
![[DCTPE2011] Drupal 6 的 CCK/Views運用--林振昇](https://cdn.slidesharecdn.com/ss_thumbnails/dctpe-2011-d6-views-cck-taxonomy-110804002716-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (19)
Viewers also liked (20)
Similar to Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介 (20)
More from Fred Lin (18)
Developer也可以做出漂亮網站 - Twitter Bootstrap/JQuery Mobile簡介
- 1. Developer 也可以做出漂 亮網站 Twitter Bootstrap/jQuery Mobile 簡介
- 3. 老 ： 今天要的東西，昨天就要
- 4. os： 嘴砲完!=做好了
- 10. WEB開發(前端) html + js + css + img + icon
- 11. WEB開發-Developer向 html + js + css + img + icon
- 12. WEB開發-Designer向 html + js + css + img + icon
- 13. WEB開發-UI Framework html + js + css + img + icon
- 16. 想介紹的UI Framework JQuery Mobile / Twitter Bootstrap
- 17. 適用情境 jQuery Mobile： 列表型態的行動網頁/行動應用 Twitter Bootstrap： 面、平板、行動網頁
- 18. JQUERY MOBILE 網站 http://jquerymobile.com/
- 19. GALLERY 網站 HTTP://WWW.JQMGALLERY.COM/
- 20. CODIQA 網站 HTTP://WWW.CODIQA.COM/
- 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 -->
- 25. THEMEROLLER 網站 HTTP://JQUERYMOBILE.COM/THEMEROLLER/
- 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
- 30. MOBISCROLL 網站 HTTP://MOBISCROLL.COM/
- 31. TWITTER BOOTSTRAP 網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
- 32. BUILT WITH BOOTSTRAP 網站 HTTP://BUILTWITHBOOTSTRAP.COM/
- 33. BOOTSWATCH 網站 HTTP://BOOTSWATCH.COM/
- 34. 自行訂製 網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
- 35. 文件 網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/SCAFFOLDING.HTML
- 36. 螢模式 網站
- 37. 平板模式 網站
- 38. 手機模式 網站
- 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
- 45. FONT AWESOME 網站 HTTP://FORTAWESOME.GITHUB.COM/FONT-
- 47. THANKS! JQuery Mobile / Twitter Bootstrap
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: &#x7528;&#x76F8;&#x540C;UI Framework, &#x7528;&#x540C;&#x6A23;&#x65B9;&#x5F0F;&#x6E9D;&#x901A;\n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: syntax highlight\nhttp://tohtml.com/xml/\n