Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.

Download

Using bootstrap-modal

$('#my-modal').modal(options)

Options

Name	type	default	description
backdrop	boolean	false	Includes a modal-backdrop element
keyboard	boolean	false	Closes the modal when escape key is pressed
show	boolean	false	Opens modal on class initialization

Markup

You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.

<a class="btn" data-controls-modal="my-modal" data-backdrop="true" >Launch Modal</a>

Notice If you want your modal to animate in and out, just add a .fade class to your .modal element (refer to the demo to see this in action).

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

$('#my-modal').modal({
  closeOnEscape: true
})

.modal('toggle')

Manually toggles a modal.

$('#my-modal').modal('toggle')

.modal('show')

Manually opens a modal.

$('#my-modal').modal('show')

.modal('hide')

Manually hides a modal.

$('#my-modal').modal('hide')

.modal(true)

Returns an elements modal class instance.

$('#my-modal').modal(true)

Notice Alternatively, this can be retrieved with $().data('modal').

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:

Name	Description
show	This event fires immediately when the show instance method is called.
shown	This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide	This event is fired immediately when the hide instance method has been called.
hidden	This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

$('#my-modal').bind('hidden', function () {
  // do something ...
})

Demo

Launch Modal

This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.

Download

Using boostrap-dropdown.js

$('#topbar').dropdown()

Markup

To quickly add dropdown functionality to any nav element, use the data-dropdown attribute. Any valid bootstrap dropdown will automatically be activated.

<ul class="tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown" data-dropdown>
    <a href="#" class="dropdown-toggle">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a href="#">Secondary link</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Another link</a></li>
    </ul>
  </li>
</ul>

Notice If your ui has several dropdowns, consider adding the data-dropdown attribute to a more significant container element like .tabs or .topbar.

Methods

$().dropdown()

A programatic api for activating menus for a given topbar or tabbed navigation.

Demo

This plugin is for adding the scrollspy (auto updating nav) interaction to the bootstrap topbar.

Download

Using boostrap-scrollspy.js

$('#topbar').dropdown()

Markup

To easily add scrollspy behavior to your nav, just add the data-scrollspy attribute to the .topbar.

<div class="topbar" data-scrollspy >...</div>

Methods

$().scrollspy()

Auto activates navigation buttons by users scroll position.

$('body > .topbar').scrollSpy()

Notice Topbar anchor tags must have resolvable id targets. For example, a <a href="#home">home</a> might correspond to a <div id="home"></div>.

.scrollspy('refresh')

The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body like below.

$('body').scrollspy('refresh')

Demo

Look at the topbar navigation on this page.

This plugin adds quick, dynamic tab and pill functionality.

Download

Using boostrap-tabs.js

$('.tabs').tabs()

Markup

You can activate a tab or pill navigation without writing any javascript by simply giving them a data-tabs or data-pills attribute.

 <ul class="tabs" data-tabs="pls" >...</ul>

Methods

$().tabs or $().pills

Activates tab and pill functionality for a given container. Tab links should reference id's in the document.

<ul class="tabs">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="pill-content">
  <div class="active" id="home">...</div>
  <div id="profile">...</div>
  <div id="messages">...</div>
  <div id="settings">...</div>
</ul>

<script>
  $(function () {
    $('.tabs').tabs()
  })
</script>

Demo

• Home
• Profile
• Messages
• Settings

Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!

Download

Using bootstrap-twipsy.js

$('#example').twipsy(options)

Options

Name	type	default	description
animate	boolean	true	apply a css fade transition to the tooltip
delayIn	number	0	delay before showing tooltip (ms)
delayOut	number	0	delay before hiding tooltip (ms)
fallback	string	''	text to use when no tooltip title is present
placement	string	'above'	how to position the tooltip - above | below | left | right
html	boolean	false	allows html content within tooltip
live	boolean	false	use event delegation instead of individual event handlers
offset	number	0	pixel offset of tooltip from target element
title	string | function	'title'	attribute or method for retrieving title text
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual

Methods

$().twipsy(options)

Attaches a twipsy handler to an element collection.

.twipsy('show')

Reveals an elements twipsy.

$('#element').twipsy('show')

.twipsy('hide')

Hides an elements twipsy.

$('#element').twipsy('hide')

.twipsy(true)

Returns an elements twipsy class instance.

$('#element').twipsy(true)

Notice Alternatively, this can be retrieved with $().data('twipsy').

Demo

The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!

Download

Using boostrap-popover.js

$('#example').popover(options)

Options

Name	type	default	description
animate	boolean	true	apply a css fade transition to the tooltip
delayIn	number	0	delay before showing tooltip (ms)
delayOut	number	0	delay before hiding tooltip (ms)
fallback	string	''	text to use when no tooltip title is present
placement	string	'right'	how to position the tooltip - above | below | left | right
html	boolean	false	allows html content within tooltip
live	boolean	false	use event delegation instead of individual event handlers
offset	number	0	pixel offset of tooltip from target element
title	string | function	'title'	attribute or method for retrieving title text
content	string | function	'data-content'	attribute or method for retrieving content text
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

$('#element').popover('show')

.popover('hide')

Hides an elements popover.

$('#element').popover('hide')

Demo

hover for popover

The alert plugin is a super tiny class for adding close functionality to alerts.

Download

Using bootstrap-alerts.js

$(".alert-message").alert()

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Demo