Twitter bootstrap2.0 taste

5,198 views
5,063 views

Published on

@cppgohan

sztechparty 20120415

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,198
On SlideShare
0
From Embeds
0
Number of Embeds
3,684
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Twitter bootstrap2.0 taste

  1. 1. Twitter bootstrap 小試 @cppgohan
  2. 2. Bootstrap, from TwitterSimple and flexibley HTML, CSS, and Javascript for popular userinterface components and interactions.簡單 活的由HTML, CSS, Javascript打造的流行用戶界面組件.
  3. 3. Bootstrap, from TwitterSimple and flexibley HTML, CSS, and Javascript for popular userinterface components and interactions.簡單 活的由HTML, CSS, Javascript打造的流行用戶界面組件. 小清新!!!
  4. 4. Built with Bootstrap?使用bootstrap的网站演示•kippt https://kippt.com•twitter bootstrap http://twitter.github.com/bootstrap/•JSHint http://www.jshint.com/
  5. 5. Install?•官網下載(http://twitter.github.com/bootstrap) •編譯好的包(css, js, img) •編譯前的包(less, js, img) •定制下載(web介面定制樣式)•Initializr 懶人包(http://www.initializr.com/) •web介面定制(自帶了jquery.js, less.js等等) •个人偏好懒人包
  6. 6. Get start! •Grid System •Inline Type Element •Form && Button •Icon •Navigator •Alerts and Error Messages
  7. 7. Grid System 默認爲 940px, 12列樣式, (可定制) @gridColumns: 16 @gridColumnWidth: 48.75px @gridGutterWidth: 10px 修改responsive.less, 度自適應
  8. 8. Inline Type Element 標題, 段落, 提示, 列表, 表格... 有關變量: @linkColor, @linkColorHover, @textColor @baseFontSize, @baseFontFamily, @baseLineHeight @altFontFamily, @headingsFontFamily, @headingsFontWeight @headingsColor @table* ...
  9. 9. Form && Button && Icon inputbox, searchbox, 不同大小設置. 大中小按鈕, 常用顏色, 不同狀態 常用图标
  10. 10. Form && Button && Icon
  11. 11. Navigator .navbar 定制的變量 @navbarHeight, @navbarBackground, @navbarBackgroundHighlight @navbarText, @navbarLinkColor, @navbarLinkColorHover, @navbarLinkColorActive, @navbarLinkBackgroundHover, @navbarLinkBackgroundActive, @navbarSearchBackground, @navbarSearchBackgroundFocus, @navbarSearchBorder, @navbarSearchPlaceholderColor
  12. 12. Navigator
  13. 13. Alerts and Error Messages默認顏色樣式.alert .alert-error .alert-success .alert-info
  14. 14. THE END! BUT... 折騰不止! 沙龍精神不止! blog.baozishan.in @cppgohan

×