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').

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 abililty 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
})

For detailed information about the bootstrap javascript framework to go first bootstrap documentation

JS files

All javascript files are located in the directory assets / js directory contains demo and lib. Plugins are installed in the assets / plugins.

In general each HTML page loads all these 39 .js files. In your project you can minify all these files into 1 or do anything you want, but in download package i included all files so you can easily edit/remove/add new files.

Library

jQuery & jQuery UI

jQuery - 1.8.3

jQuery UI - 1.9.1

bootstrap - 2.2.2

<script src="assets/js/lib/jquery.js"></script> 
<script src="assets/js/lib/jquery-ui.js"></script>
<script src="assets/js/lib/jquery.cookie.js"></script> 
<script src="assets/js/lib/jquery.date.min.js"></script> 
<script src="assets/js/lib/jquery.mousewheel.js"></script> 
<script src="assets/js/lib/jquery.load-image.min.js"></script>
<script src="assets/js/lib/bootstrap/bootstrap.js"></script> 

<!-- Plugins Bootstrap -->
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script> 
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>
<script src="assets/plugins/bootstrap-fuelux/js/all-fuelux.min.js"></script> 
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>
<script src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
<script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script> 
<script src="assets/plugins/bootstrap-toggle-button/js/bootstrap-toggle-button.js"></script> 
<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> 
<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script> 
<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script> 
<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script>
<script src="assets/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js"></script> 
<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script> 
<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard-combi.js"></script>
<script src="assets/plugins/bootstrap-image-gallery/js/bootstrap-image-gallery.min.js"></script>
 

<!-- Plugins Custom - Only example --> 
<script src="assets/plugins/pl-extension/google-code-prettify/prettify.js"></script>
<!-- Plugins Custom - System --> 
<script src="assets/plugins/pl-system/nicescroll/jquery.nicescroll.min.js"></script> 
<script src="assets/plugins/pl-system/xbreadcrumbs/xbreadcrumbs.js"></script> 
<!-- Plugins Custom - System info -->
<script src="assets/plugins/pl-system-info/qtip2/dist/jquery.qtip.min.js"></script> 
<script src="assets/plugins/pl-system-info/gritter/js/jquery.gritter.min.js"></script> 
<script src="assets/plugins/pl-system-info/notyfy/jquery.notyfy.js"></script>
<!-- Plugins Custom - Content -->
<script src="assets/plugins/pl-content/list/js/list.min.js"></script> 
<script src="assets/plugins/pl-content/list/plugins/list.paging.min.js"></script>
<script src="assets/plugins/pl-content/jpages/js/jPages.js"></script> 
<!-- Plugins Custom - Component -->
<script src="assets/plugins/pl-component/fullcalendar/fullcalendar.min.js"></script> 
<script src="assets/plugins/pl-component/rangeslider/jqallrangesliders.min.js"></script>
<!-- Plugins Custom - Form -->
<script src="assets/plugins/pl-form/uniform/jquery.uniform.min.js"></script> 
<script src="assets/plugins/pl-form/select2/select2.min.js"></script>
<script src="assets/plugins/pl-form/counter/jquery.counter.js"></script> 
<script src="assets/plugins/pl-form/elastic/jquery.elastic.js"></script> 
<script src="assets/plugins/pl-form/inputmask/jquery.inputmask.js"></script> 
<script src="assets/plugins/pl-form/inputmask/jquery.inputmask.extensions.js"></script> 
<script src="assets/plugins/pl-form/validate/js/jquery.validate.min.js"></script> 
<script src="assets/plugins/pl-form/duallistbox/jquery.dualListBox.min.js"></script>
<!-- Plugins Custom - Gallery --> 
<script src="assets/plugins/pl-gallery/nailthumb/jquery.nailthumb.1.1.min.js"></script> 
<script src="assets/plugins/pl-gallery/nailthumb/showLoading/js/jquery.showLoading.min.js"></script>
<script src="assets/plugins/pl-gallery/wookmark/jquery.imagesloaded.js"></script>
<script src="assets/plugins/pl-gallery/wookmark/jquery.wookmark.min.js"></script>
 
<!-- Plugins Tables --> 
<script src="assets/plugins/pl-table/datatables/media/js/jquery.dataTables.js"></script> 
<script src="assets/plugins/pl-table/datatables/plugin/jquery.dataTables.plugins.js"></script> 
<script src="assets/plugins/pl-table/datatables/plugin/jquery.dataTables.columnFilter.js"></script> 

