Bootstrap 3 jQuery plugins

One of the important distinguishing features of Bootstrap is that is has several often use jQuery plugins. These are described on the page with the heading ‘JavaScript’.

If – like me – you have no programming experience this page can be really confusing. It uses several probably unfamiliar terms such as ‘Options’, ‘Methods’, ‘Events’, ‘Data attributes’ and the ‘API’ to ‘explain’ how to use it.

This tutorial serves as an intro to jQuery and the Bootstrap 3 jQuery plugins.

Bootstrap JavaScript

Bootstrap calls this section ‘JavaScript’ and then adds “Bring Bootstrap’s components to life with over a dozen custom jQuery plugins”. So which is it: JavaScript or jQuery? It’s both.

jQuery is JavaScript. jQuery is a library with code snippets. Those code snippets are written with JavaScript. JavaScript programming is difficult and even for a simple effect you need to write a lot of lines of JavaScript. jQuery was created to make it easier for developers and web designers to create certain effects on a web page without having to write complicated JavaScript.

Think of JavaScript as the word in a language and jQuery as whole paragraphs written in the same language. Or think of JavaScript as bricks and mortar you need to build a house. In that metaphor jQuery is the parts of a prefab house.

jQuery

Do you need to understand jQuery if you want to work with Bootstrap?

No you don’t. But like I said: the jQuery plugins are an important feature why Bootstrap has become so popular.
To use them you only need to know very little about jQuery. If you want to create websites that will not simply look like the default Bootstrap theme you need to know how you can use the jQuery plugins and their options. I am not talking about styling them differently. That’s done with CSS and/or LESS. But to customize their functioning you need to have a basic understanding of jQuery.

jQuery’s official tag line is Write Less, Do More. That’s an excellent and accurate description of the jQuery library—you really can accomplish amazing things in just a few lines of code.

Someone wrote that jQuery essentially is: Find stuff, do stuff. jQuery scripts (and plugins are just scripts that are external from a web page) look for tags in web pages. To begin understanding jQuery scripts you already need to be familiar with HTML and CSS. If that’s not the case you’re better of putting books and tutorials about it aside for later on.

With jQuery you can do cool stuff to elements on a page. With the introduction of CSS3 some of these things can also be done with CSS. But you’ll soon discover that jQuery gives you possibilities to create effects and interaction on your web pages that are either impossible with CSS or ask a lot of your CSS skills and patience.

When you begin to understand the basics of jQuery and learn how to write simple scripts you’ll discover that it gives you the possibility to use it for simple effects that are not part of Bootstrap’s jQuery plugins. Those plugins represent a good selection of jQuery scripts that would otherwise have been written time and time again by developers. With the other tutorials here about specific Bootstrap plugins you can quickly learn how to use them. Developing them however requires a lot more knowledge and is outside the scope of the tutorials here.

What the other jQuery tutorials will cover is the meaning of essential keywords, how to create simple effects like having elements show/hide when a certain event occurs (like a click on another element), how to make rows in a table change style when a users does something, etc.

A basic knowledge of jQuery will also give you the option to use other jQuery plugins that can be found on the Web or to use the jQuery UI library. You will then know how to correctly integrate them with the rest of the code in your web pages.

I will also direct you to other tutorials and books. Because there is so much to know about what you can do with jQuery that I couldn’t begin to cover that with these tutorials.

The tutorials I write here about jQuery should be understandable for someone without any programming experience whatsoever. I have read several books introducing designers to jQuery. And somehow they almost all start straightaway explaining it as if you have already worked with other programming languages and need to understand what makes jQuery different or after a good start they suddenly ask you to jump through a couple of hoops that require knowledge they don’t provide. If you see this happening here let me know.

Add your comment