Post on 22-Nov-2014
description
Joomla! P
arty
#6
Boostrap牧貓設計 Bryan 鄭敬錞 2012.11.04
Joomla! P
arty
#6
What is Bootstrap?
前端框架(Front-end Framework)
Joomla! P
arty
#6
Features
漂亮 快速
Joomla! P
arty
#6
Why use it?
Joomla! P
arty
#6
Joomla! P
arty
#6
•更快打造可動原型• 減少時間在設計
CSS style
For Developer
Joomla! P
arty
#6
我們是怎麼設計前端的
Joomla! P
arty
#6
Prototyping
Balsamiq Mockups
Joomla! P
arty
#6
Joomla! P
arty
#6
Joomla! P
arty
#6
⽀支援哪些語法？
Joomla! P
arty
#6
⽀支援哪些語法？
Joomla! P
arty
#6
Table
網格系統
<table class="table"> …</table>
<table> …</table>
Joomla! P
arty
#6
Table hover
<table class="table table-hover"> …</table>
Joomla! P
arty
#6
Button
Joomla! P
arty
#6
Forms
<input type="text" placeholder="Type something…">
<input type="text" class="search-query">
Joomla! P
arty
#6
Forms
<form class="form-inline"><input ...><input ...>
</form>
Joomla! P
arty
#6
Forms
Joomla! P
arty
#6
Images
<img src="http://placehold.it/140x140" class="img-rounded">
<img src="http://placehold.it/140x140" class="img-circle">
<img src="http://placehold.it/140x140" class="img-polaroid">
Joomla! P
arty
#6
Thumbnails
Joomla! P
arty
#6
Thumbnails
Joomla! P
arty
#6
還有更多更多......• Javascript (use jQuery)
Joomla! P
arty
#6
基礎版⾯面概念
Joomla! P
arty
#6
如何使⽤用？<!DOCTYPE html><html lang="en"> <head> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body></html>
Joomla! P
arty
#6
基礎概念 container
<div class="container">
</div>
940px
<body>
</body>
Joomla! P
arty
#6
基礎概念 row
<div class="container">
</div>
<div class=”row”></div>
<div class=”row”></div>
<div class=”row”></div>
Joomla! P
arty
#6
row > spanX
12 columns
<div class="container">
</div>
<div class="row">
</div><div class="span12"> </div>
每⼀一個span有最⼩小固定寬度
Joomla! P
arty
#6
row > spanX<div class="container">
</div>
<div class="row">
</div>
<div class="span4"> </div><div class="span8"> </div>
float: left;min-height: 1px;margin-left: 20px
bootstrap.min.css
Joomla! P
arty
#6
row-fluid > spanX
12 columns
<div class="container">
</div>
<div class="row-fluid">
</div><div class="span12"> </div>
每⼀一個span是以百分⽐比分配
Joomla! P
arty
#6
Example
Joomla! P
arty
#6
<div class="row-fluid"> <ul class="thumbnails">
</ul></div>
<li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/300x200" alt=""> </div> </li> <li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/300x200" alt=""> </div> </li>
<li class="span4"> <div class="thumbnail"> <img src="http://placehold.it/300x200" alt=""> </div> </li>
Joomla! P
arty
#6
Thanks for your listening