<!-- Plugins data visualization --> 
<script src="assets/plugins/pl-visualization/sparkline/jquery.sparkline.min.js"></script> 
<script src="assets/plugins/pl-visualization/easy-pie-chart/jquery.easy-pie-chart.js"></script> 
<script src="assets/plugins/pl-visualization/percentageloader/percentageloader.min.js"></script>
<script src="assets/plugins/pl-visualization/flot/jquery.flot.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.categories.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.grow.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.orderBars.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.pie.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.resize.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.selection.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.stack.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.stackpercent.js"></script> 
<script src="assets/plugins/pl-visualization/flot/jquery.flot.time.js"></script> 

<!-- main js --> 
<script src="assets/js/core.js"></script> 
<script src="assets/js/application.js"></script>  

<!-- Only This Demo Page -->  
<script src="assets/js/demo/demo-form.js"></script> 

<script>
$(document).ready(function() {

});
</script>

Location

Location of assets/plugins/bootstrap-...

• Bootsrap - Bootbox update
• Bootsrap - Modal + update
• Bootsrap - Datepicker update
• Bootsrap - Datetimepicker new
• Bootsrap - Daterangepicker update
• Bootsrap - Timepicker
• Bootsrap - Colorpicker
• Bootsrap - Fileupload
• Bootsrap - Rowlink
• Bootsrap - ProgressBar
• Bootsrap - WysiHTML5
• Bootsrap - Selectpicker update
• Bootsrap - Multiselect new
• Bootsrap - Combobox new
• Bootsrap - Spinner new
• Bootsrap - Search new
• Bootsrap - Wizard update
• Bootsrap - Wizard 2 new
• Bootsrap - Pillbox new

What is the plan still to add:

• Bootsrap - Editable
• Bootsrap - Tocify

Alert, confirm and flexible dialogs

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter's Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script>

Extends Bootstrap's native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.

A single ModalManager is created by default that can be accessed through the GlobalModalManager variable.

Original bootstrap-modal plugin has been removed from the file and replaced bootstrap.js separate plugin.

  <script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
  <script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>

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.

<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>

Overview

• Backwards compatible
• Responsive
• Stackable
• Full width
• Load content via AJAX
• Disable background scrolling

Call plugin

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

Options

see also bootstrap-modal documentation

Add datepicker picker to field or to any other element.

<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

Call plugin

  $('.datepickers').datepicker(options)

Usage plugin

  <!-- Attached to a field with the format specified via options -->
  <input type="text" value="02-16-2012" id="datepicker">
  
  <script type="text/javascript">
      $('#datepicker').datepicker({ format: 'mm-dd-yyyy' });
  </script>

  <!-- Attached to a field with the format specified via data tag -->
  <input type="text" value="02/16/12" data-date-format="mm/dd/yy" id="datepicker">
  
  <script type="text/javascript">
      $('#datepicker').datepicker();
  </script>

Options

Simple date/time picker component.

<script src="assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

Call plugin

  $('.datetimepickers').datetimepicker(options)

Usage plugin

<div id="datetimepicker" class="input-append date">
  <input data-format="dd/MM/yyyy hh:mm:ss" type="text">
    <span class="add-on">
      <i data-time-icon="fontello-icon-clock" data-date-icon="fontello-icon-calendar">
    </i>
  </span>
</div>

<script type="text/javascript">
  $(function() {
    $('#datetimepicker').datetimepicker({
      language: 'pt-BR'
    });
  });
</script>

This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates.

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter's Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

  <script src="assets/plugins/bootstrap-daterangepicker/js/date.js"></script>
  <script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script>

Call plugin

  $('.daterangepicker').daterangepicker()
  $('input[name="daterange"]').daterangepicker();

Options

