Twitter Bootstrap

Agenda What is it? Grids and Fluid layouts Globals and Typography Tables, Forms and Buttons Navigation Media and thumbnails Responsive JavaScript plugins

What is Twitter Bootstrap CSS framework Makes creating layouts easier Commonly used set of classes Responsive JavaScript components for UI

Grid and layouts Based on a 12 column grid system – Divisible by 2 and 3 Easy to create things that line up Fixed or fluid containers and fixed or fluid rows Recommendation: Always use fluid rows! – helps when extracting partials to place in modals (more later) – fixed containers are fine for forms Important and tricky! – In fixed: number of columns in nested rows should add up to the number of columns of its parent. – In fluid: number of columns in nested rows should always add up to 12

Global reset Do a reset via normalize.css Remove margin on the body Set background-color: white; on the body attributes as our typographic base Set the global link color and apply link underlines only on :hover

Typography font-size is 14px, with a line-height of 20px Use normal headers, b, strong, i, p, etc..lead class.text-left,.text-center,.text-right.text-warning,.text-error,.text-info,.text-success abbr, address, blockquote ul (.unstyled and.inline) dl, dt, dd (.dl-horizontal) code, pre (.pre-scrollable)

Tables For add a “table” class (.table) – Combine with: –.table-striped,.table-bordered,.table-hover,.table-condensed Supports, and s can add –.warning,.error,.info,.success

Forms By default: left-aligned labels on top of form controls Supports – bold with an underline.form-inline (to stack horizontally).form-horizontal (for rows) –.control-group (like row but with more padding) – labels need.control-label (I don’t like this) – align with.controls or.form-actions for buttons Can use.warning,.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 One fine body… Close Save changes

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