Twitter bootstrap 小试

sztechparty

Transcript

1. @cppgohan Twitter bootstrap খࢼ
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 JOQVUCPY
   TFBSDICPY
   ෆಉେখઃஔ େதখ҈ᭃ
   ৗ༻ᰓ৭
   ෆಉ㐫ଶ ৗ༻图标
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