JavaScript in Bootstrap

  • Individual or compiled

    • Plugins can be included individually (though some have required dependencies), or all at once. Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.

  • Data attributes

    • You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.

    That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: 

    $('body').off('.data-api')

    Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

    $('body').off('.alert.data-api')
  • Programmatic API

    • We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.

    $(".btn.danger").button("toggle").addClass("fat")

    All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

    $("#myModal").modal() 
// initialized with defaults

$("#myModal").modal({ keyboard: false })
// initialized with no keyboard

$("#myModal").modal('show')
// initializes and invokes show immediately

    Each plugin also exposes its raw constructor on a `Constructor` property: $.fn.popover.Constructor. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel=popover]').data('popover').

  • No Conflict

    • Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call .noConflict on the plugin you wish to revert the value of.

    var bootstrapButton = $.fn.button.noConflict()
// return $.fn.button to previously assigned value

$.fn.bootstrapBtn = bootstrapButton
// give $().bootstrapBtn the bootstrap functionality
  • Events

    • Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.

    All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

    $('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault()
    // stops modal from being shown
})

Transitions bootstrap-transition.js

About transitions

For simple transition effects, include bootstrap-transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.

Use cases

A few examples of the transition plugin:

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

Modals modal.js

  • Examples

    • Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

    • Static example

      • A rendered modal with header, body, and set of actions in the footer.

      Modal header

      One fine body…

      Close Save changes 
      <div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close"
    	data-dismiss="modal" aria-hidden="true">
    	&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>
    • Live demo

      • Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

      Launch demo modal 
      <!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn"
	data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade"
	tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
	aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
    	aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

  • Usage

    • Via data attributes

      • Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

      <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
    • Via JavaScript

      • Call a modal with id myModal with a single line of JavaScript:

      $('#myModal').modal(options)
    • Options

      • Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

      Name type default description
      backdrop boolean true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
      keyboard boolean true Closes the modal when escape key is pressed
      show boolean true Shows the modal when initialized.
      remote path false

      If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

      
<a data-toggle="modal"
href="remote.php"
data-target="#modal">
click me
</a>

  • Methods

    • .modal(options)

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

      $('#myModal').modal({
  keyboard: false
})
    • .modal('toggle')

      • Manually toggles a modal.

      $('#myModal').modal('toggle')
    • .modal('show')

      • Manually opens a modal.

      $('#myModal').modal('show')
    • .modal('hide')

      • Manually hides a modal.

      $('#myModal').modal('hide')

  • Events

    • Bootstrap's modal class exposes a few events for hooking into modal functionality.

    Event 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). 
    $('#myModal').on('hidden', function () {
  // do something
})

Dropdowns bootstrap-dropdown.js