1
00:00:03,460 --> 00:00:06,755
In the previous module,

2
00:00:06,755 --> 00:00:12,335
we examined the number of Bootstrap components that are purely based around CSS.

3
00:00:12,335 --> 00:00:15,945
So, by applying the CSS classes for these components,

4
00:00:15,945 --> 00:00:19,490
we were able to create them on our webpage.

5
00:00:19,490 --> 00:00:26,500
In this module, we are going to examine more of Bootstrap's JavaScript-based components.

6
00:00:26,500 --> 00:00:30,580
So summarizing, as we saw in the previous module,

7
00:00:30,580 --> 00:00:34,755
Bootstrap supports a number of CSS classes that can be applied to

8
00:00:34,755 --> 00:00:43,260
your HTML markup in your webpages to activate and make use of these CSS classes.

9
00:00:43,260 --> 00:00:49,610
So, you could see how the CSS classes modified the generic HTML tags and

10
00:00:49,610 --> 00:00:56,365
provided Bootstrap's own way of presenting the same information.

11
00:00:56,365 --> 00:01:02,180
So, the components that are purely based upon CSS can easily be activated by

12
00:01:02,180 --> 00:01:04,260
applying the bootstrap CSS classes to

13
00:01:04,260 --> 00:01:09,270
the various HTML tags that are there in your webpages.

14
00:01:09,270 --> 00:01:14,525
Bootstrap by itself can be used purely for its CSS classes.

15
00:01:14,525 --> 00:01:19,500
One other aspect of Bootstraps CSS classes that we saw was

16
00:01:19,500 --> 00:01:24,630
that most of these components started with a base class that you applied.

17
00:01:24,630 --> 00:01:27,660
Like for example, when you look at button,

18
00:01:27,660 --> 00:01:31,575
you saw that the base class was the BTN class.

19
00:01:31,575 --> 00:01:33,160
Then you would apply something like

20
00:01:33,160 --> 00:01:38,160
a BTN primary which would add their colors to the BTN,

21
00:01:38,160 --> 00:01:43,175
then you could define the size of the button by saying BTN SM.

22
00:01:43,175 --> 00:01:49,905
Then you could also define the button to be an entire block by using the BTN block class.

23
00:01:49,905 --> 00:01:56,260
So, all these subsequent classes and modifiers to the base BTN class.

24
00:01:56,260 --> 00:01:59,430
So this approach, you will see it

25
00:01:59,430 --> 00:02:03,330
over and over again in many of the Bootstraps components.

26
00:02:03,330 --> 00:02:07,925
So you will have a base class then set of modifier classes that can be

27
00:02:07,925 --> 00:02:14,164
applied to modify the behavior of the base component.

28
00:02:14,164 --> 00:02:20,210
This facilitates easy design of your webpage.

29
00:02:20,210 --> 00:02:24,260
Taking another example, we can look at the Nav class.

30
00:02:24,260 --> 00:02:28,020
We use the Nav class in the Nav-bar that

31
00:02:28,020 --> 00:02:33,635
we included in our webpage in the previous module.

32
00:02:33,635 --> 00:02:40,130
The Nav class, we modify that by applying the Nav-bar Nav class to it.

33
00:02:40,130 --> 00:02:45,660
So that provided us with a certain way of presenting the navigation information.

34
00:02:45,660 --> 00:02:51,310
In this module, we will examine Nav-tabs and

35
00:02:51,310 --> 00:02:58,295
Nav-pills which are yet another way of presenting navigation information for the webpage.

36
00:02:58,295 --> 00:03:04,180
The tabs and the pills we are presenting navigation again,

37
00:03:04,180 --> 00:03:10,265
supported with a JavaScript plugin,

38
00:03:10,265 --> 00:03:15,195
provides an enhanced way of providing navigation within your content.

39
00:03:15,195 --> 00:03:18,835
So, we'll examine that in this particular module.

40
00:03:18,835 --> 00:03:23,620
I use this as an example to illustrate to you how started from a base class,

41
00:03:23,620 --> 00:03:28,075
you can modify by applying the modifier classes to the base class.

42
00:03:28,075 --> 00:03:30,640
Of course, if you want to bring in

43
00:03:30,640 --> 00:03:35,285
the JavaScript part of your Bootstrap components into action,

44
00:03:35,285 --> 00:03:38,670
then you should start applying the JavaScript classes.

45
00:03:38,670 --> 00:03:41,725
So, Bootstrap supports a number of components that

46
00:03:41,725 --> 00:03:44,970
are supported through JavaScript plugins.

47
00:03:44,970 --> 00:03:47,880
Now, when you use these plugins in your webpage,

48
00:03:47,880 --> 00:03:52,890
you can include individual plugins that you are actually going to use in your website,

49
00:03:52,890 --> 00:03:55,815
or the entire set of plugins.

50
00:03:55,815 --> 00:03:59,500
Now, what we're going to do in the exercises is,

51
00:03:59,500 --> 00:04:03,495
include the entire set of plugins because we just want explore all of them.

