Having a lot of sites use bootstrap, Ex: Toyota.com, Football Manager, Honest code, Thuc.com.vn ...
Currently, we use the 3rd way to use Bootstrap. That because the less way is break the rule Cascading style sheet, other hand, the less css is supported in morden browser. The 2nd way is flexible but complex. So we use the 3rd, we also flexible config through http://twitter.github.com/bootstrap/customize.html or build css from source If need.Infomration about Bootsrap
Example about apply Twitter Bootsrap by css compiled file
2. Agenda• Provide knowlegement basic of Twitter bootstrap• How to settup Bootstrap in the website• Make some example that we use frequenly in project
4. Why’s Twitter Bootstrap• Easy to use• Fast to develop• Lot of sites use it• Consistent with main browser and Providing feature responsive design• Work well with other library (less, jquery, normalize…)• It’s free (Apache License 2.0)
5. Browser Support
6. A little bit of Less
7. Bootstrap structure Source Compiled
8. Setup Twitter Bootstrap in WebHave 3 ways to use Bootstrap: Use source (less file) Build css from source (less file) Use css that provides by Bootstrap. http://twitter.github.com/bootstrap/customi ze.html
9. Setup Twitter Bootstrap in Web (2)
11. ScaffoldingReset css in bootstrap make: remove margin in body Set background-color: white; on the body change base font-family, font-size, lineHeight (font-size: 14px, line-height: 20px, "Helvetica Neue",Helvetica,Arial,sans-serif) Set link colorReset by Normalize resetGrid : Fixed grid and fluid gird (example)Layout: Fixed layout and fluid lauout (example)
12. Scaffolding – Fixed GridsBootstrap support default grid with 12 columnswith 940pxWith responsive design, the gird supports 724pxto 1170px wide. Below 767px, the columnsbecome fluid and stact verticallys
13. Scaffolding – Fluid GridsThe fluid grid system uses percents for columnwidths instead of fixed pixels
14. Scaffolding – Fixed LayoutThe default and simple 940px-wide, centeredlayout for just about any website or page
15. Scaffolding – Fluid LayoutFluid layout gives flexible page structure, min-and max-widths, and a left-hand sidebar.
16. Scaffolding (2)Responsive designIt’s the process of creating website that hasdynamically reconfigure its layout, navigation, content,image based on user’s environmentWe can enable it when put following code inheader tag