Some notes on Bootstrap features

BootstrapNotes.md

Bootstrap Notes

Overview

Responsive Design CSS. Offers CSS hooks to adjust behavior of page as you change the size, along with other goodies.

Uses a 12-column grid format, in other words you can divide any section into 12 pieces (or any divisor of 12). We'll see details later.

Any of these settings can be adjusted by editing LESS files.

Basic Elements

Typographic

• Standard font settings for sans-serif fonts, 14 pixels base size.
• Can add smaller dimmer text by using <small> tags.
• Can use class='lead' to indicate a leading paragraph. Larger font size, lighter weight, taller.
• <small> shrinks text by 85% on normal body.
• Can use <strong> and <em> for bold and italic.
• Other classes that change appearance: muted, text-warning, text-error, text-info, text-success. By default, these mostly carry color changes.
• <abbr> tags will get presentation settings, and different ones if they carry .initialism class.
• <address> tags are via display: block, need to use <br> to create multiple lines.
• Use <blockquote> for quotes. Wrap subsections in <p>, sign them by <small>. Use <cite> if needed. Add a class of .pull-right to have it float right.
• Bootstrap also offers formatting for the 3 list types: <ul>, <ol>, <dl>. Class of .unstyled would remove the bullets. Use .dl-horizontal class to make definition lists horizontal (<dd> and <dt> on same line).
• Code should use <code> for inline, <pre> for block.

Tables

• Table elements supported: <table>, <thead>, <tbody>, <tr>, <td>, <th>, <caption>. Add class='table' to the <table> element.
• Other optional table classes: .table-striped, .table-bordered, .table-hover, and .table-condensed.
• Classes for table rows: .success, .error, .warning, .info.

Forms

• Form formatting comes by default, no classes needed.
• Use .form-search on the <form> tag, and .search-query on the <input> tag for nicer search boxes/buttons.
• Use .form-inline class to make the whole form on one line.
• To create a form where labels and corresponding inputs are on the same line: Class .form-horizontal on the <form>, wrap label and input in a .control-group div, add .control-label class to labels, wrap associated controls to a .controls div for alignment.
• Wrap inputs inside the labels for them.
• input supported types: text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.
• checkbox and radio inputs: Set those words as class attributes to the corresponding labels.
• For multiple checkboxes on same line, add .inline class to labels.
• To add content right before or after an input, wrap the input in a div with .input-prepend or .input-append class, and put the item you want to place in a <span> with class .add-on. Can also use <button> with class btn instead of span. Works real nice in a search form.
• Input box sizes classes: input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge
• .uneditable-input
• Put form actions in a .horizontal-form.
• For form help text <span>s, use .help-inline or .help-block.
• Form control states: :hover, disabled, .warning, .error, .success.

Buttons and Links

• Button/Link classes: btn, btn btn-primary, btn btn-info, btn-success, btn btn-warning, btn btn-danger, btn btn-inverse, btn btn-link.
• Button sizes: .btn-large, .btn-small, or .btn-mini.
• "Block level buttons": .btn-block. Disabled: .disabled.
• Image classes: img-rounded, img-circle, img-polaroid.
• 140 icons we can use. Get them as an <i> tag with class icon-whatever. Eg: <i class="icon-edit"></i>. Add .icon-white for white icons.
• Can make "button groups" with .btn-toolbar and .btn-group, and putting the icons inside <a class="btn"> tags

Layout Components

Javascript plugins offering standard widgets.

Dropdown Menu

• Use <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">.
• List items for the choices, with <a> tags in them.
• Can set a .divider class on a list item for a divider.
• Use .pull-right class to right-align the menu on its parent object.
• Use .dropdown-submenu on a list item to turn it into a submenu.

Button Groups

• Form button groups with a .btn-group classed div.
• Populate it with .btn classed <button>s.
• The corner buttons of the group get rounded corners on their outside.
• Wrap multiple groups in a .btn-toolbar div to place them all in one line.
• For vertical stacking, use .btn-group-vertical along with .btn-group.
• For a button with a dropdown, wrap the button and dropdown menu in a .btn-group. You can also use <span class="caret"></span> to indicate it is a dropdown. Need some data-toggle settings to make it work, more on that later.
• Dropup menus, use .dropup alongside .btn-group.

Navigation Elements

