You most naturally know about Twitter Bootstrap - the popular front end framework for creating websites and apps. It favors easy, responsive design, and comes bundled with a judicious default stylesheet, a number of useful jQuery plugins and an icon set. Although it doesn’t come with much else, Bootstrap is very tensible. In this article, you will find a collection of 20 must-have plugins you should know about for dominant development with the framework. Let’s begin!
Collections of Bootstrap Enhancements
We will start off with two collections of Bootstrap plugins that are the perfect companions to the framework.
-------------------------------------------------------
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for images and text, multiple selection, and more. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It also offers support for multiple file preview and previewing both images and text types.
PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it. PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. T
Pongstagr.am is a jQuery plugin that lets display your instagram media to your website using Bootstrap Front-end styles and modal-plugin. For the most part, Instagram’s API only requires the use of a client_id. A client_id simply associates your server, script, or program with a specific application. However, some requests require authentication – specifically requests made on behalf of a user.
X-editable supports in-place editing with Twitter Bootstrap, jQuery UI or pure jQuery. This library allows you to create editable elements on your page. It includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved. It supports input type like, text, textarea, select, date, dateui and checklist. It supports client-side and server-side validation. The container placement is fully customizable. User can toggle by click, dblclick or manually. It works in IE7+ and all modern browsers.
A clock-style timepicker for Bootstrap a jquery plugin.Both desktop and mobile device are supported. It also works great in touch screen device.All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms. This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.
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.
A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support. Developed with a focus on utlizing pure CSS-3 styling to render the control. The plugin uses Bootstrap markup and styling by default, but it can be overridden with any other CSS markup.
Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering “Growl-like” notifications. It has number of features such as it uses standard Twitter Bootstrap alerts which provides ‘info’, ‘error’, and ‘success’ styles, and multiple growls called consecutively are stacked up one after another in a list.
This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes:.pagination (you change this one), .active and .disabled.
A simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion. It can be configured to perform this transformation based on the size of the container or viewport to provide responsive awesomeness to your buzzword-rich UI.
A Bootstrap 3 optimized advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices.
Quick and easy way to build your product tours with Twitter Bootstrap Popovers.This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.Bootstrap Tour saves the current step and will not display the tour again to users who have already completed it.
Simple Markdown editing tools that works. Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin.
A simple lightbox plugin based on the bootstrap modal plugin.
bootpag is a dynamic pagination jQuery plugin. Works well with Twitter Bootstrap or any other html pages.
Summernote is a simple, clean and flexible WYSIWYG Editor that is built on top of jQuery and Bootstrap. It supports Bootstrap’s both active versions (2 and 3) and has keyboard shortcuts for all major tasks. There is a powerful API which provides lots of customization options in means of design (width, height, active items..) and functionality.
This date range picker plugin 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.
Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image & video gallery. It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading and can be extended to display additional content types.
A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).
Collections of Bootstrap Enhancements
We will start off with two collections of Bootstrap plugins that are the perfect companions to the framework.
-------------------------------------------------------
1. Bootstrap File Input
An enhanced HTML 5 file input for Bootstrap 3.x with file preview for images and text, multiple selection, and more. The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input. It also offers support for multiple file preview and previewing both images and text types.
2. PNotify
PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it. PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. T
3. Pongstagr.am
Pongstagr.am is a jQuery plugin that lets display your instagram media to your website using Bootstrap Front-end styles and modal-plugin. For the most part, Instagram’s API only requires the use of a client_id. A client_id simply associates your server, script, or program with a specific application. However, some requests require authentication – specifically requests made on behalf of a user.
4. X-editables
X-editable supports in-place editing with Twitter Bootstrap, jQuery UI or pure jQuery. This library allows you to create editable elements on your page. It includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved. It supports input type like, text, textarea, select, date, dateui and checklist. It supports client-side and server-side validation. The container placement is fully customizable. User can toggle by click, dblclick or manually. It works in IE7+ and all modern browsers.
5. ClockPicker
A clock-style timepicker for Bootstrap a jquery plugin.Both desktop and mobile device are supported. It also works great in touch screen device.All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.
6. Bootstrap FileStyle
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms. This plugin has an interesting way to present a form for sending files so attractive, while being simple and efficient.
7. Bootstrap Progressbar
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.
8. Bootstrap Star Rating
A simple yet powerful JQuery star rating plugin for Bootstrap which supports advanced features like fractional star fill and RTL input support. Developed with a focus on utlizing pure CSS-3 styling to render the control. The plugin uses Bootstrap markup and styling by default, but it can be overridden with any other CSS markup.
9. Bootstrap Growl
Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering “Growl-like” notifications. It has number of features such as it uses standard Twitter Bootstrap alerts which provides ‘info’, ‘error’, and ‘success’ styles, and multiple growls called consecutively are stacked up one after another in a list.
10. jQuery Pagination Plugin
This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes:.pagination (you change this one), .active and .disabled.
11. Bootstrap Tabcordion
A simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion. It can be configured to perform this transformation based on the size of the container or viewport to provide responsive awesomeness to your buzzword-rich UI.
12. Bootstrap ColorPicker Sliders
A Bootstrap 3 optimized advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices.
13. Bootstrap Tour
Quick and easy way to build your product tours with Twitter Bootstrap Popovers.This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.Bootstrap Tour saves the current step and will not display the tour again to users who have already completed it.
14. Bootstrap Markdown
Simple Markdown editing tools that works. Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin.
15. Bootstrap Lightbox
A simple lightbox plugin based on the bootstrap modal plugin.
16. Bootpag
bootpag is a dynamic pagination jQuery plugin. Works well with Twitter Bootstrap or any other html pages.
17. Summernote
Summernote is a simple, clean and flexible WYSIWYG Editor that is built on top of jQuery and Bootstrap. It supports Bootstrap’s both active versions (2 and 3) and has keyboard shortcuts for all major tasks. There is a powerful API which provides lots of customization options in means of design (width, height, active items..) and functionality.
18. Date Range Picker Plugin
This date range picker plugin 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.
19. Bootstrap Image Gallery
Bootstrap Image Gallery is an extension to blueimp Gallery, a touch-enabled, responsive and customizable image & video gallery. It displays images and videos in the modal dialog of the Bootstrap framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading and can be extended to display additional content types.
20. jQDrawBootstrapGrid
A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).
Nice post .Keep updating UI online course
ReplyDelete