• Custom callback handler called when the date range selection is made
• Setting initial start and end dates for the calendars
• Bounding the minimum and maximum selectable dates
• Overriding all labels in the interface with localized text
• Starting the calendar week on any day of week
• Overriding the direction the dropdown expands (left/right of element it's attached to)
• Setting the date format string for parsing string inputs

Default options

<form class="form-horizontal">
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="reservation">Reservation dates:</label>
            <div class="controls">
                <div class="input-prepend">
                    <span class="add-on"><i class="icon-calendar"></i></span>
                    <input type="text" name="reservation" id="reservation" />
                </div>
            </div>
        </div>
    </fieldset>
</form>

<script type="text/javascript">
    $(document).ready(function() {
        $('#reservation').daterangepicker();
    });
</script>

Pre-defined callback handler called when the date range selection

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
    <i class="icon-calendar icon-large"></i>
    <span></span> <b class="caret" style="margin-top: 8px"></b>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('#reportrange').daterangepicker({
       ranges: {
           'Today': ['today', 'today'],
           'Yesterday': ['yesterday', 'yesterday'],
           'Last 7 Days': [Date.today().add({ days: -6 }), 'today'],
           'Last 30 Days': [Date.today().add({ days: -29 }), 'today'],
           'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
           'Last Month': [Date.today().moveToFirstDayOfMonth().add({ months: -1 }), Date.today().moveToFirstDayOfMonth().add({ days: -1 })]
        },
        opens: 'left',
        format: 'MM/dd/yyyy',
        separator: ' to ',
        startDate: Date.today().add({ days: -29 }),
        endDate: Date.today(),
        minDate: '01/01/2012',
        maxDate: '12/31/2013',
        locale: {
            applyLabel: 'Submit',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom Range',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        },
        showWeekNumbers: true,
        buttonClasses: ['btn-danger']
     }, 
     function(start, end) {
        $('#reportrange span').html(start.toString('MMMM d, yyyy') + ' - ' + end.toString('MMMM d, yyyy'));
     }
);

//Set the initial state of the picker label
$('#reportrange span').html(Date.today().add({ days: -29 }).toString('MMMM d, yyyy') + ' - ' + Date.today().toString('MMMM d, yyyy'));

});
</script>

A very cool widget to easily select a time for a text input using your mouse or arrow keys.

<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>

Call plugin

$('.timepicker').timepicker();

Usage plugin

    <!-- Use as component -->
    <div class="input-append">
        <input type="text" class="timepicker input-small">
        <span class="add-on">
            <i class="icon-time"></i>
        </span>
    </div>

Options

A very cool widget to easily select a time for a text input using your mouse or arrow keys.

<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>

Call plugin

$('.colorpicker').colorpicker();

Usage plugin

    <!-- Use as component -->
    <div class="input-append color colorpicker" data-color="rgb(255, 146, 180)" data-color-format="rgb">
        <input type="text" class="span2" value="">
        <span class="add-on">
            <i style="background-color: rgb(255, 146, 180)"></i>
        </span>
    </div>

Options

Methods

.colorpicker(options)

Initializes an colorpicker.

.colorpicker('show')

Show the color picker.

.colorpicker('hide')

Hide the color picker.

.colorpicker('place')

Updates the color picker's position relative to the element.

.colorpicker('setValue', value)

Set a new value for the color picker. Triggers 'changeColor' event.

The file upload plugin allows you to create a visually appealing file or image upload widgets.

<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script>

File upload widgets

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="input-append">
        <div class="uneditable-input span3">
            <i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span>
        </div>
        <span class="btn btn-file"><span class="fileupload-new">Select file</span>
        <span class="fileupload-exists">Change</span><input type="file" /></span>
        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
</div>

<div class="fileupload fileupload-new" data-provides="fileupload">
    <span class="btn btn-file">
        <span class="fileupload-new">Select file</span>
        <span class="fileupload-exists">Change</span>
        <input type="file" />
    </span>
    <span class="fileupload-preview"></span>
    <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
</div>

Image upload widgets

When uploading an image, it's possible to show a thumbnail instead of the filename.

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
    <div>
        <span class="btn btn-file">
            <span class="fileupload-new">Select image</span>
            <span class="fileupload-exists">Change</span>
            <input type="file" />
        </span>
        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
</div>

Select imageChange Remove

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
        <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
    </div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
    <div>
        <span class="btn btn-file">
            <span class="fileupload-new">Select image</span>
            <span class="fileupload-exists">Change</span>
            <input type="file" />
        </span>
        <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
    </div>
</div>

Select imageChange Remove

Select imageChange Remove

