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

twitter bootstrap 好用的網頁設計框架

evenwu
August 19, 2012

twitter bootstrap 好用的網頁設計框架

25分鐘導覽

evenwu

August 19, 2012
Tweet

More Decks by evenwu

Other Decks in Design

Transcript

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

    View Slide

  2. !FWFOXV
    BCPVU
    × FWFOXVDPN

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

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

    × ⇄ޡኴᴟ+BWBTDSJQUQMVHJOT K2VFSZ

    View Slide

  10. !FWFOXV
    × ṕլ⩮ඩ᝛Αᴟḑ⋣㏡⭴⭝ᐱᏌ

    View Slide

  11. !FWFOXV
    ⲅ▎ᷖ

    View Slide

  12. !FWFOXV






    ...


    ㉊ᗡ

    View Slide

  13. !FWFOXV
    ⲅ▎ᷖ
    Ý ഇ₁ഴ

    View Slide

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

    View Slide

  15. View Slide

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

    View Slide

  17. !FWFOXV
    ද℧ො͡᎓ͧ

    View Slide

  18. View Slide

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

    View Slide

  20. View Slide

  21. View Slide

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

    View Slide

  23. View Slide

  24. View Slide

  25. !FWFOXV
    ᷍☵ܞϞࢧⱑ

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. !FWFOXV
    ʼnͦϨ઱Ŋ
    Ҁ⅁SFTQPOTJWFEFTJHO

    desktop tablet phone

    View Slide

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

    View Slide

  32. View Slide

  33. View Slide

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

    View Slide

  35. !FWFOXV
    უ▎⋤⯀

    View Slide

  36. View Slide

  37. !FWFOXV
    უ▎⋤⯀
    × HSJETZTUFN
    × OBWCBS
    × CVUUPO
    × MBCFMCBEHF
    × NPEBM KBWBTDSJQUQMVHJO

    View Slide

  38. !FWFOXV
    HSJETZTUFN


    ...
    ...


    View Slide

  39. !FWFOXV
    HSJETZTUFN


    ...
    ...


    .container

    View Slide

  40. !FWFOXV
    HSJETZTUFN
    .row


    ...
    ...


    View Slide

  41. !FWFOXV
    HSJETZTUFN


    ...
    ...


    .span8
    .span4

    View Slide

  42. !FWFOXV
    HSJETZTUFN


    ...
    ...


    20px 20px
    20px
    20px

    View Slide

  43. !FWFOXV
    OBWCBS

    View Slide

  44. !FWFOXV
    OBWCBS



    ...



    View Slide

  45. !FWFOXV
    OBWCBS
    .navbar



    ...



    View Slide

  46. !FWFOXV
    OBWCBS
    .navbar-inner
    20px 20px



    ...



    View Slide

  47. !FWFOXV
    OBWCBS



    ...



    .container

    View Slide

  48. !FWFOXV



    ...



    OBWCBS

    View Slide

  49. !FWFOXV
    CVUUPO
    Default
    CUO

    View Slide

  50. !FWFOXV
    CVUUPO
    Info

    View Slide

  51. !FWFOXV
    CUOHSPVQ

    Left
    Middle
    Right

    View Slide

  52. !FWFOXV
    CUOUPPMCBS


    ...


    View Slide

  53. !FWFOXV
    ᣢሙ

    View Slide

  54. !FWFOXV
    CVUUPOESPQEPXO


    Action



    ...


    View Slide

  55. !FWFOXV
    UBC

    Home
    Profile
    Messages

    View Slide

  56. !FWFOXV
    OBWMJTU

    List header
    Home
    Library
    ...
    ...
    ...

    ...

    View Slide

  57. !FWFOXV
    MBCFMCBEHF

    View Slide

  58. !FWFOXV
    MBCFMCBEHF

    View Slide

  59. !FWFOXV
    ᣢሙ
    1

    View Slide

  60. !FWFOXV
    ᣢሙ
    position: absolute;

    View Slide

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

    View Slide

  62. !FWFOXV
    〓ᐉ໊ઐ

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. !FWFOXV
    KBWBTDSJQUQMVHJOT

    View Slide

  68. View Slide

  69. !FWFOXV


    ...


    ...


    ...


    ϞNPEBM
    MJHIUCPY

    ᫖ђ

    View Slide

  70. !FWFOXV
    Launch Modal

    ...

    View Slide

  71. View Slide

  72. !FWFOXV
    ᷑ငॄ

    View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. !FWFOXV
    4BTT
    sass-twitter-bootstrap
    bootstrap-sass

    View Slide

  78. View Slide

  79. !FWFOXV
    facebook.com/bootstrapgroup
    UIBOLT

    View Slide

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

    View Slide