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
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
3.5k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
280
Echoes Boomerang
artcloudyu
PRO
0
200
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.1k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
220
OLTA株式会社/デザイン紹介資料
taxy
0
290
Cards | Storyboards
giofortuna_story
0
240
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
1
970
sachi_y_portfolio
sachi337
0
230
デザイナーとPMの両ロール_3つのポイント
toy1618
1
300
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.4k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
510
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
What's in a price? How to price your products and services
michaelherold
245
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
How GitHub (no longer) Works
holman
314
140k
Raft: Consensus for Rubyists
vanstee
137
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
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