Bootstrap

http://getbootstrap.com/

Twitter Bootstrap is a front end library: it contains CSS and JavaScript that is useful across a large variety of sites.

The main advantages of using TBS are:

TBS is was created by Twitter, then released as open source in 2012.

It is officially called just Bootstrap now, although the term TBS is still widely used to disambiguate.

Just use it **always** and avoid many browser incompatibilities later on.

Versions

TBS is now on version 3. There are major differences between version 2, so make sure you use the right one. This document focuses on TBS 3 by default.

#Grid system

12 columns for wide screens, stack up on narrow ones.

System helps to write a single code that will run on any screen width.

#Default Parameters

If you want to extend your app based on Bootstrap, you often need to know the values of Bootstrap values. If you are using LESS or the SASS port, that is possible through variables.

#Element styles

code kbd

#forms

#form control

Is the term used on the HTML5 spec for the form fields like text and checkboxes.

#form-group

Typically surrounds a form-control and a label.

Example block-level help text here.

Disabled checkbox

Form #errors

Use one of the has-error classes on the form-group div.

The help-block will be styled accordingly.

Woohoo!
Something may have gone wrong
Please correct the error

#Navigation

#navbar

Choosing the current button to highlight should be done server side.

When the screen becomes small as in mobile, the items collapse into a dropdown button.

#Tab navigation

HTML + CSS, no action:

#tab.js

http://getbootstrap.com/javascript/#tabs

0
1
2

TODO: possible without IDs?

TODO: how do nav-tabs with buttons that look exactly like links?

http://stackoverflow.com/questions/19981949/how-to-make-a-button-in-bootstrap-look-like-a-normal-link

Failed attempts:

#dropdown.js

http://getbootstrap.com/javascript/#dropdowns

Split button dropdown. Bad for mobile since hard to click on the small button.

#Hover dropdown

Not possible built-in: https://github.com/CWSpear/bootstrap-hover-dropdown Sub-menus are WONTFIX because complicated and not useful for mobile: https://github.com/CWSpear/bootstrap-hover-dropdown/issues/89

Hover me

A data-delay of 0 is problematic because there is a gap between the button and the dropdown:

#Font Awesome

Really good icon option as it resizes and recolors perfectly.

Actually defines a font that contains icons.

Designed to work well with bootstrap, so commonly associated that it is served from the bootstrap CDN.

Home Page.

Use with custom class: