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 .paginationright
• 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" datadismiss="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