@cppgohan sztechparty 20120415

1. Twitter bootstrap
小試
@cppgohan

2. Bootstrap, from Twitter
Simple and flexibley HTML, CSS, and Javascript for popular user
interface components and interactions.
簡單 活的由HTML, CSS, Javascript打造的流行用戶界
面組件.

3. Bootstrap, from Twitter
Simple and flexibley HTML, CSS, and Javascript for popular user
interface components and interactions.
簡單 活的由HTML, CSS, Javascript打造的流行用戶界
面組件.
小清新!!!

4. Built with Bootstrap?
使用bootstrap的网站演示
•kippt https://kippt.com
•twitter bootstrap http://twitter.github.com/bootstrap/
•JSHint http://www.jshint.com/

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. Get start!
•Grid System
•Inline Type Element
•Form && Button
•Icon
•Navigator
•Alerts and Error Messages

7. Grid System
默認爲 940px, 12列樣式, (可定制)
@gridColumns: 16
@gridColumnWidth: 48.75px
@gridGutterWidth: 10px
修改responsive.less, 度自適應

8. Inline Type Element
標題, 段落, 提示, 列表, 表格...
有關變量:
@linkColor, @linkColorHover, @textColor
@baseFontSize, @baseFontFamily, @baseLineHeight
@altFontFamily,
@headingsFontFamily, @headingsFontWeight
@headingsColor
@table*
...

9. Form && Button && Icon
inputbox, searchbox, 不同大小設置.
大中小按鈕, 常用顏色, 不同狀態
常用图标

10. Form && Button && Icon

11. Navigator
.navbar
定制的變量
@navbarHeight, @navbarBackground, @navbarBackgroundHighlight
@navbarText, @navbarLinkColor, @navbarLinkColorHover,
@navbarLinkColorActive, @navbarLinkBackgroundHover,
@navbarLinkBackgroundActive,
@navbarSearchBackground, @navbarSearchBackgroundFocus,
@navbarSearchBorder, @navbarSearchPlaceholderColor

12. Navigator

13. Alerts and Error Messages
默認顏色樣式
.alert .alert-error .alert-success .alert-info

14. THE END! BUT... 折騰不止!
沙龍精神不止!
blog.baozishan.in @cppgohan