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
今日から意識できるアクセシビリティ
fumiko
0
260
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
Yumika Yamada Portfolio
yumii
0
810
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
580
DC Style Redesign
mcduckyart
0
130
線で考える画面構成
natsuume
1
880
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
660
Memory Man v3 (WIP)
storybychad
PRO
0
2.1k
#Dubois Challenge 2025: Economics
ajstarks
0
130
株式会社Muture_ソーシャル推進事業
muture
PRO
0
100
NAHO SHIMONO_Portfolio2025
nahohphp
0
910
アクセシビリティに取り組むメリット
magi1125
1
200
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Raft: Consensus for Rubyists
vanstee
140
7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Music & Morning Musume
bryan
46
6.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
GitHub's CSS Performance
jonrohan
1031
460k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Thoughts on Productivity
jonyablonski
69
4.7k
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