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• Use the @baseFontFamily, @baseFontSize, and

@baseLineHeight attributes as our typographic base

• Set the global link color via @linkColor 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 <table> add a “table” class (.table)– Combine with:– .table-striped, .table-bordered, .table-hover, .table-

condensed

• Supports, <thead><tr><th> and <caption>• <tr>s can add

– .warning, .error, .info, .success

Forms

• By default: left-aligned labels on top of form controls

• Supports <fieldset><legend>– 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 <label> 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 <a>,<button>, or<input>

Dropdowns

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

next)<div class="dropdown">

<!-- Link or button to toggle dropdown --><ul class="dropdown-menu" role="menu">

<li><a tabindex="-1" href="#">Action</a></li><li><a tabindex="-1" href="#">Another action</a></li><li class="divider"></li><li><a tabindex="-1" href="#">Separated link</a></li><li class="dropdown-submenu“> <a tabindex="-1" href="#">More options</a> <ul class="dropdown-menu"> ... </ul></li>

</ul></div>

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 <ul>– use .divider to separate the links

• Surround the <ul> with a <div class=“pagination”>

• 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 <ul> 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=“<id>” to allow closing

Modals

• Dialog boxes– create <div> with .model and .hide– <a> href needs to refer to its id– data-toggle to launch and data-dismss to close

<a href="#myModal" class="btn" data-toggle="modal">Launch modal</a> <div id="myModal" class="modal hide" tabindex="-1"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 id="myLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal">Close</button> <button class="btn btn-primary">Save changes</button> </div></div>

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