<div class="fileupload fileupload-new" data-provides="fileupload">
    <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;">
        <img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" />
    </div>
    <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
    <span class="btn btn-file">
        <span class="fileupload-new">Select image</span>
        <span class="fileupload-exists">Change</span>
        <input type="file" />
    </span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>

Usage plugin

Via data attributes

Add data attributes to register the file upload widget. The main container should either have the .fileupload-new class for a new record or if the record does not have file or .fileupload-exists if an existing file is present. Elements inside the container with the .fileupload-new and .fileupload-exists class will be shown or hidden based on the current state. The content of .fileupload-preview is replaced when a file is selected. Implement a button to clear the file with data-dismiss="fileupload". The content of .fileupload-preview is replaced when a file is selected. Implement a button to clear the file with data-dismiss="fileupload".

Call plugin

$('.fileupload').fileupload()

Layout

Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.

Options

This plugin turns a table row into a clickable link.

<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script>

Call plugin

$('tbody.rowlink').rowlink()

Usage plugin

<table class="table table-bordered table-condensed table-striped" data-provides="rowlink">
    <tr>
        <td><a href="boo.html#feature">Feature</a></td>
        <td class="nohref"><a href="#">Action</a></td>
    </tr>
    <tr>
        <td><a href="base-css.html#tables">Table</a></td>
        <td class="nohref"><a href="#">Action</a></td>
    </tr>
</table>

Via data attributes

Add data-provides="rowlink" to a <table>, <tbody> or <tr> element. The value should be selector to the link, which is a child of the row. A cell can be excluded by adding the .nolink class to the <td>.

Tip! Add .rowlink to your <a>. This prevents the link styling during page load.

Options

Bootstrap-progressbar is a jQuery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.

<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script>

Call plugin

$('.progress .bar').progressbar();

Usage plugin

set the data attribute and remove the width style attribute (alternatively you can set it to 0)

    <!-- data-percentage -->
    <div class="progress progress-info">
        <div class="bar" data-percentage="75"></div>
    </div>

    <!-- data-amount-part and data-amount-total -->
    <div class="progress progress-info">
        <div class="bar" data-amount-part="1337" data-amount-total="9000"></div>
    </div>

Customization

1. alignment

to use a horizontal progressbar which is align to the right you have to add right to the progress element

<div class="progress right progress-info">

to use a vertical progressbar you have to add vertical to the progress element

<div class=progress vertical progress-info">

o use a vertical progressbar which is align to the bottom you have to add vertical and bottom to the progress element

<div class="progress vertical bottom progress-info">

2. text and delay

simply add additional parameters when activating the script

$(document).ready(function() {
    $('.progress .bar').progressbar({
        transition_delay: 300,
        refresh_speed: 50,
        display_text: 2,
        use_percentage: true,
        update: doSomethingCool( current_percentage ) { .. },
        done: doSomethingCool( ) { .. },
        fail: doSomethingCool( error_message ) { .. },
    });
});

Options

3. animation

horizontal

.progress .bar.two-sec-ease-in-out {
    -webkit-transition: width 2s ease-in-out;
    -moz-transition: width 2s ease-in-out;
    -ms-transition: width 2s ease-in-out;
    -o-transition: width 2s ease-in-out;
    transition: width 2s ease-in-out;
}

vertical

.progress.vertical .bar.two-sec-ease-in-out {
    -webkit-transition: height 2s ease-in-out;
    -moz-transition: height 2s ease-in-out;
    -ms-transition: height 2s ease-in-out;
    -o-transition: height 2s ease-in-out;
    transition: height 2s ease-in-out;
}

<div class="progress progress-success right">
    <div data-amount-total="9000" data-amount-part="1337" class="bar six-sec-ease-in-out"></div>
</div>

you have a choice of 2s two-sec-ease-in-out or 4s four-sec-ease-in-out or 6s six-sec-ease-in-out or use custom css

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap.

  <script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script>
  <script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script>

Call plugin

$('#some-textarea').wysihtml5();

Usage plugin

<textarea id="some-textarea" placeholder="Enter text ..."></textarea>

This plugin turns a table row into a clickable link.

<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script>

Call plugin

$('.selectpicker').selectpicker();

Usage plugin

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>

Control size to wrap .selectpicker-block

<select id="selectpicker2" class="span3" data-style="btn-green">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
</select>

Options

$('.selectpicker').selectpicker();

$('select').selectpicker();

