Twitter bootstrap2.0 taste
Upcoming SlideShare
Loading in...5
×
 

Twitter bootstrap2.0 taste

on

  • 5,294 views

@cppgohan

@cppgohan

sztechparty 20120415

Statistics

Views

Total Views
5,294
Slideshare-icon Views on SlideShare
1,613
Embed Views
3,681

Actions

Likes
1
Downloads
16
Comments
0

9 Embeds 3,681

http://techparty.org 3560
http://www.techparty.org 65
http://blog.baozishan.in 22
http://feed.feedsky.com 19
http://xianguo.com 6
http://cache.baidu.com 3
http://gztp.jeffjie.webfactional.com 3
http://techparty.jeffkit.com 2
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Twitter bootstrap2.0 taste Twitter bootstrap2.0 taste Presentation Transcript

    • Twitter bootstrap 小試 @cppgohan
    • Bootstrap, from TwitterSimple and flexibley HTML, CSS, and Javascript for popular userinterface components and interactions.簡單 活的由HTML, CSS, Javascript打造的流行用戶界面組件.
    • Bootstrap, from TwitterSimple and flexibley HTML, CSS, and Javascript for popular userinterface 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 && Icon inputbox, 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