新工具 - 提升你的生產力 twitter boottrap

32
Joomla! Party #6 Boostrap 牧貓設計 Bryan 鄭敬錞 2012.11.04

description

在你需要戰鬥力維持高檔的時候,你是否常常為了處理惱人的排版問題,搞得自己烏煙瘴氣,戰鬥指數瞬間歸零呢?又或者為了美化版面,讓你一個頭兩個大? 今天要為各位介紹如何活用 twitter bootstrap 讓你戰鬥力永遠處在高檔!!

Transcript of 新工具 - 提升你的生產力 twitter boottrap

Page 1: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Boostrap牧貓設計 Bryan 鄭敬錞 2012.11.04

Page 2: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

What is Bootstrap?

前端框架(Front-end Framework)

Page 3: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Features

漂亮 快速

Page 4: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Why use it?

Page 5: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Page 6: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

•更快打造可動原型• 減少時間在設計

CSS style

For Developer

Page 7: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

我們是怎麼設計前端的

Page 8: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Prototyping

Balsamiq Mockups

Page 9: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Page 10: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Page 11: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

⽀支援哪些語法?

Page 12: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

⽀支援哪些語法?

Page 13: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Table

網格系統

<table class="table"> …</table>

<table> …</table>

Page 14: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Table hover

<table class="table table-hover"> …</table>

Page 15: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Button

Page 16: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Forms

<input type="text" placeholder="Type something…">

<input type="text" class="search-query">

Page 17: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Forms

<form class="form-inline"><input ...><input ...>

</form>

Page 18: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Forms

Page 19: 新工具 - 提升你的生產力 twitter boottrap

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

Joomla! P

arty

#6

Thumbnails

Page 21: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

Thumbnails

Page 22: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

還有更多更多......• Javascript (use jQuery)

Page 23: 新工具 - 提升你的生產力 twitter boottrap

Joomla! P

arty

#6

基礎版⾯面概念

Page 24: 新工具 - 提升你的生產力 twitter boottrap

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

Joomla! P

arty

#6

基礎概念 container

<div class="container">

</div>

940px

<body>

</body>

Page 26: 新工具 - 提升你的生產力 twitter boottrap

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

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

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

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

Joomla! P

arty

#6

Example

Page 31: 新工具 - 提升你的生產力 twitter boottrap

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

Joomla! P

arty

#6

Thanks for your listening