$('.selectpicker').selectpicker({
	style: 'btn-info',
  	size: 3
});

Apply .span* class to the selects to set the width. Add the disabled attribute to the select to apply the .disabled class.

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.

<script src="assets/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>

Call plugin

$('#multiselect').multiselect();

Usage plugin

<select id="multiselect">
  <option value="item1">item 1</option>
  <option value="item2">item 2</option>
  <option value="item3">item 3</option>
  <option value="item4">item 4</option>
  <option value="item5">item 5</option>
  <option value="item6">item 6</option>
</select>

Options

$(document).ready(function() {
    $('.multiselect').multiselect()
    
    $('.multiselect').multiselect({
        'none': 'select something...'
    });

    $('.multiselect').multiselect({
        container: '<span class="dropdown" />',
    });
});

Combines input and dropdown for easy and flexible data selection.

<script src="assets/plugins/bootstrap-fuelux/js/combobox.js.js"></script>

Call plugin

$('#myCombobox').combobox()

Usage plugin

<div class="input-append dropdown combobox">
    <input class="span3" type="text">
    <button class="btn" data-toggle="dropdown"><i class="caret"></i></button>
    <ul class="dropdown-menu">
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li class="divider"></li>
        <li><a href="#">Item After Divider</a></li>
    </ul>
</div>

Methods

Events

Provides convenient numeric input with increment and decrement buttons.

<script src="assets/plugins/bootstrap-fuelux/js/spinner.js"></script>

Call plugin

$('#MySpinner').spinner()

Usage plugin

<div id="MySpinner" class="spinner">
    <input type="text" class="input-mini spinner-input">
    <div class="spinner-buttons  btn-group btn-group-vertical">
        <button class="btn spinner-up">
        	<i class="fontello-icon-up-micro"></i>
        </button>
        <button class="btn spinner-down">
        	<i class="fontello-icon-down-micro"></i>
        </button>
    </div>
</div>

Methods

Options

Events

Combines input and button for integrated search interaction.

<script src="assets/plugins/bootstrap-fuelux/js/search.js"></script>

Call plugin

$('#MySearch').search()

Usage plugin

<div id="MySearch" class="input-append search">
	<input type="text" class="input-medium" placeholder="Search"><button class="btn"><i class="fontello-icon-search-5"></i></button>
</div>

Methods

Events

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard.js"></script>

Call plugin

$('#wizard').bootstrapWizard();

Usage plugin

<!-- Base -->
<div id="wizard">
    <div class="navbar">
        <div class="navbar-inner">
           <div class="container">
                <ul>
                    <li><a href="#tab1" data-toggle="tab">First</a></li>
                    <li><a href="#tab2" data-toggle="tab">Second</a></li>
                    <li><a href="#tab3" data-toggle="tab">Third</a></li>
                </ul>
            </div>
        </div>
        <div class="tab-content">
            <div class="tab-pane" id="tab1"> 1 </div>
            <div class="tab-pane" id="tab2"> 2 </div>
            <div class="tab-pane" id="tab3"> 3 </div>
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>	
</div>

Options

This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.

<script src="assets/plugins/bootstrap-wizard-2/js/bwizard-only.min.js"></script>

Call plugin

$("#wizard").bwizard();

For detailed info visit the original documentation

Easily manage selected items with color-coded text labels.

<script src="assets/plugins/bootstrap-fuelux/js/pillbox.js"></script>

Call plugin

$('#MyPillbox').pillbox()

Usage plugin

<div id="MyPillbox" class="pillbox">
    <ul>
        <li data-value="foo">Item One</li>
        <li class="status-success">Item Two</li>
        <li class="status-warning">Item Three</li>
        <li class="status-important">Item Four</li>
        <li class="status-info">Item Five</li>
        <li class="status-success">Item Six</li>
        <li>Item Seven</li>
    </ul>
</div>

Methods

Location

Location of assets/plugins/

• jQuery - Datatable
• jQuery - Sparklines
• jQuery - Flot Chart
• jQuery - Uniform
• jQuery - Select2 update
• jQuery - Character & Word counter
• jQuery - Elastic
• jQuery - Inputmask
• jQuery - Validate
• jQuery - Nicescroll update
• jQuery - gTip2
• jQuery - List.js
• jQuery - Fullcalendar
• jQuery - xBreadcrumbs
• jQuery - Google-code-prettify
• jQuery - Image Gallery new
• jQuery - Nailthumb new
• jQuery - Wookmark new
• jQuery - Rangeslider new
• jQuery - jPages new
• jQuery - File upload new
• jQuery - Dual listbox new
• jQuery - Gritter new
• jQuery - Notyfy new
• jQuery - Easy Pie Chart new
• jQuery - Knob new
• jQuery - Percentage Loader new

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

