twitter bootstrap 好用的網頁設計框架

!FWFOXV Twitter Bootstrap ਒ᴟḑ⋣㏡⭴⭝ᐱᏌ

!FWFOXV BCPVU × FWFOXVDPN

!FWFOXV ։⿫ᛲ × غ፭̨᨟٨̨ⰥՀㇼܙ × ӓᴟՀㇼ̗⊈য়⬳ × 㕶㋟ჭᬝာ೺௡ӓʴⅳ̜਒ˮ9%

!FWFOXV ખ⎙ × #PPUTUSBQዅ̍㞦 × ⯎ⓗᴟ × ာⓗ∭⬉ × ᴚཌྷࢎ

!FWFOXV #PPUTUSBQ፼ × ᴨٴ₇ബᴟ⭴⭝ӎ̲⊓ٷ␽࿜ḑ⭴⭝ᐱᏌ

(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΅ٶˁٶ̵൝࿭⮇⭰ʸϷ㏴㎈㊻㢂Ù

!FWFOXV ØਉʸʿCPPUTUSBQ௰ਡݺ㡯Ù

!FWFOXV ද℧ො͡᎓ͧ

!FWFOXV ⲅ▎ᷖ × ೸⁰ഥ Ý ⮇⭰ഴ

!FWFOXV ⲅ▎ᷖ × ೸⁰ഥ × ⭴⭝ഥ Ý ⋴℄֟ͅ

!FWFOXV ᷍☵ܞϞࢧⱑ

!FWFOXV ŉͦϨ઱Ŋ Ҁ⅁SFTQPOTJWFEFTJHO desktop tablet phone

!FWFOXV ⲅ▎ᷖ × ೸⁰ഥ × ⭴⭝ഥ × ⋣⃳̸֑ Ý ʽ⑊څ΁㡯

!FWFOXV պℑ วℑ ⮇⭰ ֟ͅ ⲅ▎ᷖ

!FWFOXV უ▎⋤⯀

!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>

</div> </div> .container

!FWFOXV HSJETZTUFN .row <div class="container"> <div class="row"> <div class="span4">...</div> <div
class="span8">...</div> </div> </div>

</div> </div> .span8 .span4

</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 ᣢሙ <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 〓ᐉ໊ઐ

!FWFOXV KBWBTDSJQUQMVHJOT

!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"> ...

!FWFOXV ᷑ငॄ

!FWFOXV 4BTT sass-twitter-bootstrap bootstrap-sass

!FWFOXV facebook.com/bootstrapgroup UIBOLT

!FWFOXV facebook.com/rgba.tw UIBOLT

twitter bootstrap 好用的網頁設計框架

twitter bootstrap 好用的網頁設計框架

More Decks by evenwu

Other Decks in Design

Featured

Transcript