0:03
In the previous module,
we examined the number of Bootstrap components that are purely based around CSS.
So, by applying the CSS classes for these components,
we were able to create them on our webpage.
In this module, we are going to examine more of Bootstrap's JavaScript-based components.
So summarizing, as we saw in the previous module,
Bootstrap supports a number of CSS classes that can be applied to
your HTML markup in your webpages to activate and make use of these CSS classes.
So, you could see how the CSS classes modified the generic HTML tags and
provided Bootstrap's own way of presenting the same information.
So, the components that are purely based upon CSS can easily be activated by
applying the bootstrap CSS classes to
the various HTML tags that are there in your webpages.
Bootstrap by itself can be used purely for its CSS classes.
One other aspect of Bootstraps CSS classes that we saw was
that most of these components started with a base class that you applied.
Like for example, when you look at button,
you saw that the base class was the BTN class.
Then you would apply something like
a BTN primary which would add their colors to the BTN,
then you could define the size of the button by saying BTN SM.
Then you could also define the button to be an entire block by using the BTN block class.
So, all these subsequent classes and modifiers to the base BTN class.
So this approach, you will see it
over and over again in many of the Bootstraps components.
So you will have a base class then set of modifier classes that can be
applied to modify the behavior of the base component.
This facilitates easy design of your webpage.
Taking another example, we can look at the Nav class.
We use the Nav class in the Nav-bar that
we included in our webpage in the previous module.
The Nav class, we modify that by applying the Nav-bar Nav class to it.
So that provided us with a certain way of presenting the navigation information.
In this module, we will examine Nav-tabs and
Nav-pills which are yet another way of presenting navigation information for the webpage.
The tabs and the pills we are presenting navigation again,
supported with a JavaScript plugin,
provides an enhanced way of providing navigation within your content.
So, we'll examine that in this particular module.
I use this as an example to illustrate to you how started from a base class,
you can modify by applying the modifier classes to the base class.
Of course, if you want to bring in
the JavaScript part of your Bootstrap components into action,
then you should start applying the JavaScript classes.
So, Bootstrap supports a number of components that
are supported through JavaScript plugins.
Now, when you use these plugins in your webpage,
you can include individual plugins that you are actually going to use in your website,
or the entire set of plugins.
Now, what we're going to do in the exercises is,
include the entire set of plugins because we just want explore all of them.
But if you are designing a website,
you may include only a subset of these plugins
that you're actually employing in your website,
thereby reducing the amount of JavaScript code that needs
be sent over to a user that is viewing your webpage.
This is the way I look at Bootstraps approach to using JavaScript in
its own support for Bootstrap components that are enabled with JavaScript.
If you look at JavaScript on its own,
it provides a lot of flexibility and enables you to do lot of interesting things.
But that also entails
writing JavaScript code to be used when you are designing your website.
Now, I look at JavaScript as a big sumo wrestler with a lot of capability,
a lot of power, but untamed.
Now, JQuery as a library that is built on top of JavaScript,
essentially takes the sumo wrestler and then packages it in a better manner to make
this hundred lbs gorilla into a more manageable size,
more easier to approach and more easier to
include and make use off in your website design.
So, if you are using JQuery library directly,
you can definitely leverage many of
the JQuery components and make use of them in your webpage.
Now, that is an approach that you can always take because JQuery
is already going to be included in your Bootstrap webpage,
if you are going to leverage the JavaScript-based components.
Bootstrap takes this one step further,
and then looking at the picture
Bootstrap's approach is to take the sumo wrestler and then put him into a box.
Essentially standing for packaging
your JavaScript plugins into a component that you can more easily use in your webpages.
So, the Bootstrap JavaScript-based components essentially take JQuery-based support,
but then package them in a way that you can employ them in
your webpage even without writing a single line of JavaScript code.
This is where the Bootstrap JavaScript component
can be used without writing a single line of code.
The way it is supported in Bootstrap is that,
the JavaScript components support a number of data hyphen
star attributes that you can apply to your HTML tags.
So, you will see me using things like data-toggle,
data-spy, data-target, and so on.
If you recall, when we designed the Nav-bar,
you had actually seen a couple of these attributes.
There we designed the button for the extra small screens.
Now, it is time for us to [inaudible] why we did it in the previous module.
So, we will explore this approach in great detail in this module,
looking at several Bootstrap components that leverage JavaScript support.
Of course, you can leverage
the full JavaScript API that is
available for all these components by actually writing JavaScript code.
We will defer this to the next module,
where we will examine how you can write simple JavaScript code based upon
the JQuery syntax to add
more functionality to your JavaScript-based Bootstrap components.
Jogesh K. MuppalaAssociate Professor
