Cloudy River's Workshop: Best Bootstrap Plugins for Web BI and Reporting

Bootstrap is the best web front end framework designed for responsive design and mobile first. Except for standard Bootstrap functionality, there are lots of popular Bootstrap Plugins you can apply for your Web Reporting and BI requirement.

Fuel UX

is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more.

Add the fueluxclass to a page wrapper (usually either <html> tag or <body> tag)
```
<body class="fuelux">
```

Include the CSS on your page somewhere:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="//www.fuelcdn.com/fuelux/3.11.5/css/fuelux.min.css" rel="stylesheet">

Include the JS on your page somewhere:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.5/js/fuelux.min.js"></script>

Fuel UX has an excellent datepicker, repeater, and tree control,

Date Range Picker

is a component creates a drop down from which you can select a range of date. The component relies on Bootstrap, JQuery, and Moments.js. You need to add following scripts and links on your page:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
    $('input[name="daterange"]').daterangepicker();
});
</script>

Clock Picker

is a unique clock style time picker for Bootstrap.

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap and JQuery are the only dependencies.

The component only used .popover and some of .btn styles of Bootstrap.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

metisMenu

Stylish menu will give your website a perfect weapon to attract visitors. metisMenu can be a solution for this, it’s a JQuery based menu plugin for twitter Bootstrap 3. Here in this menu, you can give effects like animated accordion and supported with auto collapse system.

<script 
src="metisMenu.js"></script>
<script>
  $(function () {
    $('#menu').metisMenu();
  });
</script>

Bootstrap WYSIHTML5

A Javascript plugin that makes it easy to create simple WYSIWYG editors.

JQuery File Uploader

A file upload widget which features multiple file selection, drag and drop, progess bars, validation and preview images.

BootstrapValidator

A JQuery plugin for validating forms within Bootstrap.

JQuery Pagination

A plugin that simplifies the usage of Bootstrap's Pagintion by using appropriate classes: .pagination, .active and .disabled.

Bootstrap Star Rating

A jQuery star rating plugin for Bootstrap that supports fractional star fill and RTL input support.

Bootstrap Multiselect

A JQuery based plugin for using select inputs with the multiple attributes.

Bootstrap Video Player

A customizable HTML5 video player plugin for jQuery based on Bootstrap's UI.

Data Tables

Data Tables is the most popular table enhancing add on for Bootstrap. This plugin not only makes your tables sort-able, but it also makes use of the framework’s pagination controls and makes the data searchable. This component is Web BI/Reporting must have tool.

Bootstrap Datagrid

bs_grid is a Bootstrap based jQuery Datagrid plugin. It comes with advanced row selection, pagination, sorting as well as filtering. This bs_grid is fully customizable, responsive, localization and Works sound with Bootstrap or individual.

Social Buttons

Chart.js

Chart.js (github) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!

Bootstrap Image Gallery

Bootstrap Image Gallery is a customizable image & video gallery extension to blueimp Gallery, a touch-enabled, responsive extension for images and videos in the modal dialog of the Bootstrap framework. It features swipe, mouse as well as navigation to keyboard, transition effects, fullscreen support and on-demand content loading. Bootstrap Image Gallery can be extended to display supplementary content types.

Source:
http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/
http://speckyboy.com/2014/06/16/plugins-for-extending-bootstrap/
https://medium.com/@themefisher/40-new-must-have-plugins-for-extending-twitter-bootstrap-possibilities-e2a79592c90b#.coqlx2gc7
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

Cloudy River's Workshop

Monday, October 26, 2015

Best Bootstrap Plugins for Web BI and Reporting