Extend Twitter Bootstrap Javascript Plugins

Extend Twitter Bootstrap Javascript Plugins


Extend Twitter Bootstrap Javascript Plugins

Introduction

Twitter Boostrap is gaining a lot of attentions nowadays. Just a few weeks ago, a new major version of Bootstrap was released and bundled with a lot more features. Bootstrap is the most comprehensive front-end framework to date and it's really useful for rapid prototyping and great tool for backend/CMS.

Personally, I have been using it as the layout of my CMS, it saves a lot of times fixing cross browsers layout issues and as well as eleminate or reduce the layout design time. Everything is predefined, from grid, responsive, to UI elements such as buttons, notification, table, form and other components. We just need to put everything together.

Twitter Bootstrap comes with many javascript plugins too. However, eventually, you will find some common javascript plugins are missing, such as datepicker. Here, I have collected 10+ javascript plugins to extend Twitter bootstrap javascript collection. Thanks to the web development community, we have got so many powerful and useful javascript plugins designed specifically for Twitter Boostrap.

One more thing, if you don't like Twitter Bootstrap's default theme, you can visit my previous post, all about Twitter Bootstrap Goodies.

  • Fuel UXFuel UXFuel UX extends Twitter Bootstrap with additional lightweight Javascript controls. All those essential and useful plugins such as ComboBox, Datagrid, Pillbox, Search and Spinner are included in the package.
  • BootMetroBootMetroBootMetro is more like an extreme make over of twitter bootstrap. It transforms bootstrap to Microsoft Metro UI. And it comes with some javascript plugins to support the Metro features.
  • WYSIHTML5WYSIHTML5A beautiful WYSIWYG HTML5 web editor. It has a quite comprehensive configurations and events to adapt to your needs.
  • jqBootstrap ValidationjqBootstrap ValidationOne thing I really like about Bootstrap is its default form style. It even has all the validation styles ready, and now what you need is this javascript plugin to make everything works together.
  • ColorPickerColorPickerThis plugin allows you to add color picker to field or to any elements. It supports multiple color formats.
  • DatePickerDatePickerFrom the same author of color picker, Datepicker allows you to add to field or to any other element. It also can be used as a component and supports multiple date formats.
  • TimePickerTimepickerYou have a date picker, and you definitely will need a time picker as well. This time picker plugin allow you to easily select a time for a text input using your mouse or arrow keys.
  • DateRange PickerDateRange PickerIf you used Google Analytics, this Javascript plugin will definitely look familiar to you. A great date range for Twitter Bootstrap. DateRange Plugin is good for report generation or collecting reservation date.
  • Bootbox JSBootbox JSA great extension for bootstrap that allows you to create programmatic dialog boxes using Twitter Boostrap's existing modal. Despite of its size, bootbox is quite a powerful and flexible javascript dialog box.
  • jQuery UI BootstrapjQuery UI BootstrapAlright, this isn't Twitter Boostrap :p. Well, you can't really tell because this one is jQuery UI skinned as Boostrap. It has the same theme and most importantly, if you want to integrate both bootstrap and jQuery UI, this theme will make them look consistent. And you get all the powerful javascript plugins from jQuery UI.
  • jQuery File UploadjQuery File UploadA HTML5 Ajax Based file uploader. Honestly, I played with it before, and it's actually not easy to implement. To be fair, I was trying to set it up in a different way. Otherwise, basic implementations are fine. It also has a documentation with many examples.
  • DataTablesDataTablesThis DataGrid is actually quite similar to the one in Fuel UX. It adds sorting, pagination, search and many other useful features to data table.
  • BootsnippBootsnippBootsnipp is not any kind of javascript plugins. It's a copy and paste layout snippets. It has a collection of common UI such as login screen, modal window, table, nav bar and so on. If you're not fuss about the design, you grab the code and use it immediately.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

3 comments

baskar
Thu, 20th June 2013
nice collection... Reply
dave
Thu, 3rd April 2014
Great article!
You may also want to add http://www.prepbootstrap.com/, which includes free templates and complete themes with js widgets.

Cheers! Reply
Bobby
Thu, 5th June 2014
Do you know of a tutorial that shows how to add a plugin to an existing Bootstrap Asp MVC application? I've tried a few times and haven't been able to get a plugin to work. Sadly, I need some direction on this. Thanks for any assistance you can give. Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement