Twitter bootstrap2.0 taste

Twitter bootstrap2.0 taste

• 1.
  Twitter bootstrap 小試 @cppgohan
• 2.
  Bootstrap, from Twitter Simpleand flexibley HTML, CSS, and Javascript for popular user interface components and interactions. 簡單 活的由HTML, CSS, Javascript打造的流行用戶界 面組件.
• 3.
  Bootstrap, from Twitter Simpleand 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 ErrorMessages 默認顏色樣式 .alert .alert-error .alert-success .alert-info
• 14.
  THE END! BUT...折騰不止! 沙龍精神不止! blog.baozishan.in @cppgohan