Twitter Bootstrap

, .error

, .info

, .success on .control-group to change the label, input, and possible help/error

Input

• • • • • • • • • Surround input with for checkbox/radio – Default for checkbox is vertically stacked Can apply .inline class to stack horizontally Selects actually look pretty by default – also supports multiple attribute .search-query for type=“text” for round Can a wrapper with .input-prepend and .input-append to stick to inputs – spans need .add-on for styling Can size them in a number of ways – .input-block-level, input sizing, grid sizing Can use a span with .uneditable-input Use span with .help-inline for help next to controls Supports disabled, required, pattern, etc.

Buttons

• Having clear nice looking buttons greatly increases the usability of your web site • • Can size them in a number of ways – .btn-block, .btn-large, .btn-small, .btn-mini, grid sizing Can be applied to ,, or

Dropdowns

• • Drop downs are like context menus To use dropdowns need JavaScript plugins (more next)

• Action
• Another action
• Separated link
• More options
  ...

Plugins

• • • • Can be included individually or all at once – some have required dependencies

bootstrap.js and bootstrap.min.js contain all plugins in a

single file.

Plugins can be used purely through data-markup – without writing any JavaScript (with a couple of exceptions) Or without any markup and solely from JavaScript

Button groups

• Can combine sets of .btn-group into a .btn-toolbar • Can also be toggled via JavaScript plugin – – data-toggle=“buttons-checkbox” data-toggle=“buttons-radio”

Navigation

• There are three ways of displaying nav – Tabs – Pills – Lists – Tabs can be tabbed in any direction

Navbars

• Can create a navbar using a couple of divs – – – – – – – .navbar, and .navbar-inner supports .brand and ul with basic .nav

supports form elements and drop downs can .pull-left and .pull-right elements can add .navbar-fixed-top so it stays at the top (or bottom) navbars can be responsive can support inverse color

Breadcrumbs and pagination

• Breadcrumbs by adding .breadcrumb to a

– use .divider to separate the links • Surround the
with a
• • • For both use .disabled for un-clickable links and .active to indicate current Can move around with .pagination-center and .pagination right Add a .pager class to a
to make previous and next buttons

Labels, Badges, and Progress

Heroes

• Hero-unit – jumbo-tron style component for showcasing key content – synonymous with Bootstrap at this point

Thumbnails

• Grids of images, video or text

Alerts

• When you need to let the user know some message – but you want them to be able to close it • Can use data-dismiss=“” to allow closing

Modals

• Dialog boxes – create

with .model and .hide
– – href needs to refer to its id data-toggle to launch and data-dismss to close Launch modal

×

Modal header

Tooltips and Popovers

• Both require a little JavaScript to turn on

Other Controls

• • • • Accordion / Collapse – To allow viewing a single section in multiple sections of content Carousel – To view a collection of images – Requires a line of JavaScript $(“#mycarousel”).carousel() to autostart Typeahead – input but allows autocomplete Affix – Like a sideway intra-page navigation system that auto-updates

Responsive

• • • Additional style sheet needed – Requires you to make decisions about what to see in the various environments Use classes to turn on for specific or hide for specific environments – – .visible-phone, .visible-tablet, .visible-desktop .hidden-phone, .hidden-tablet, .hidden-desktop Can place sections of navbar in .nav-collapse

Summary

• • • Use bootstrap to make your web pages look nice – for demos – while you wait for designers Provide many of the most commonly used “controls” – which conform to the same styles Lavish Bootstrap to customize colors