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
Bulletproof Design System with TypeScript
takanorip
6
3.7k
The Spectacular Lies of Maps
axbom
PRO
1
180
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.8k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
210
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
680
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
190
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1k
ポートフォリオ_webデザイナー
nami_webdesigner
0
120
freee + Product Design FY25Q4
freee
4
15k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
330
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
The Cult of Friendly URLs
andyhume
79
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Side Projects
sachag
455
43k
Docker and Python
trallard
45
3.5k
Become a Pro
speakerdeck
PRO
29
5.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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