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
2a8387f23d70f68047f0b8c32439a292?s=48 monoxer
0
560
Bd2cd58cea35f0c4d8965329b8a9d252?s=48 mtym27
5
4.2k
342011d3ddbec60bc73c8a4d6a562911?s=48 videlvequio
0
140
92151711459a4e3a191f791238f6259d?s=48 chiemitaki
0
1.2k
C31f714e8a8984e1bc3c1e402af1d7c1?s=48 bemu
2
610
5481f706b4bfeb0569b1f759b528f6e2?s=48 sahinairvin
PRO
1
190
3c75ad9ccb3cca4b81b9b887ba6101bb?s=48 ray110
1
700
A59f1440588fd8d0447a8e96b8c9b8c5?s=48 hara_mei
0
490
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
230
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
1
400
C017f3b100cbaa3127ac95d9544c70d9?s=48 maxsbow
0
210
372b0d6ab90110521a5d3aa09f736abc?s=48 seathinner
1
180

Featured

See All Featured
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k
24fc194843a71f10949be18d5a692682?s=48 gr2m
86
11k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
61
6.7k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
287
47k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
54k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
0
76
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
36
1.7k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
224
15k

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