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/

Thank you

Andrea DessìSenior UI Developer

a.dessi@entando.com