about bootstrap
DESCRIPTION
Learn more about the history and properties of Bootstrap framework. Presentation slides used during the workshop Developing websites with Bootstrap and a WCMS/Portal system.TRANSCRIPT
Bootstrap“The most popular front-end framework for developing
responsive, mobile first projects on the web.”
Picture by Benjamin Eshan on Flickr https://bitly.com/
About meAndrea Dessì
• ~10 years of front-end development experience
• Html, css, js, ui, ux, jsp, java, maven, nodejs…
• Entando Core Team
Bootstrap: What is it?• A tool to develop html pages• Extensible and personalizable
UI: tables, buttons, forms, typography, carousels, panels...
http://getbootstrap.com/
A little bit of historyBorn inside Twitter and developed by Mark Otto (@mdo) and Jacob Thornton (@fat)
v.1: 2011, first public version
v.2: 2012, introduction of responsive design
v.3: 2013, mobile first approach
Why use it?
• Browser, desktop and mobile compatibility
• Easy to use
• Customizable
• Open Source (MIT)
How do we use it?
Simply start from here
<link href=”bootstrap.css" rel="stylesheet”>
<script src="jquery.js"></script>
<script src=”bootstrap.js"></script>
How to use it
Grids• System based on 12 columns
• Fluid or fixed
• Pluggable
• Optimized for: xs (-768 px) sm (768/992 px)md (992/1200 px)lg (1200+ px)
Grids
Forms• Cross-browser UIs
• Horizontal or Vertical
• State (success, error, warning)
• Size (xs, sm, md, lg)
Form
Buttons• Thought for web apps.
• Variants: large, small, extra small, primary, success, info, warning, danger, link
Icons• Icon Font with 200 icons (Glyphicons)• Webapp ready• Can be changed with another set
Texts• Titles, paragraphs, lists
• Size manahement
• Formatting: i, b, s, small
• Labels and Badges
Text
Tables• Alternate lines (.table-striped)
• With borders (.table-bordered)
• Active (.table-hover)
• Condensed (.table-condensed)
• Responsive
Tables
Panels“While not always necessary, sometimes you
need to put your DOM in a box. For those situations, try the panel component.”
• Can include headings
• Contain any element
Panels
Other UI elements
• Buttons Group
• Input Groups
• Alerts
• Progress Bar
Javascript Components• Tooltip
• Modal
• Carousel
• Popover
More: Transition, Dropdown, Scrollspy, Tab, Alert, Collapse, Affix
Customization
• With LESS o Sass
• Documentazione in source files
• Compile on-the-fly with LESS
Less, Sass
• Are extensions of CSS
• Simplify coding
• Allow variables, functions, calculations…
http://lesscss.org/
http://sass-lang.com/