Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Developer 也可以做出漂亮網站Twitter Bootstrap/jQuery Mobile 簡介
Developer 為什麼要用UI Framework?
老   :今天要的東西,昨天就要
os:嘴砲完!=做好了
嘴砲之外技術規格流程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 Frameworkhtml + js +css + img + icon
使用UI Framework少做多得專注流程與新功能(有價值的)護肝早下班
少做多得一樣用html+js跨平台、 跨裝置跨瀏覽器
想介紹的UI FrameworkJQuery 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/
Define<head> <title>jQuery Mobile</title> <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /> <script src="jquery-...
Body<div data-role="page"> <div data-role="header"> <h1>Title</h1> </div><!-- /header --> <div data-role="content"> <p>The...
Body with theme<div data-role="page" data-theme="c"> <div data-role="header" data-theme="b"> <h1>Title</h1> </div><!-- /he...
THEMEROLLER網站     HTTP://JQUERYMOBILE.COM/THEMEROLLER/
Order List<div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c">   <li data-role="list-divid...
Navigation Bar<div data-role="footer" data-theme="b"> <div data-role="navbar">  <ul>   <li>   <a href="#" data-icon="info"...
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
螢模式網站
平板模式網站
手機模式網站
Define<head>  <title>Twitter Bootstrap</title>  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <li...
Responsive Design<head>  <title>Twitter Bootstrap</title>  <meta name="viewport" content="width=device-width, initial-scal...
Body (Grid)                    面<body data-offset="50"> <div id="row">  <div class="span3">                               ...
Navigation Bar<body data-offset="50"><div class="navbar navbar-fixed-top">  <div class="navbar-inner">    <div class="cont...
with icon<body data-offset="50"><div class="navbar navbar-fixed-top">  <div class="navbar-inner">    <div class="container...
ICONS網站     HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/BASE-CSS.HTML#ICONS
FONT AWESOME網站     HTTP://FORTAWESOME.GITHUB.COM/FONT-
Live DemoHero UnitBadgeAlertsPlugins
THANKS!JQuery Mobile / Twitter Bootstrap
Nächste SlideShare
Wird geladen in …5
×

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

25.157 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design, Technologie, Kunst & Fotos
  • Writing a good research paper isn't easy and it's the fruit of hard work. For help you can check writing expert. Check out, please ⇒ www.HelpWriting.net ⇐ I think they are the best
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Get the best essay, research papers or dissertations. from ⇒ www.HelpWriting.net ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F90ZZC ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  1. 1. Developer 也可以做出漂亮網站Twitter Bootstrap/jQuery Mobile 簡介
  2. 2. Developer 為什麼要用UI Framework?
  3. 3. 老 :今天要的東西,昨天就要
  4. 4. os:嘴砲完!=做好了
  5. 5. 嘴砲之外技術規格流程UI實現新功能測試
  6. 6. Developer較擅長的技術規格流程UI實現新功能測試
  7. 7. 讓專業的來? (Designer)技術規格流程UI實現新功能測試
  8. 8. 不擅長UI?自己做不好看不會畫圖(img)不會做圖示(icon)
  9. 9. UI Framework讓Developer/Designer用同一套設計語言溝通
  10. 10. WEB開發(前端)html + js +css + img + icon
  11. 11. WEB開發-Developer向html + js +css + img + icon
  12. 12. WEB開發-Designer向html + js +css + img + icon
  13. 13. WEB開發-UI Frameworkhtml + js +css + img + icon
  14. 14. 使用UI Framework少做多得專注流程與新功能(有價值的)護肝早下班
  15. 15. 少做多得一樣用html+js跨平台、 跨裝置跨瀏覽器
  16. 16. 想介紹的UI FrameworkJQuery Mobile / Twitter Bootstrap
  17. 17. 適用情境jQuery Mobile:列表型態的行動網頁/行動應用Twitter Bootstrap: 面、平板、行動網頁
  18. 18. JQUERY MOBILE網站 http://jquerymobile.com/
  19. 19. GALLERY網站 HTTP://WWW.JQMGALLERY.COM/
  20. 20. CODIQA網站 HTTP://WWW.CODIQA.COM/
  21. 21. 文件網站 HTTP://JQUERYMOBILE.COM/DEMOS/1.1.0/
  22. 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. 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. 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. 25. THEMEROLLER網站 HTTP://JQUERYMOBILE.COM/THEMEROLLER/
  26. 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. 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. 28. ICONS網站 HTTP://JQUERYMOBILE.COM/TEST/DOCS/BUTTONS/BUTTONS-ICONS.HTML
  29. 29. Tada!REFERENCE HTTP://GOO.GL/NFVBZ
  30. 30. MOBISCROLL網站 HTTP://MOBISCROLL.COM/
  31. 31. TWITTER BOOTSTRAP網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
  32. 32. BUILT WITH BOOTSTRAP網站 HTTP://BUILTWITHBOOTSTRAP.COM/
  33. 33. BOOTSWATCH網站 HTTP://BOOTSWATCH.COM/
  34. 34. 自行訂製網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/
  35. 35. 文件網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/SCAFFOLDING.HTML
  36. 36. 螢模式網站
  37. 37. 平板模式網站
  38. 38. 手機模式網站
  39. 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. 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. 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. 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. 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. 44. ICONS網站 HTTP://TWITTER.GITHUB.COM/BOOTSTRAP/BASE-CSS.HTML#ICONS
  45. 45. FONT AWESOME網站 HTTP://FORTAWESOME.GITHUB.COM/FONT-
  46. 46. Live DemoHero UnitBadgeAlertsPlugins
  47. 47. THANKS!JQuery Mobile / Twitter Bootstrap

×