Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
twitter bootstrap 好用的網頁設計框架
Search
evenwu
August 19, 2012
Design
92
15k
twitter bootstrap 好用的網頁設計框架
25分鐘導覽
evenwu
August 19, 2012
Tweet
Share
More Decks by evenwu
See All by evenwu
CSS 檔案管理技巧分享
evenwu
137
13k
RWD 一小時就上手
evenwu
107
17k
如何教設計師前端技術
evenwu
45
15k
2012 web technology by RGBA group
evenwu
140
15k
Other Decks in Design
See All in Design
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
AIイラスト生成・編集テクニック紹介
piyo7
2
160
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2k
アクセシビリティのはじめかた デザイナー編
tokimari
2
750
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
250
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
430
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
220
Sensitive Texter Storyboard
ctagulao98
0
160
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2k
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.7k
For My Dad- teaser
pdqsketch
PRO
0
170
Web 組版の課題とその解法
yamatoiizuka
0
150
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
What's new in Ruby 2.0
geeforr
338
31k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Why Our Code Smells
bkeepers
PRO
332
56k
Embracing the Ebb and Flow
colly
81
4.3k
Clear Off the Table
cherdarchuk
89
320k
Typedesign – Prime Four
hannesfritz
37
2.2k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Code Review Best Practice
trishagee
58
16k
Transcript
!FWFOXV Twitter Bootstrap ᴟḑ⋣㏡⭝ᐱᏌ
!FWFOXV BCPVU × FWFOXVDPN
!FWFOXV ։ᛲ × غ፭̨᨟٨̨ⰥՀㇼܙ × ӓᴟՀㇼ̗⊈য়⬳ × 㕶㋟ჭᬝာӓʴⅳ̜ˮ9%
!FWFOXV ખ⎙ × #PPUTUSBQዅ̍㞦 × ⯎ⓗᴟ × ာⓗ∭⬉ × ᴚཌྷࢎ
!FWFOXV #PPUTUSBQ፼ × ᴨٴ₇ബᴟ⭝ӎ̲⊓ٷḑ⭝ᐱᏌ
None
(SJETZTUFN 6UJMJUZ$MBTTJT 3FTQPOTJWF%FTJHO *DPO #VUUPOTUZMF 5ZQPHSBQIZ
#BEHF㦇-BCFM /BW5BCCBS 1SPHSFTTCBS 8FMMCPY "MFSUCPY 5IVNCOBJMT +BWBTDSJQUQMVHJOT
!FWFOXV #PPUTUSBQ፼σ㣈 × ჭᬝ≕⊶(SJETZTUFN × च൬#BTF$44 × ബᴟ⾞̲㡠UBC CVUUPOFUD ×
⇄ޡኴᴟ+BWBTDSJQUQMVHJOT K2VFSZ
!FWFOXV × ṕլ⩮ඩΑᴟḑ⋣㏡⭝ᐱᏌ
!FWFOXV ⲅ▎ᷖ
!FWFOXV <!DOCTYPE html> <html> <head> <link href="bootstrap.css" rel="stylesheet"> </head> <body>
... </body> </html> ㉊ᗡ
!FWFOXV ⲅ▎ᷖ Ý ഇ₁ഴ
!FWFOXV ØFWFO΅ٶˁٶ̵൝⮇⭰ʸϷ㏴㎈㊻㢂Ù
None
!FWFOXV ØਉʸʿCPPUTUSBQ௰ਡݺ㡯Ù
!FWFOXV ද℧ො͡᎓ͧ
None
!FWFOXV ⲅ▎ᷖ × ⁰ഥ Ý ⮇⭰ഴ
None
None
!FWFOXV ⲅ▎ᷖ × ⁰ഥ × ⭝ഥ Ý ⋴℄֟ͅ
None
None
!FWFOXV ᷍☵ܞϞࢧⱑ
None
None
None
None
!FWFOXV ʼnͦϨŊ Ҁ⅁SFTQPOTJWFEFTJHO desktop tablet phone
!FWFOXV ⲅ▎ᷖ × ⁰ഥ × ⭝ഥ × ⋣̸֑ Ý ʽ⑊څ㡯
None
None
!FWFOXV պℑ วℑ ⮇⭰ ֟ͅ ⲅ▎ᷖ
!FWFOXV უ▎⋤⯀
None
!FWFOXV უ▎⋤⯀ × HSJETZTUFN × OBWCBS × CVUUPO × MBCFMCBEHF
× NPEBM KBWBTDSJQUQMVHJO
!FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>
</div> </div>
!FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>
</div> </div> .container
!FWFOXV HSJETZTUFN .row <div class="container"> <div class="row"> <div class="span4">...</div> <div
class="span8">...</div> </div> </div>
!FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>
</div> </div> .span8 .span4
!FWFOXV HSJETZTUFN <div class="container"> <div class="row"> <div class="span4">...</div> <div class="span8">...</div>
</div> </div> 20px 20px 20px 20px
!FWFOXV OBWCBS
!FWFOXV OBWCBS <div class="navbar"> <div class="navbar-inner"> <div class="container"> ... </div>
</div> </div>
!FWFOXV OBWCBS .navbar <div class="navbar"> <div class="navbar-inner"> <div class="container"> ...
</div> </div> </div>
!FWFOXV OBWCBS .navbar-inner 20px 20px <div class="navbar"> <div class="navbar-inner"> <div
class="container"> ... </div> </div> </div>
!FWFOXV OBWCBS <div class="navbar"> <div class="navbar-inner"> <div class="container"> ... </div>
</div> </div> .container
!FWFOXV <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> ... </div>
</div> </div> OBWCBS
!FWFOXV CVUUPO <a class="btn" href="">Default</a> CUO
!FWFOXV CVUUPO <a class="btn btn-info" href="">Info</a>
!FWFOXV CUOHSPVQ <div class="btn-group"> <button class="btn"> Left </button> <button class="btn">
Middle </button> <button class="btn"> Right </button> </div>
!FWFOXV CUOUPPMCBS <div class="btn-toolbar"> <div class="btn-group"> ... </div> </div>
!FWFOXV ᣢሙ
!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>
!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>
!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>
!FWFOXV MBCFMCBEHF
!FWFOXV MBCFMCBEHF
!FWFOXV ᣢሙ <span class="badge pull-right">1</span>
!FWFOXV ᣢሙ position: absolute;
!FWFOXV ᣢሙ box-shadow: 0 2px 1px rgba(0,0,0, .5); background: linear-gradient(top,
#d00, #a00);
!FWFOXV 〓ᐉ໊ઐ
None
None
None
None
!FWFOXV KBWBTDSJQUQMVHJOT
None
!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 ђ
!FWFOXV <a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> <div class="modal hide"
id="myModal"> ...
None
!FWFOXV ᷑ငॄ
None
None
None
None
!FWFOXV 4BTT sass-twitter-bootstrap bootstrap-sass
None
!FWFOXV facebook.com/bootstrapgroup UIBOLT
!FWFOXV facebook.com/rgba.tw UIBOLT