slides - Brain Hz Consulting Blog

Twitter Bootstrap
What is it?
Grids and Fluid layouts
Globals and Typography
Tables, Forms and Buttons
Media and thumbnails
JavaScript plugins
What is Twitter Bootstrap
CSS framework
Makes creating layouts easier
Commonly used set of classes
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
font-size is 14px, with a line-height of 20px
Use normal headers, b, strong, i, p, etc.
.lead class
.text-warning, .text-error, .text-info, .text-success
abbr, address, blockquote
ul (.unstyled and .inline)
dl, dt, dd (.dl-horizontal)
code, pre (.pre-scrollable)
• 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
• 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
• 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.
• 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>
• 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">
• 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”
• There are three ways of displaying nav
– Tabs
– Pills
– Lists
– Tabs can be tabbed in any direction
• 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
Labels, Badges, and Progress
• Hero-unit
– jumbo-tron style component for showcasing key content
– synonymous with Bootstrap at this point
• Grids of images, video or text
• 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
• 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 class="modal-body">
<p>One fine body…</p>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
<button class="btn btn-primary">Save changes</button>
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
• Typeahead
– input but allows autocomplete
• Affix
– Like a sideway intra-page navigation system that auto-updates
• Additional style sheet needed
– Requires you to make decisions about what to see in the various
• Use classes to turn on for specific or hide for specific
– .visible-phone, .visible-tablet, .visible-desktop
– .hidden-phone, .hidden-tablet, .hidden-desktop
• Can place sections of navbar in .nav-collapse
• 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

similar documents