52
00:04:03,495 --> 00:04:05,870
But if you are designing a website,

53
00:04:05,870 --> 00:04:09,000
you may include only a subset of these plugins

54
00:04:09,000 --> 00:04:12,300
that you're actually employing in your website,

55
00:04:12,300 --> 00:04:15,630
thereby reducing the amount of JavaScript code that needs

56
00:04:15,630 --> 00:04:21,470
be sent over to a user that is viewing your webpage.

57
00:04:21,470 --> 00:04:27,590
This is the way I look at Bootstraps approach to using JavaScript in

58
00:04:27,590 --> 00:04:33,905
its own support for Bootstrap components that are enabled with JavaScript.

59
00:04:33,905 --> 00:04:36,785
If you look at JavaScript on its own,

60
00:04:36,785 --> 00:04:44,845
it provides a lot of flexibility and enables you to do lot of interesting things.

61
00:04:44,845 --> 00:04:46,695
But that also entails

62
00:04:46,695 --> 00:04:52,200
writing JavaScript code to be used when you are designing your website.

63
00:04:52,200 --> 00:04:58,730
Now, I look at JavaScript as a big sumo wrestler with a lot of capability,

64
00:04:58,730 --> 00:05:02,670
a lot of power, but untamed.

65
00:05:02,670 --> 00:05:09,875
Now, JQuery as a library that is built on top of JavaScript,

66
00:05:09,875 --> 00:05:14,815
essentially takes the sumo wrestler and then packages it in a better manner to make

67
00:05:14,815 --> 00:05:20,435
this hundred lbs gorilla into a more manageable size,

68
00:05:20,435 --> 00:05:23,790
more easier to approach and more easier to

69
00:05:23,790 --> 00:05:28,235
include and make use off in your website design.

70
00:05:28,235 --> 00:05:31,855
So, if you are using JQuery library directly,

71
00:05:31,855 --> 00:05:34,510
you can definitely leverage many of

72
00:05:34,510 --> 00:05:40,175
the JQuery components and make use of them in your webpage.

73
00:05:40,175 --> 00:05:44,480
Now, that is an approach that you can always take because JQuery

74
00:05:44,480 --> 00:05:48,170
is already going to be included in your Bootstrap webpage,

75
00:05:48,170 --> 00:05:52,910
if you are going to leverage the JavaScript-based components.

76
00:05:52,910 --> 00:05:56,545
Bootstrap takes this one step further,

77
00:05:56,545 --> 00:05:59,145
and then looking at the picture

78
00:05:59,145 --> 00:06:04,395
Bootstrap's approach is to take the sumo wrestler and then put him into a box.

79
00:06:04,395 --> 00:06:09,730
Essentially standing for packaging

80
00:06:09,730 --> 00:06:18,935
your JavaScript plugins into a component that you can more easily use in your webpages.

81
00:06:18,935 --> 00:06:24,775
So, the Bootstrap JavaScript-based components essentially take JQuery-based support,

82
00:06:24,775 --> 00:06:28,760
but then package them in a way that you can employ them in

83
00:06:28,760 --> 00:06:34,390
your webpage even without writing a single line of JavaScript code.

84
00:06:34,390 --> 00:06:38,955
This is where the Bootstrap JavaScript component

85
00:06:38,955 --> 00:06:43,030
can be used without writing a single line of code.

86
00:06:43,030 --> 00:06:46,620
The way it is supported in Bootstrap is that,

87
00:06:46,620 --> 00:06:51,400
the JavaScript components support a number of data hyphen

88
00:06:51,400 --> 00:06:56,940
star attributes that you can apply to your HTML tags.

89
00:06:56,940 --> 00:07:00,120
So, you will see me using things like data-toggle,

90
00:07:00,120 --> 00:07:04,370
data-spy, data-target, and so on.

91
00:07:04,370 --> 00:07:07,795
If you recall, when we designed the Nav-bar,

92
00:07:07,795 --> 00:07:11,120
you had actually seen a couple of these attributes.

93
00:07:11,120 --> 00:07:15,660
There we designed the button for the extra small screens.

94
00:07:15,660 --> 00:07:21,550
Now, it is time for us to [inaudible] why we did it in the previous module.

95
00:07:21,550 --> 00:07:26,935
So, we will explore this approach in great detail in this module,

96
00:07:26,935 --> 00:07:33,000
looking at several Bootstrap components that leverage JavaScript support.

97
00:07:33,000 --> 00:07:35,015
Of course, you can leverage

98
00:07:35,015 --> 00:07:38,650
the full JavaScript API that is

99
00:07:38,650 --> 00:07:42,945
available for all these components by actually writing JavaScript code.

100
00:07:42,945 --> 00:07:46,130
We will defer this to the next module,

101
00:07:46,130 --> 00:07:51,370
where we will examine how you can write simple JavaScript code based upon

102
00:07:51,370 --> 00:07:54,580
the JQuery syntax to add

103
00:07:54,580 --> 00:08:00,070
more functionality to your JavaScript-based Bootstrap components.