This page illustrates how to integrate javascript with the Bootstrap library. Below we go over the basics and provide you with some awesome plugins to get you started!

What is all this?

With this example page, we've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with jQuery and Ender, but we encourage you to extend and modify them to fit your development needs!

Do I need these?

The short answer is NO! These plugins were provided to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality.

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

Download

Using bootstrap-alert

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

Methods

$().alert

Wraps all alerts with close functionality.

Demo

×

Holy guacamole! Best check yo self, you’re not looking too good.

×

Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

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

  • delayIn (number) - delay before showing tooltip (ms).
  • delayOut (number) - delay before hiding tooltip (ms).
  • fallback (string) - fallback text to use when no tooltip text.
  • placement (string) - position of tooltip - above | below | left | right.
  • html (boolean) - is tooltip content HTML?
  • live (boolean) - use live event support?
  • offset (number) - pixel offset of tooltip from element.
  • title (string|function) - attribute/callback containing tooltip text.
  • trigger (string) - how tooltip is triggered - hover | focus | manual.

Methods

$().twipsy

Attaches a twipsy handler to an element collection.

Demo

Mustache next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table cardigans seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, williamsburg banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table PBR banksy Austin freegan cred raw denim single-origin coffee viral.