Main Specifications plugin is set directly in the file jquery.dataTables.js

  <script src="assets/plugins/datatables/media/js/jquery.dataTables.js"></script>
  <script src="assets/plugins/datatables/plugin/jquery.dataTables.plugins.js"></script>
  <script src="assets/plugins/datatables/plugin/jquery.dataTables.columnFilter.js"></script>

Call plugin

$('#table').datatable();

Options for Boo

//* http://datatables.net/blog/Twitter_Bootstrap_2
$.extend($.fn.dataTableExt.oStdClasses, {
    sWrapper: "datatable-wrapper form-inline",
    sFilter: "table-global-filter pull-right",
    sInfo: "table-message-info",
    sPaging: "btn-group paging_",
    sLength: "length pull-left",
    //sProcessing: "", 
    // Paging two button
    sPagePrevEnabled: "btn previous",
    sPagePrevDisabled: "btn previous disabled",
    sPageNextEnabled: "btn next",
    sPageNextDisabled: "btn next disabled",
    
    // Paginate full numbers
    sPageButton: "btn btn-boo",
    sPageButtonActive: "btn btn-sky active",
    sPageButtonStaticDisabled: "btn disabled",
    sPageFirst: "btn",
    sPageLast: "btn",
    sPageNext: "btn",
    sPageLast: "btn"
});

Usage plugin

<table id="exampleDT" class="table table-striped table-hover">
<caption>Default Table Caption - Title for table <span>Here text in span</span></caption>
    <thead>
        <tr>
            <th scope="col">ID <span class="column-sorter"></span></th>
            <th scope="col">Name <span class="column-sorter"></span></th>
            <th scope="col">City <span class="column-sorter"></span></th>
            <th scope="col">Email <span class="column-sorter"></span></th>
            <th scope="col">Date of birth <span class="column-sorter"></span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Colin Nixon</td>
            <td>Long Beach</td>
            <td>semper@diamSeddiam.edu</td>
            <td>02/10/1986</td>
        </tr>
        <tr>
        	...
        </tr>
    </tbody>
</table>

$('#exampleDT').dataTable({
    iDisplayLength: 3,
    sDom: "<'row-fluid' <'span4'l> <'span8'pf> > rt <'row-fluid' <'span12'i> >"
});

and demo file ../assets/js/demo/demo-jquery.dataTables.js

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

<script src="assets/plugins/sparkline/jquery.sparkline.js"></script>

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

  <script src="assets/plugins/flot/jquery.flot.js"></script>
  plugins for Flot
  <script src="assets/plugins/flot/jquery.flot.categories.js"></script>
  <script src="assets/plugins/flot/jquery.flot.grow.js"></script>
  <script src="assets/plugins/flot/jquery.flot.orderBars.js"></script>
  <script src="assets/plugins/flot/jquery.flot.pie.js"></script>
  <script src="assets/plugins/flot/jquery.flot.resize.js"></script>
  <script src="assets/plugins/flot/jquery.flot.selection.js"></script>
  <script src="assets/plugins/flot/jquery.flot.stack.js"></script>
  <script src="assets/plugins/flot/jquery.flot.stackpercent.js"></script>
  <script src="assets/plugins/flot/jquery.flot.time.js"></script>

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

In Boo with the Uniform used for radio and checkbox.

<script src="assets/plugins/uniform/jquery.uniform.js"></script>

Call plugin

    $("input.checkbox, input.radio, input:file.input-file").uniform({
        radioClass: 'radios' // edited class - the original radio
    });

Usage plugin

Use class .checkbox .radio to element

<label class="checkbox">
<input class="checkbox" type="checkbox" value="option1">
Lorem ipsum dolor sit amet, consectetur adipiscing checkbox </label>

<label class="checkbox">
<input class="checkbox" type="checkbox" value="option2" checked>
Lorem ipsum dolor sit amet, consectetur adipiscing checkbox </label>