• Use .nav class.
• Use .active to indicate the current element.
• Some styles: .nav-tabs, .nav-pills.
• Use .disabled for a disabled link.
• .nav-stacked for vertical stacking.
• Can combine with dropdowns.
• For "navigation lists" use .nav-list, and .nav-header for the list headers.
• For "tabbable navigation", use a .tab-content div, with .tab-pane divs in it, optionally with .fade on them. data-toggles to make the connections. Enclose nav-bar and tab content in a tabbable div. Optionally with .tabs-below or .tabs-left etc.

Navbar

Main navigation bar up top, including branding.

• navbar div for the external container.
• navbar-inner div inside it.
• Use brand <a> tag for brand logo/title.
• nav for the actual link list.
• Use .divider-vertical for a vertical divider.
• Forms in the navbar use .navbar-form. Use .pull-left or .pull-right to place them.
• For search forms, use .navbar-search instead.
• For a fixed navbar on the top of the page, use .navbar-fixed-top and add 40px of padding on the <body>. Conversely with .navbar-fixed-bottom.
• Other option: .navbar-static-top.
• For a responsive navbar: Use .nav-collapse.collapse on the content that is to collapse, and .btn-navbar on the toggling button, with some data-toggle features on it. Use three <span>s with .icon-bar for a classical button look. Will need bootstrap-responsive.css and collapse.js or the full bootstrap.js.
• .navbar-inverse for an inverted color look.

Breadcrumbs

• Use a <ul> with class .breadcrumb.
• Class .divider on the <span> separators, use any symbol you want for them: /, →, » etc.

Pagination

• Simply put a .pagination div, and a <ul> list in it.
• Can center it with .pagination-centered.
• Can use .disabled or .active on some <li>s.
• Control the size with .pagination-large, .pagination-small, .pagination-mini.
• Can also instead drop the div, and use .pager class on the <ul>. You can use .previous or .next classes on the <li>s to align them.

Labels / Badges

• Make them with <span> elements with .label class.
• Append .label-success, .label-warning, .label-important, .label-info, .label-inverse.
• Can make "badges" instead, with more rounded corners, using .badge etc instead.

Other layout elements

