Upgrade to Pro — share decks privately, control downloads, hide ads and more …

twitter bootstrap 好用的網頁設計框架

F8ca23da626499de4b476d7ccaf2950b?s=47 evenwu
August 19, 2012

twitter bootstrap 好用的網頁設計框架

25分鐘導覽

F8ca23da626499de4b476d7ccaf2950b?s=128

evenwu

August 19, 2012
Tweet

Transcript

  1. !FWFOXV Twitter Bootstrap ਒ᴟḑ⋣㏡⭴⭝ᐱᏌ

  2. !FWFOXV BCPVU × FWFOXVDPN

  3. !FWFOXV ։⿫ᛲ × غ፭̨᨟٨̨ⰥՀㇼܙ × ӓᴟՀㇼ̗⊈য়⬳ × 㕶㋟ჭᬝာ೺௡ӓʴⅳ̜਒ˮ9%

  4. !FWFOXV ખ⎙ × #PPUTUSBQዅ̍㞦 × ⯎ⓗᴟ × ာⓗ∭⬉ × ᴚཌྷࢎ

  5. !FWFOXV #PPUTUSBQ፼ × ᴨٴ₇ബᴟ⭴⭝ӎ̲⊓ٷ␽࿜ḑ⭴⭝ᐱᏌ

  6. None
  7. (SJETZTUFN 6UJMJUZ$MBTTJT 3FTQPOTJWF%FTJHO *DPO #VUUPOTUZMF 5ZQPHSBQIZ

  8. #BEHF㦇-BCFM /BW5BCCBS 1SPHSFTTCBS 8FMMCPY "MFSUCPY 5IVNCOBJMT +BWBTDSJQUQMVHJOT

  9. !FWFOXV #PPUTUSBQ፼σ㣈 × ჭᬝ≕⊶(SJETZTUFN × च൬#BTF$44 × ബᴟ⾞̲㡠UBC CVUUPOFUD ×

    ⇄ޡኴᴟ+BWBTDSJQUQMVHJOT K2VFSZ
  10. !FWFOXV × ṕլ⩮ඩ᝛Αᴟḑ⋣㏡⭴⭝ᐱᏌ

  11. !FWFOXV ⲅ▎ᷖ

  12. !FWFOXV <!DOCTYPE html> <html> <head> <link href="bootstrap.css" rel="stylesheet"> </head> <body>

    ... </body> </html> ㉊ᗡ
  13. !FWFOXV ⲅ▎ᷖ Ý ഇ₁ഴ

  14. !FWFOXV ØFWFO΅ٶˁٶ̵൝࿭⮇⭰ʸϷ㏴㎈㊻㢂Ù

  15. None
  16. !FWFOXV ØਉʸʿCPPUTUSBQ௰ਡݺ㡯Ù

  17. !FWFOXV ද℧ො͡᎓ͧ

  18. None
  19. !FWFOXV ⲅ▎ᷖ × ೸⁰ഥ Ý ⮇⭰ഴ

  20. None
  21. None
  22. !FWFOXV ⲅ▎ᷖ × ೸⁰ഥ × ⭴⭝ഥ Ý ⋴℄֟ͅ

  23. None
  24. None
  25. !FWFOXV ᷍☵ܞϞࢧⱑ

  26. None
  27. None
  28. None
  29. None
  30. !FWFOXV ʼnͦϨ઱Ŋ Ҁ⅁SFTQPOTJWFEFTJHO desktop tablet phone

  31. !FWFOXV ⲅ▎ᷖ × ೸⁰ഥ × ⭴⭝ഥ × ⋣⃳̸֑ Ý ʽ⑊څ΁㡯

  32. None
  33. None
  34. !FWFOXV պℑ วℑ ⮇⭰ ֟ͅ ⲅ▎ᷖ

  35. !FWFOXV უ▎⋤⯀

  36. None
  37. !FWFOXV უ▎⋤⯀ × HSJETZTUFN × OBWCBS × CVUUPO × MBCFMCBEHF

    × NPEBM KBWBTDSJQUQMVHJO
  38. !FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>

    </div> </div>
  39. !FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>

    </div> </div> .container
  40. !FWFOXV HSJETZTUFN .row <div class="container"> <div class="row"> <div class="span4">...</div> <div

    class="span8">...</div> </div> </div>
  41. !FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>

    </div> </div> .span8 .span4
  42. !FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>

    </div> </div> 20px 20px 20px 20px
  43. !FWFOXV OBWCBS

  44. !FWFOXV OBWCBS <div class="navbar"> <div class="navbar-inner"> <div class="container"> ... </div>

    </div> </div>
  45. !FWFOXV OBWCBS .navbar <div class="navbar"> <div class="navbar-inner"> <div class="container"> ...

    </div> </div> </div>
  46. !FWFOXV OBWCBS .navbar-inner 20px 20px <div class="navbar"> <div class="navbar-inner"> <div

    class="container"> ... </div> </div> </div>
  47. !FWFOXV OBWCBS <div class="navbar"> <div class="navbar-inner"> <div class="container"> ... </div>

    </div> </div> .container
  48. !FWFOXV <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> ... </div>

    </div> </div> OBWCBS
  49. !FWFOXV CVUUPO <a class="btn" href="">Default</a> CUO

  50. !FWFOXV CVUUPO <a class="btn btn-info" href="">Info</a>

  51. !FWFOXV CUOHSPVQ <div class="btn-group"> <button class="btn"> Left </button> <button class="btn">

    Middle </button> <button class="btn"> Right </button> </div>
  52. !FWFOXV CUOUPPMCBS <div class="btn-toolbar"> <div class="btn-group"> ... </div> </div>

  53. !FWFOXV ᣢሙ

  54. !FWFOXV CVUUPOESPQEPXO <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action

    <span class="caret"></span> </a> <ul class="dropdown-menu"> ... </ul> </div>
  55. !FWFOXV UBC <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li>

    <li><a href="#">Messages</a></li> </ul>
  56. !FWFOXV OBWMJTU <ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a

    href="#">Home</a></li> <li><a href="#">Library</a></li> <li>...</li> <li>...</li> <li>...</li> <li class="divider"></li> <li>...</li> </ul>
  57. !FWFOXV MBCFMCBEHF

  58. !FWFOXV MBCFMCBEHF

  59. !FWFOXV ᣢሙ <span class="badge pull-right">1</span>

  60. !FWFOXV ᣢሙ position: absolute;

  61. !FWFOXV ᣢሙ box-shadow: 0 2px 1px rgba(0,0,0, .5); background: linear-gradient(top,

    #d00, #a00);
  62. !FWFOXV 〓ᐉ໊ઐ

  63. None
  64. None
  65. None
  66. None
  67. !FWFOXV KBWBTDSJQUQMVHJOT

  68. None
  69. !FWFOXV <div class="modal hide" id="myModal"> <div class="modal-header"> ... </div> <div

    class="modal-body"> ... </div> <div class="modal-footer"> ... </div> </div> ϞNPEBM  MJHIUCPY  ᫖ђ
  70. !FWFOXV <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> <div class="modal hide"

    id="myModal"> ...
  71. None
  72. !FWFOXV ᷑ငॄ

  73. None
  74. None
  75. None
  76. None
  77. !FWFOXV 4BTT sass-twitter-bootstrap bootstrap-sass

  78. None
  79. !FWFOXV facebook.com/bootstrapgroup UIBOLT

  80. !FWFOXV facebook.com/rgba.tw UIBOLT