<label class="radio">
<input class="radio" type="radio" value="option1">
Lorem ipsum dolor sit amet, consectetur adipiscing Radio </label>

Options

Sprite PSD for uniform located in the directory source/PSD

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.

<script src="assets/plugins/select2/select2.min.js"></script>

Call plugin

$("#selecttwo").select2();

Usage plugin

Select

<select class="selecttwo">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
</select>

// control size
<select class="selecttwo-s span3">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
</select>

$(".selecttwo").select2({	
    minimumResultsForSearch: 6
});
$(".selecttwo").select2();

Multiple

<select class="selecttwo span3" multiple="multiple">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    ...
</select>

$(".selecttwo").select2();

Tagging Support

<input id="select-tag" class="span4" type="hidden" value="brown,red">

$("#select-tag").select2({
    tags:["brown", "red", "green", "blue"]
});

Sprite PSD for select2 located in the directory source/PSD

Select2 plugin offers great possibilities to setup and use. Use the original documentation for details

This plug-in allows you to count characters or words, up or down. You can set a minimum or maximum goal for the counter to reach.

It will insert a div with an id of the name of the input area you are counting with a "_counter" suffix. For example, if the input you want to count is called "countMe", the id of the div that keeps track of the count will be "countMe_counter".

<script src="assets/plugins/counter/jquery.counter.js"></script>

Call plugin

$(".limiteChar").counter();
$(".limiteChar15").counter({ goal: 15 });
$(".limiteChar140").counter({ goal: 140 });

Usage plugin

<div class="control-group">
    <label for="limiteChar" class="control-label">Limited characters:</label>
    <div class="controls">
        <input id="limiteChar" class="span4 limiteChar15" type="text">
    </div>
</div>

$(".limiteChar15").counter({ goal: 15 });

<label class="checkbox">
<div class="control-group">
    <label for="limiteWords" class="control-label">Limited words:</label>
    <div class="controls">
        <textarea id="limiteWords" rows="3" class="span4 limiteWords15"></textarea>
    </div>
</div>

$(".limiteWords15").counter({
    goal: 15,
    type: 'word',
    msg: 'words left before you fall into a pit of emptiness.'
});

Options

Elastic makes your textareas grow and shrink to fit it's content. It was inspired by the auto growing textareas on Facebook. The major difference between Elastic and it's competitors is it's weight.

<script src="assets/plugins/elastic/jquery.elastic.js"></script>

Call plugin

$('textarea.auto').elastic();
$('textarea.auto').trigger('update');

Usage plugin

<textarea placeholder="paste long text" class="span4 auto" rows="3" id="elasticTextarea"></textarea>

jQuery Inputmask is a jquery plugin which create an input mask.

  <script src="assets/plugins/inputmask/jquery.inputmask.js"></script>
  <script src="assets/plugins/inputmask/jquery.inputmask.extensions.js"></script>

Define masks

$("#date").inputmask("d/m/y");  //direct mask
$("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
$("#tin").inputmask({"mask": "99-9999999"}); //specifying options only

Change the placeholder

$("#date").inputmask("d/m/y",{ "placeholder": "*" });

Multi-char placeholder

$("#date").inputmask("d/m/y",{ "placeholder": "dd/mm/yyyy" });

Usage plugin

<input id="phone" type="text" />

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy..

<script src="assets/plugins/validate/js/jquery.validate.min.js"></script>

Nicescroll (as nice scroll for browsers) is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style.

Sexy zoom feature, you can "zoom-in" the content of any nicescroll'ed div. Nice to use and nice to see, all the content of the div in fullscreen mode. It works on desktop (double click on div) either in mobile/touch devices using pinch gesture.

<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script>

Features

• simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
• very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)
• you can style main document scrollbar (body) too!! (not all script implements this feature)
• on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
• scroll is smooth (as modern tablet browsing), speed is customizable
• zoom feature
• hardware accelerated scroll (where available)
• animation frame support for smoth scrolling and cpu-saving
• dragging scroll mode with scrolling momentum (as touch device)
• tested for all major browsers desktop and mobile versions
• support for touch devices
• support for multi-input devices (IE10 with MSPointer)
• compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!
• very customizable aspect of bar
• native scroll events are working yet
• fully integrated with jQuery
• compatibile with jQuery UI, jQuery Touch, jQuery Mobile