• "Hero units" via the .hero-unit class. Used for big landing page content.
• Use .page-header on the heading div for some extra spacing and font sizes.
• .thumbnail class for a thumbnail. Use it on the containing <a>. Place them in a .thumbnails <ul>. Can use .caption too.
• Alerts via .alert class on the div. Use data-dismiss="alert" on the button to close the alert. Use .alert-block for multiline alerts. Other color options via .alert-error, .alert-success, or .alert-info.
• Progress bars: .progress, .progress-striped. .active to make it "live". .bar.bar-success or .bar-error etc in containing divs. Might need to also set: `style="width: 35%;" or whatnot.
• "Media objects" via a .media div, and .media-object, .media-body, .media-heading etc in it. Can use .pull-left and friends. Enclose multiple objects in a .media-list div.

Miscellaneous

• Use .well in a container div to make the content look sunk. Also .well-large and .well-small.
• .pull-left, .pull-right to float things.
• .clearfix to clear floats.

Javascript Scripts

13 jQuery plugins that enhance Bootstrap.

Used via a data- API. No need to write much Javascript.

Transitions

Some examples:

• Sliding or fading in modals
• Fading out tabs
• Fading out alerts
• Sliding carousel panes

Modal

For modal windows.

• Use modal hide fade classes on the div.
• Can use .modal-header, .modal-body, .modal-footer for parts.
• <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
• Call the modal from a link: <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
• Call from Javascript: $('#myModal').modal(options).
• Options to be passed via either data- attributes or from Javascript:
  • backdrop if it closes by clicking outside of it.
    • keyboard to be able to close it via Esc.
    • show starts with it shown.
    • remote provide path to inject content using jQuery's load.
• $('#myModal').modal('toggle').
• $('#myModal').modal('show').
• $('#myModal').modal('hide').
• Events to listen to: show (method fired), shown (actually shown to user), hide, hidden.

Drodown

Example:

<li class="dropdown">
	<a href="#" id="drop" role="button" class="dropdown-toggle" data-toggle="dropdown">Word <b class="caret"></b></a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="drop">
		<li><a tabindex="-1" href="#">MAKE magazine</a></li>
		<li><a tabindex="-1" href="#">WordPress DevelopmentS</a></li>
		<li><a tabindex="-1" href="#">Speaking Engagements</a></li>
		<li class="divider"></li>
		<li><a tabindex="-1" href="#">Social Media</a></li>
	</ul>
</li>

To use in javascript: $('.dropdown-toggle').dropdown(), $().dropdown('toggle').

Scrollspy

Allows targetting sections of the page based on scroll position.

• To use, add data-spy="scroll" and data-target=".navbar" to the <body> tag. Then in the navbar have page anchors like <a href="#pork">Pork</a></li>. The plugin will set the .active state to the appropriate anchor.
• Can also do: $('#navbar').scrollspy().
• Options: offset, by about 50 pixels if using a fixed navbar. activate is an event that fires when .active changes.

Toggleable Tabs

Example:

<ul class="nav nav-tabs">
	<li><a href="#home" data-toggle="tab">Home</a></li>
	<li><a href="#profile" data-toggle="tab">Profile</a></li>
	<li><a href="#messages" data-toggle="tab">Messages</a></li>
	<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="home">...</div>
	<div class="tab-pane" id="profile">...</div>
	<div class="tab-pane" id="messages">...</div>
	<div class="tab-pane" id="settings">...</div>
</div>

To programmatically enable tabs:

$('#myTab a').click(function (e) {
    e.preventDefault();
	$(this).tab('show');
})

Ways to toggle tabs:

('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Events to listen to: show, shown.

Tooltips

<a href="#" rel="tooltip" title="This is the tooltip">Tooltip Example</a>
$('#example').tooltip(options)

Options (either through javascript or via data-):

• animation: Adds a fade transition
• html: The "title" is interpreted as html
• placement: "top", "bottom", "left", "right"
• selector: Tooltip objects will be delegated to the specified objects, if not false
• title: Default tooltip value if not title attribute present
• trigger: "hover", "click", "focus", "manually"
• delay: Either a single number, or { show: 500, hide: 300 }

Methods:

$().tooltip(options)
$('#element').tooltip('show')
$('#element').tooltip('hide')
$('#element').tooltip('toggle')
$('#element').tooltip('destroy')

Popovers

Extended view version of tooltips.

Example:

<a href="#" class="btn" rel="popover" title="Using Popover" data-content="Just add content to the data-content attribute.">Click Me!</a>

Javascript call: $('#example').popover(options)

Options:

• animation: Adds a fade transition
• html: The "title" is interpreted as html
• placement: "top", "bottom", "left", "right"
• selector: Tooltip objects will be delegated to the specified objects, if not false
• title: Default tooltip value if not title attribute present
• content: Default content
• delay: Either a single number, or { show: 500, hide: 300 }

Methods:

$().popover(options)
$('#element').popover('show')
$('#element').popover('hide')
$('#element').popover('toggle')
$('#element').popover('destroy')

Alerts

Implemented via a .alert class.

Can add dismiss functionality to them via: <a class="close" data-dismiss="alert" href="#">&times;</a> or $(".alert").alert().

Events: close, closed.

Buttons

• Can use something like: data-loading-text="Loading..." to give it a "loading state" status.
• A button with data-toggle="button" becomes "toggleable": clicking on it toggles the .active class.
• Can make a button group act as "checkboxes" by setting data-toggle="buttons-checkbox" in the .btn-group div.
• Similarly for radio buttons, use data-toggle="buttons-radio".

Methods:

$().button('toggle')
$().button('reset')
$().button('someString')

Collapse

This plugin makes it easy to add collapsible divisions of the page. Can be used for accordions.

Use class="accordion-toggle" data-toggle="collapse".

Better to look at some existing examples.

Standard methods and events.

Carousel

Example code:

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">...</div>
        <div class="item">...</div>
        <div class="item">...</div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Options:

• interval in ms.
• pause is set to 'hover' will pause while hovering over it.

Methods:

.carousel('cycle')
.carousel('pause')
.carousel('number')
.carousel('prev')
.carousel('next')

Events: slide, slid

Typeahead

For autocompletion in forms.

Add these attributes to the input: data-provide="typeahead", data-items="4", data-source="[ ... ]".

Options:

• source array or function that takes as input "query" string and "process" callback. Can call either synchronously or asynchronously.
• items number of items to display
• minLength of characters before it's triggered
• matcher function that determines if an item matches the current query
• sorter method used to sort the results
• updater method used to return the selected item
• highlighter

Affix

Can be used to lock divs in place.

Use as: <div data-spy="affix" data-offset-top="200"> Can also use affix-top or affix-bottom