Extending Bootstrap (2014)
Chapter 8. Custom Bootstrap Plugins
There are a lot of plugins available for Twitter Bootstrap that can be used to extend its functionality. In this chapter, we will take a closer look at some of the most popular plugins that you can use to improve the user experience in your Bootstrap projects.
Why use custom plugins?
You can save a lot of time if you use custom Bootstrap plugins instead of writing your own. Most of the popular plugins for Bootstrap receive frequent updates.
The following are some reasons why you should consider using custom plugins:
· Saves you time: You can always write your own plugins that go along with Bootstrap, but often someone has already done it for you, and "reinventing the wheel" is never a good thing. So look around a bit before writing any plugins yourself.
· Stable for production: All of the custom Bootstrap plugins mentioned in this chapter are stable for production use.
· Frequently updated: Most plugins are backed by some kind of community that provides ideas for improvement, helps narrow down bugs quickly, and tests new releases.
As mentioned earlier, all sorts of plugins are available with Bootstrap. Some of these plugins enhance a particular Bootstrap component, while others add completely new functionality to Bootstrap.
Let us take a look at some useful plugins that you can use in your Bootstrap projects.
Bootbox (http://bootboxjs.com/) is a small jQuery plugin that uses native modals in Bootstrap, and allows you to create programmatic dialog boxes and manages them for you. It can be used to create all sorts of modals, such as normal ones, alerts, prompts, and confirms.
Bootstrap DateTime Picker
Bootstrap DateTime Picker is a great plugin for selecting dates and date times. It has views for decades, years, months, days, hours, and minutes as well as meridian support.
Bootstrap Modal is an extension to the modal plugin that comes with Bootstrap. It introduces a modal manager that can handle multiple modals by listening to their events.
Bootstrap Lightbox is a simple Lightbox plugin based on the native modal plugin in Bootstrap. It is very easy to use and supports a similar data API for native Bootstrap plugins.
Bootstrap Wysihtml5 is a Bootstrap port of the popular Wysihtml5 WYSIWYG project. It provides a full-fledged WYSIWYG editor that works well with Bootstrap.
Font Awesome is an iconic font that has been designed for Bootstrap. It comes with a lot of icons that are not included in the free version of Glyphicons that comes bundled with Bootstrap.
jQuery File Upload
jQuery File Upload is a modern file upload plugin for jQuery. It uses Bootstrap by default, but it can also be used with AngularJS and jQuery.
Notify.js is a jQuery plugin used to create notifications. It comes with a prepackaged style for Bootstrap, and you can also easily create your own style if you want to.
typeahead.js is a drop-in replacement for the native autocomplete plugin in Bootstrap, which is simply not advanced enough to be used in larger projects. This full-featured autocomplete plugin was developed by Twitter engineers and can also be used without Bootstrap.
X-editable is the library for in-place editing on the Web. It supports all kinds of in-place editing and can be used directly with Bootstrap as well as the jQuery UI and jQuery.
In this chapter, you learned about some useful custom plugins for Bootstrap that you can use to enhance your projects instead of creating your own plugins.
In the next chapter, you will learn how to create your own maintainable theme with the practices used in Bootswatch themes.