Call plugin

$("html").niceScroll();
var nice = $("#mydiv").getNiceScroll();

Options

Boo option

$("html").niceScroll({
    cursoropacitymin:0.1,
    cursoropacitymax:0.9,
    cursorcolor:"#adafb5",
    cursorwidth:"8px",
    cursorborder:"",
    cursorborderradius:"8px",
    usetransition:600,
    background:"",
    railoffset:{top:10,left:-3}	
}); 

$("#main-sidebar").niceScroll({
    cursoropacitymin:0.1,
    cursoropacitymax:0.9,
    cursorcolor:"#adafb5",
    cursorwidth:"6px",
    cursorborder:"",
    cursorborderradius:"6px",
    usetransition:600,
    background:"",
    railoffset:{top:10,left:-1}
});

qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features!

You can use the default bootstrap or just gTip2 tooltip plugin that offers more options and variations. More documentation can be found in the Original

<script src="assets/plugins/qtip2/dist/jquery.qtip.min.js"></script>

Usage plugin

<a href="#" class="tip-tc" title="sample gTip2">hover to sample</a>

JavaScript that makes your plain HTML lists and tables super flexible, searchable, sortable and filterable.

  <script src="assets/plugins/list/js/list.min.js"></script>
  <script src="assets/plugins/list/plugins/list.paging.min.js"></script>

Usage plugin

Plugin List.js Boo is used for example in ToDo Remember Remember or Last logged user

<div id="remember">
    <ul class="list">
       <li>
           <h3 class="name">Jonny</h3>
           <p class="city">Stockholm</p>
       </li>
       <li>
           <h3 class="name">Jonas</h3>
           <p class="city">Berlin</p>
       </li>
    </ul>
</div>
                
var options = {
    valueNames: [ 'name', 'city' ]
};

var rememberList = new List('remember', options);

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event).

<script src="assets/plugins/fullcalendar/fullcalendar.js"></script>

Call plugin

$('#calendar').fullCalendar();

Usage plugin

// example - more in component-fullcalendar.html  
<div id="calendar" class="widget widget-simple header-black fc-striped"> </div>

Example options Boo

explore assets/js/demo/demo-fullcalendar.js

$('#calendar').fullCalendar({
    header: {
            left: 'title,today',
            center: '',
            right: 'prev,month,agendaWeek,agendaDay,next'
    },
    buttonText: {
            prev: '<i class="fontello-icon-left-open-1"></i>',
            next: '<i class="fontello-icon-right-open-1"></i>',
            prevYear: ' << ',
            nextYear: ' >> ',
            today: ' today <i class="fontello-icon-target-2 f-14"></i>'
    },
    aspectRatio: 2,
    editable: true,
    ...
    ...
    ...
});

xBreadcrumbs (Extended Breadcrumbs) is a jQuery plug-in to create categorized breadcrumbs for your site. This may be useful if your website has a deep structure and you want allow your visitors to quickly navigate through one section of the site to another. xBreadcrumbs works with unordered lists (UL/LI) which would make your breadcrumbs fully optimized for search engines.

<script src="assets/plugins/xbreadcrumbs/xbreadcrumbs.js"></script>

Call plugin

$('#breadcrumbs').xBreadcrumbs();

Usage plugin

<div class="breadcrumbs-nav hidden-phone">
    <ul id="breadcrumbs" class="breadcrumb">
        <li><a href="dashboard-one.html"><i class="fontello-icon-home f12"></i> Dashboard</a> 
            <span class="divider">/</span>
        </li>
        <li class="dropdown"><a href="component-table.html">Table </a> 
            <span class="divider">/</span>
            <ul class="dropdown-menu">
                <li><a href="component-table.html">Table</a></li>
                <li><a href="component-table-boo.html">Boo Table</a></li>
                <li><a href="component-table-datatable.html">DataTable</a></li>
            </ul>
        </li>
        <li class="active">Boo Admin </li>
    </ul>
</div>
<!-- // breadcrumbs -->

Options

A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.

<script src="assets/plugins/google-code-prettify/prettify.js"></script>

For detailed information about the bootstrap javascript framework to go bootstrap documentation

• Transitions
• Modal
• Dropdown
• Scrollspy
• Tab
• Tooltip
• Popover
• Alert
• Button
• Collapse
• Carousel
• Typeahead
• Affix