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. 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. 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)
8. Setup Twitter Bootstrap in Web
Have 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
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. Scaffolding
Reset 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 color
Reset by Normalize reset
Grid : Fixed grid and fluid gird (example)
Layout: Fixed layout and fluid lauout (example)
12. Scaffolding – Fixed Grids
Bootstrap support default grid with 12 columns
with 940px
With responsive design, the gird supports 724px
to 1170px wide. Below 767px, the columns
become fluid and stact verticallys
13. Scaffolding – Fluid Grids
The fluid grid system uses percents for column
widths instead of fixed pixels
14. Scaffolding – Fixed Layout
The default and simple 940px-wide, centered
layout for just about any website or page
15. Scaffolding – Fluid Layout
Fluid layout gives flexible page structure, min-
and max-widths, and a left-hand sidebar.
16. Scaffolding (2)
Responsive design
It’s the process of creating website that has
dynamically reconfigure its layout, navigation, content,
image based on user’s environment
We can enable it when put following code in
header tag
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, …
