Twitter Bootstrap          Presenter: Thuc Le Dong
Agenda• Provide knowlegement basic of Twitter  bootstrap• How to settup Bootstrap in the website• Make some example that w...
Bootstrap - What’s that ???• Bootstrap is Css framework• Designed by Twitter• Is gather of css, html, javascript for  typo...
Why’s Twitter Bootstrap• Easy to use• Fast to develop• Lot of sites use it• Consistent with main browser and  Providing fe...
Browser Support
A little bit of Less
Bootstrap structure                      Source  Compiled
Setup Twitter Bootstrap in WebHave 3 ways to use Bootstrap:   Use source (less file)   Build css from source (less file)  ...
Setup Twitter Bootstrap in Web (2)
What’s included in Bootstrap    Scaffolding                 Base CSS                            •Css style for common html...
ScaffoldingReset css in bootstrap make: remove margin in body Set background-color: white; on the body change base font-fa...
Scaffolding – Fixed GridsBootstrap support default grid with 12 columnswith 940pxWith responsive design, the gird supports...
Scaffolding – Fluid GridsThe fluid grid system uses percents for columnwidths instead of fixed pixels
Scaffolding – Fixed LayoutThe default and simple 940px-wide, centeredlayout for just about any website or page
Scaffolding – Fluid LayoutFluid layout gives flexible page structure, min-and max-widths, and a left-hand sidebar.
Scaffolding (2)Responsive designIt’s the process of creating website that hasdynamically reconfigure its layout, navigatio...
Scaffolding (3) – Supported device
Scaffolding (3) – Responsive class
Base Css - Typography
Base Css - Tables
Base Css – Tables (2)
Base Css – Form
Base Css – Button
Base Css – Button
Base Css – Icon
Components – Tabs
Components – Navigation
Components – Pagging
Components – Pagging
Components – Label & Alert
Javascript – Modal
Real project
Real project
Real project
QUESTIONS?
THANK YOU!Presentation by: Thuc Le Dong
Upcoming SlideShare
Loading in...5
×

Twitter Bootstrap Presentation

2,258

Published on

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,258
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • Having a lot of sites use bootstrap, Ex: Toyota.com, Football Manager, Honest code, Thuc.com.vn ...
  • What’s Less: LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.VariablesVariables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.MixinsMixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.Nested RulesRather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.Functions & OperationsAre some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.
  • 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
  • Scaffolding:Global styes for the body to reset type and background, links style, grid system, and two simple layoutsBase CSS:Style for common Html element like typography, code, table, form, button, plus includes Glyphicons, icon setComponents:Basic styles for common interface components like tabs and pills, navbar, alert, page header, and moreJavascriptPlugin:Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, Modals, …
  • Normalize: https://github.com/necolas/normalize.css/wiki
  • http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  • Reference:http://bootstrap.lesscss.ru/less.htmlhttp://twitter.github.com/bootstrap/customize.htmlhttps://github.com/necolas/normalize.css/wikihttp://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlhttp://twitter.github.com/bootstrap/https://staging.yellowpepper.com/YepexLiteSmartBankinghttp://www.slideshare.net/srigi/twitter-bootstrap-lessjshttp://www.slideshare.net/chandleryu/less-bootstrap-and-more
  • Twitter Bootstrap Presentation

    1. 1. Twitter Bootstrap Presenter: Thuc Le Dong
    2. 2. Agenda• Provide knowlegement basic of Twitter bootstrap• How to settup Bootstrap in the website• Make some example that we use frequenly in project
    3. 3. Bootstrap - What’s that ???• Bootstrap is Css framework• Designed by Twitter• Is gather of css, html, javascript for typography, forms, buttons, tables, grid, navigation and more
    4. 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. 5. Browser Support
    6. 6. A little bit of Less
    7. 7. Bootstrap structure Source Compiled
    8. 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. 9. Setup Twitter Bootstrap in Web (2)
    10. 10. What’s included in Bootstrap Scaffolding Base CSS •Css style for common html:•Reset css •Table•Grid •Form•Layout •Button… Components Javascript plugin•Css style for component: •Tooltip,•Navbar •Popovers•Alert •Modals…•Tab …
    11. 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. 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. 13. Scaffolding – Fluid GridsThe fluid grid system uses percents for columnwidths instead of fixed pixels
    14. 14. Scaffolding – Fixed LayoutThe default and simple 940px-wide, centeredlayout for just about any website or page
    15. 15. Scaffolding – Fluid LayoutFluid layout gives flexible page structure, min-and max-widths, and a left-hand sidebar.
    16. 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
    17. 17. Scaffolding (3) – Supported device
    18. 18. Scaffolding (3) – Responsive class
    19. 19. Base Css - Typography
    20. 20. Base Css - Tables
    21. 21. Base Css – Tables (2)
    22. 22. Base Css – Form
    23. 23. Base Css – Button
    24. 24. Base Css – Button
    25. 25. Base Css – Icon
    26. 26. Components – Tabs
    27. 27. Components – Navigation
    28. 28. Components – Pagging
    29. 29. Components – Pagging
    30. 30. Components – Label & Alert
    31. 31. Javascript – Modal
    32. 32. Real project
    33. 33. Real project
    34. 34. Real project
    35. 35. QUESTIONS?
    36. 36. THANK YOU!Presentation by: Thuc Le Dong

    ×