twitter bootstrap

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