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.
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.
12 columns for wide screens, stack up on narrow ones.
System helps to write a single code that will run on any screen width.
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.
code
kbd
Is the term used on the HTML5 spec for the form fields like text and checkboxes.
Typically surrounds a form-control and a label.
Use one of the has-error classes on the form-group div.
The help-block will be styled accordingly.
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.
HTML + CSS, no action:
http://getbootstrap.com/javascript/#tabs
TODO: possible without IDs?
Failed attempts:
http://getbootstrap.com/javascript/#dropdowns
Split button dropdown. Bad for mobile since hard to click on the small button.
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:
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.
Use with custom class: