Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.
Best jQuery Bootstrap Plugins & Tutorials with Demo
Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
- Works great on both single and multiple select elements.
- Integrates nicely with Twitter’s Bootstrap markup.
This script customize the animate.css and bootstrap.js, add CSS3 transition support with the Twitter Bootstrap, include the modal, popover and tab. You can enable this by change a little pice of your exist code.
- CSS3 transition support.
- Minimal change of the code, works fine with the exsit code.
- FAQ and source code are included in the package, free update in the future.
A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).
Multi-Color progressbar component for Twitter Bootstrap creates a progressbar which consists out of three colors or zones.
- Green (bar-success)
- Orange (bar-warning)
- Red (bar-danger)
The progressbar consists out of three zones: safe, warning and danger. The safe zone is displayed in green, the warning zone in orange and red is used for the danger zone.
A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.
Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.
This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved.
- popup and inline modes
- supported inputs:
- client-side and server-side validation
- customizible container placement
- toggle by click or manually
- keyboard support (escape/enter/tab)
- works in IE7+ and all modern browsers
- unit tested
This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.
If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.