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
harutaka Vision Deck
zenkigenforrecruit
0
180
freee + Product Design FY25Q4
freee
4
15k
PF_濵村ひろみ_202503
maru_design78
0
210
CMS管理画面のアクセシビリティ
magi1125
8
2.4k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
350
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
170
#Dubois Challenge 2025: Economics
ajstarks
0
150
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
110
株式会社バクタム 会社説明資料
bactum
0
270
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
400
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
520
Typedesign – Prime Four
hannesfritz
42
2.7k
Facilitating Awesome Meetings
lara
54
6.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Site-Speed That Sticks
csswizardry
10
740
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
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