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

twitter bootstrap 好用的網頁設計框架

F8ca23da626499de4b476d7ccaf2950b?s=47 evenwu
August 19, 2012
Design
93
15k

twitter bootstrap 好用的網頁設計框架

25分鐘導覽

F8ca23da626499de4b476d7ccaf2950b?s=128

evenwu

August 19, 2012
Tweet

More Decks by evenwu

See All by evenwu
F8ca23da626499de4b476d7ccaf2950b?s=48 evenwu
138
13k
F8ca23da626499de4b476d7ccaf2950b?s=48 evenwu
107
16k
F8ca23da626499de4b476d7ccaf2950b?s=48 evenwu
46
15k
F8ca23da626499de4b476d7ccaf2950b?s=48 evenwu
140
15k

Other Decks in Design

See All in Design
32f36540131c92a5ae9bd1f86dd3340c?s=48 mechamomo
0
110
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
0
200
2bb89bbc2299a709cd6098173026e923?s=48 datavisualizationjapan
1
210
F2a18f1ef63198439d0722c7e88129e2?s=48 kignato1
0
200
E7a50d8d1525f955437960eeaf6a2690?s=48 haruh
0
120
D4ad7f4022b9b86c2da92a718df3aeba?s=48 doyung
0
340
6a42d4bb1df118144c6b8aa1b9f7e7c0?s=48 nyuuui_design
0
800
12703c2561e45c51802855707969a9b0?s=48 antondraws
0
110
1aa84252531bfaeef8fcd570a43f0f62?s=48 kuratani4040
0
290
D38056617929476906141e6a157e0045?s=48 letsgokoyo
0
150
C4024c9df86738cef500253fe7335de9?s=48 ameetoe
0
220
Cf3645811bcc4a1996c8915b3de9f950?s=48 masakioka
2
190

Featured

See All Featured
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
120k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
146
20k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
442
29k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
20
800
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
238
23k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
89
4k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.5k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
252
11k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.3k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
193
8.9k

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