新工具 - 提升你的生產力 twitter boottrap
DESCRIPTION
在你需要戰鬥力維持高檔的時候,你是否常常為了處理惱人的排版問題,搞得自己烏煙瘴氣,戰鬥指數瞬間歸零呢?又或者為了美化版面,讓你一個頭兩個大? 今天要為各位介紹如何活用 twitter bootstrap 讓你戰鬥力永遠處在高檔!!TRANSCRIPT
![Page 1: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/1.jpg)
Joomla! P
arty
#6
Boostrap牧貓設計 Bryan 鄭敬錞 2012.11.04
![Page 2: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/2.jpg)
Joomla! P
arty
#6
What is Bootstrap?
前端框架(Front-end Framework)
![Page 3: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/3.jpg)
Joomla! P
arty
#6
Features
漂亮 快速
![Page 4: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/4.jpg)
Joomla! P
arty
#6
Why use it?
![Page 5: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/5.jpg)
Joomla! P
arty
#6
![Page 6: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/6.jpg)
Joomla! P
arty
#6
•更快打造可動原型• 減少時間在設計
CSS style
For Developer
![Page 7: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/7.jpg)
Joomla! P
arty
#6
我們是怎麼設計前端的
![Page 8: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/8.jpg)
Joomla! P
arty
#6
Prototyping
Balsamiq Mockups
![Page 9: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/9.jpg)
Joomla! P
arty
#6
![Page 10: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/10.jpg)
Joomla! P
arty
#6
![Page 11: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/11.jpg)
Joomla! P
arty
#6
⽀支援哪些語法?
![Page 12: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/12.jpg)
Joomla! P
arty
#6
⽀支援哪些語法?
![Page 13: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/13.jpg)
Joomla! P
arty
#6
Table
網格系統
<table class="table"> …</table>
<table> …</table>
![Page 14: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/14.jpg)
Joomla! P
arty
#6
Table hover
<table class="table table-hover"> …</table>
![Page 15: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/15.jpg)
Joomla! P
arty
#6
Button
![Page 16: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/16.jpg)
Joomla! P
arty
#6
Forms
<input type="text" placeholder="Type something…">
<input type="text" class="search-query">
![Page 17: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/17.jpg)
Joomla! P
arty
#6
Forms
<form class="form-inline"><input ...><input ...>
</form>
![Page 18: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/18.jpg)
Joomla! P
arty
#6
Forms
![Page 19: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/19.jpg)
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">
![Page 20: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/20.jpg)
Joomla! P
arty
#6
Thumbnails
![Page 21: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/21.jpg)
Joomla! P
arty
#6
Thumbnails
![Page 22: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/22.jpg)
Joomla! P
arty
#6
還有更多更多......• Javascript (use jQuery)
![Page 23: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/23.jpg)
Joomla! P
arty
#6
基礎版⾯面概念
![Page 24: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/24.jpg)
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>
![Page 25: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/25.jpg)
Joomla! P
arty
#6
基礎概念 container
<div class="container">
</div>
940px
<body>
</body>
![Page 26: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/26.jpg)
Joomla! P
arty
#6
基礎概念 row
<div class="container">
</div>
<div class=”row”></div>
<div class=”row”></div>
<div class=”row”></div>
![Page 27: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/27.jpg)
Joomla! P
arty
#6
row > spanX
12 columns
<div class="container">
</div>
<div class="row">
</div><div class="span12"> </div>
每⼀一個span有最⼩小固定寬度
![Page 28: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/28.jpg)
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
![Page 29: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/29.jpg)
Joomla! P
arty
#6
row-fluid > spanX
12 columns
<div class="container">
</div>
<div class="row-fluid">
</div><div class="span12"> </div>
每⼀一個span是以百分⽐比分配
![Page 30: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/30.jpg)
Joomla! P
arty
#6
Example
![Page 31: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/31.jpg)
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>
![Page 32: 新工具 - 提升你的生產力 twitter boottrap](https://reader033.vdocuments.site/reader033/viewer/2022061122/54700dc9b4af9fa30a8b460c/html5/thumbnails/32.jpg)
Joomla! P
arty
#6
Thanks for your listening