@cppgohan

Twitter bootstrap 小試

Bootstrap, from TwitterSimple and flexibley HTML, CSS, and Javascript for popular user interface components and interactions.

簡單灵活的由HTML, CSS, Javascript打造的流行用戶界面組件.

Bootstrap, from TwitterSimple and flexibley HTML, CSS, and Javascript for popular user interface components and interactions.

簡單灵活的由HTML, CSS, Javascript打造的流行用戶界面組件.

小清新!!!

Built with Bootstrap?使用bootstrap的网站演示

•kippt https://kippt.com

•twitter bootstrap http://twitter.github.com/bootstrap/

•JSHint http://www.jshint.com/

Install?•官網下載(http://twitter.github.com/bootstrap)

•編譯好的包(css, js, img)

•編譯前的包(less, js, img)

•定制下載(web介面定制樣式)

•Initializr 懶人包(http://www.initializr.com/)

•web介面定制(自帶了jquery.js, less.js等等)

•个人偏好懒人包

Get start!•Grid System•Inline Type Element•Form && Button•Icon•Navigator•Alerts and Error Messages

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

Inline Type Element標題, 段落, 提示, 列表, 表格...

有關變量:@linkColor, @linkColorHover, @textColor@baseFontSize, @baseFontFamily, @baseLineHeight@altFontFamily, @headingsFontFamily, @headingsFontWeight@headingsColor

@table*...

Form && Button && Iconinputbox, searchbox, 不同大小設置.

大中小按鈕, 常用顏色, 不同狀態

常用图标

Form && Button && Icon

Navigator.navbar

定制的變量@navbarHeight, @navbarBackground, @navbarBackgroundHighlight

@navbarText, @navbarLinkColor, @navbarLinkColorHover, @navbarLinkColorActive, @navbarLinkBackgroundHover,@navbarLinkBackgroundActive,

@navbarSearchBackground, @navbarSearchBackgroundFocus, @navbarSearchBorder, @navbarSearchPlaceholderColor

Navigator

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

THE END! BUT... 折騰不止!

沙龍精神不止!blog.baozishan.in @cppgohan