1
00:00:03,670 --> 00:00:09,835
In this exercise, we're going to explore Bootstrap's tab-based navigation,

2
00:00:09,835 --> 00:00:11,920
Bootstrap's support for tabs,

3
00:00:11,920 --> 00:00:17,310
and how tabs can be used to organize content on your web page.

4
00:00:17,310 --> 00:00:21,165
And how you can navigate from one tab to another tab,

5
00:00:21,165 --> 00:00:26,235
and then reveal content in each of those tabs in web page.

6
00:00:26,235 --> 00:00:30,115
Now, you will here see me using the nav class,

7
00:00:30,115 --> 00:00:34,560
and then further qualify it using the nav tabs class.

8
00:00:34,560 --> 00:00:38,065
The same approach can be also used with the nav pills

9
00:00:38,065 --> 00:00:42,740
that we looked at in the previous lecture.

10
00:00:43,470 --> 00:00:46,440
To get started with this exercise,

11
00:00:46,440 --> 00:00:49,200
we will go into aboutus.html page.

12
00:00:49,200 --> 00:00:50,545
And then right there,

13
00:00:50,545 --> 00:00:53,690
where we have the corporate leadership content there,

14
00:00:53,690 --> 00:00:59,290
after the h2, I'm going to introduce the tabbed navigation.

15
00:00:59,290 --> 00:01:07,960
So, this is where I'm going to make use of the ul with the class nav nav-tabs.

16
00:01:07,960 --> 00:01:12,070
So, you have seen that earlier when we constructed the nav bar,

17
00:01:12,070 --> 00:01:17,215
we also used the ul inside the nav bar to specify the navigation items there.

18
00:01:17,215 --> 00:01:20,270
Similar approach here, except that here we're going to

19
00:01:20,270 --> 00:01:24,235
use the ul with the nav and the nav tabs here.

20
00:01:24,235 --> 00:01:26,120
So, inside this ul,

21
00:01:26,120 --> 00:01:33,395
we will construct the navigation structure for this tabbed navigation here.

22
00:01:33,395 --> 00:01:41,850
So in there, I will use the list item with the class nav-item,

23
00:01:41,850 --> 00:01:48,965
and construct the navigation around this list item.

24
00:01:48,965 --> 00:01:53,770
So, this introduces the first item into my nav tabs.

25
00:01:53,770 --> 00:02:03,605
Right after that, inside there I will introduce an a with the class nav-link active.

26
00:02:03,605 --> 00:02:05,960
So, this one, as you see,

27
00:02:05,960 --> 00:02:10,670
if you recall from the way we use the ul with the nav item and nav link.

28
00:02:10,670 --> 00:02:12,995
In the nav bar,

29
00:02:12,995 --> 00:02:14,970
we are seeing a similar approach here.

30
00:02:14,970 --> 00:02:19,150
So, nav-item active, and then href.

31
00:02:19,970 --> 00:02:24,895
So, this would be a reference to tab pane later on,

32
00:02:24,895 --> 00:02:28,695
which would have the ID of peter there,

33
00:02:28,695 --> 00:02:33,310
and role is tab for this one,

34
00:02:33,310 --> 00:02:39,560
and data-toggle tab.

35
00:02:39,560 --> 00:02:45,540
So, you can see the Bootstrap's javascript component coming into picture here.

36
00:02:45,540 --> 00:02:49,500
And then I will say Peter Pan,

37
00:02:49,700 --> 00:02:54,405
and then close off the a tag there.

38
00:02:54,405 --> 00:03:01,435
So, this would complete our first tab in our tabbed navigation.

39
00:03:01,435 --> 00:03:03,310
Let me complete the rest of the code,

40
00:03:03,310 --> 00:03:07,255
and then we'll come back and review the rest of the code there.

41
00:03:07,255 --> 00:03:13,630
So, here you can see that I have completed this navigation structure here.

42
00:03:13,630 --> 00:03:23,635
Similarly, I am defining the list items for the remaining free corporate leaders here.

43
00:03:23,635 --> 00:03:26,305
Now this, let me save the change.

44
00:03:26,305 --> 00:03:30,160
And then let's go and take a quick look at the web page.

45
00:03:30,840 --> 00:03:33,070
Switching to the web page,

46
00:03:33,070 --> 00:03:37,260
you now see how using the nav nav tabs we have created

47
00:03:37,260 --> 00:03:42,400
this navigation structure right below the corporate leadership here.

48
00:03:42,400 --> 00:03:47,110
So, this navigation structure meaning that I should be able to navigate and

49
00:03:47,110 --> 00:03:51,815
view each one of them in more detail by clicking on this.

50
00:03:51,815 --> 00:03:54,830
So, that is how the tabbed navigation works here.

51
00:03:54,830 --> 00:03:58,525
Now, obviously, the content of each one of them should

52
00:03:58,525 --> 00:04:02,700
appropriately show only that person's details here.

53
00:04:02,700 --> 00:04:06,145
So, this is where the use of tabbed content

54
00:04:06,145 --> 00:04:10,630
and the tab pane classes will come into effect.

55
00:04:10,630 --> 00:04:13,925
And we're going to enclose this content using that.

56
00:04:13,925 --> 00:04:17,200
And then tie this to those navigation,

57
00:04:17,200 --> 00:04:18,660
tab navigation up here,

58
00:04:18,660 --> 00:04:22,580
so that only one single corporate leader's information

59
00:04:22,580 --> 00:04:25,380
is displayed on the screen at a time.

60
00:04:25,380 --> 00:04:28,910
Once we complete setting up that tabbed navigation,

61
00:04:28,910 --> 00:04:31,755
then we'll move down into the actual content here.

62
00:04:31,755 --> 00:04:36,505
And then now, I'm going to reorganize this content into four separate tab panes,

63
00:04:36,505 --> 00:04:38,840
each of which will be shown when

64
00:04:38,840 --> 00:04:44,010
the corresponding tab pane is selected in the tabbed navigation.

65
00:04:44,010 --> 00:04:45,830
So, to get started,

66
00:04:45,830 --> 00:04:50,755
the first thing that we're going to do is to go in and separate

67
00:04:50,755 --> 00:04:55,680
each of these four corporate leaders into the four parts there,

68
00:04:55,680 --> 00:04:58,815
so that it's easy for me to see what I am doing.

69
00:04:58,815 --> 00:05:01,180
So, at the h3,

70
00:05:01,180 --> 00:05:04,355
I'm cutting them into four different parts,

71
00:05:04,355 --> 00:05:08,610
and then we'll be able to work with these.

72
00:05:08,610 --> 00:05:13,395
So, now I have one, two, three, four.

73
00:05:13,395 --> 00:05:19,055
So, this content now needs to be enclosed inside a div

74
00:05:19,055 --> 00:05:28,540
with the class tab-content.

75
00:05:28,540 --> 00:05:32,845
So, all this content that we have for

76
00:05:32,845 --> 00:05:40,055
the four different corporate leaders should be enclosed inside a tab-content div there.

77
00:05:40,055 --> 00:05:44,455
So, now I have enclosed that inside the tab contact.

78
00:05:44,455 --> 00:05:46,090
Now, for each one of them,

79
00:05:46,090 --> 00:05:52,235
I need to create another div with the classes tab pane and some additional classes.

80
00:05:52,235 --> 00:05:56,430
And then organize this contact.

81
00:05:56,430 --> 00:05:58,680
So, let's start with the first one.

82
00:05:58,680 --> 00:06:02,215
So, for the first corporate leader,

83
00:06:02,215 --> 00:06:07,955
I'm going introduce a new div with role as tabpanel.

84
00:06:07,955 --> 00:06:12,250
So, this serves as the tab panel that will be displayed

85
00:06:12,250 --> 00:06:17,235
when the first tab navigation is selected.

86
00:06:17,235 --> 00:06:22,440
And the corresponding class that I need to apply is tab-pane.

87
00:06:22,440 --> 00:06:24,090
So, this is the tab pane,

88
00:06:24,090 --> 00:06:26,430
the actual content that is contained in there.

89
00:06:26,430 --> 00:06:29,805
And then another class that I apply is fade.

90
00:06:29,805 --> 00:06:32,920
So, the fade class allows this content to fade in.

91
00:06:32,920 --> 00:06:37,090
So, this is an animation class that Bootstrap supports.

92
00:06:37,090 --> 00:06:40,340
Also, I apply this class called show.

93
00:06:40,340 --> 00:06:43,770
The show class essentially specifies

94
00:06:43,770 --> 00:06:48,425
that this particular content should be shown when the page is first rendered.

95
00:06:48,425 --> 00:06:52,870
So, it will apply the show class only to the first tab pane,

96
00:06:52,870 --> 00:06:56,640
the remaining tab panes will not have the show class applied.

97
00:06:56,640 --> 00:07:00,910
And the last class that I'm going to apply is active because this is

98
00:07:00,910 --> 00:07:07,190
the tab pane that is going to be displayed in the page when the page is first rendered.

99
00:07:07,190 --> 00:07:10,095
In addition, for the navigation to work,

100
00:07:10,095 --> 00:07:12,760
I need to give this a and ID,

101
00:07:12,760 --> 00:07:19,340
and since I used hashtag Peter for the tab navigation content,

102
00:07:19,340 --> 00:07:23,705
so I'm going to apply the ID as Peter here.

103
00:07:23,705 --> 00:07:31,680
And so, when this is referred to in a link there with hashtag Peter,

104
00:07:31,680 --> 00:07:34,740
this is the corresponding pane that I am referring to.

105
00:07:34,740 --> 00:07:39,885
Now, what I'm going to do is I'm going to copy this div from there.

106
00:07:39,885 --> 00:07:49,010
And then I'm going to apply this div to the second corporate leader's information,

107
00:07:49,010 --> 00:07:55,255
except that for this one I should only apply the tab pane and fit.

108
00:07:55,255 --> 00:07:58,730
The show and active should not be applied for the remaining three.

109
00:07:58,730 --> 00:08:03,820
And the ID here should be Danny for the second one.

110
00:08:03,820 --> 00:08:08,190
I'm going to simply copy this code,

111
00:08:08,190 --> 00:08:13,460
and then paste that for the third corporate leader here.

112
00:08:13,460 --> 00:08:20,955
And then so the tab panel and the third one is Agumbe.

113
00:08:20,955 --> 00:08:23,795
And the the last one,

114
00:08:23,795 --> 00:08:27,235
again, I paste that in,

115
00:08:27,235 --> 00:08:31,640
and then the ID should be changed to Alberto,

116
00:08:31,640 --> 00:08:34,280
and close off this div here.

117
00:08:34,280 --> 00:08:39,580
So, this div for the last one should be closed off at that point.

118
00:08:39,580 --> 00:08:45,355
And that should take care of the four tab panels that I need.

119
00:08:45,355 --> 00:08:50,725
Going in and indenting this content,

120
00:08:50,725 --> 00:08:53,490
so that I am satisfied,

121
00:08:53,490 --> 00:08:56,245
my obsession is satisfied there.

122
00:08:56,245 --> 00:09:01,805
Okay, that completes the organization of the tab content.

123
00:09:01,805 --> 00:09:04,600
Now, let's save the change and go and take

124
00:09:04,600 --> 00:09:09,030
a quick look at what the web page look likes now.

125
00:09:09,330 --> 00:09:11,480
Going to our web page,

126
00:09:11,480 --> 00:09:19,680
you now see that our web page is only displaying the content corresponding to their CEO.

127
00:09:19,680 --> 00:09:22,825
If you switch to any one of the other ones,

128
00:09:22,825 --> 00:09:26,415
you will see that the corresponding information is displayed.

129
00:09:26,415 --> 00:09:32,290
And notice how this information fades in when you select that particular user.

130
00:09:32,290 --> 00:09:35,400
But, of course, if you are happy with this,

131
00:09:35,400 --> 00:09:37,890
then that's fine, we can stop at this point.

132
00:09:37,890 --> 00:09:45,360
But I would like to nicely define a real tab around this.

133
00:09:45,360 --> 00:09:50,370
So, this is where I'm going to apply a few CSS attributes,

134
00:09:50,370 --> 00:09:53,540
properties to this particular tab here,

135
00:09:53,540 --> 00:09:55,660
so that it's nice,

136
00:09:55,660 --> 00:09:58,290
clean tab structure being defined there.

137
00:09:58,290 --> 00:10:03,590
So, let's create a few CSS properties for this.

138
00:10:03,590 --> 00:10:06,855
The last step, switching to styles.css.

139
00:10:06,855 --> 00:10:09,555
After the navbar inverse,

140
00:10:09,555 --> 00:10:15,530
I'm going to introduce the CSS classes for the tab content,

141
00:10:15,530 --> 00:10:18,010
so I specify for the tab-content,

142
00:10:18,010 --> 00:10:29,565
border-left: 1px solid DDD.

143
00:10:29,565 --> 00:10:48,195
And I'm going to apply the same for border-right and bottom.

144
00:10:48,195 --> 00:10:51,310
I don't need to apply to the top because the top is governed

145
00:10:51,310 --> 00:10:55,585
by the tab navigation already.

146
00:10:55,585 --> 00:11:00,250
And then let me give a padding of 10 pixel all around,

147
00:11:00,250 --> 00:11:02,990
and then save the changes.

148
00:11:02,990 --> 00:11:07,450
Let's go and take a look at our web page after this.

149
00:11:07,450 --> 00:11:09,980
Switching back to our page,

150
00:11:09,980 --> 00:11:11,395
now you see a nice,

151
00:11:11,395 --> 00:11:14,920
clean tab-like structure being created.

152
00:11:14,920 --> 00:11:18,355
So that when you navigate to each one of them,

153
00:11:18,355 --> 00:11:24,695
that corresponding information is appropriately displayed in its own tab.

154
00:11:24,695 --> 00:11:28,905
This completes this exercise where we looked at

155
00:11:28,905 --> 00:11:33,120
the use of tabbed navigation for our web page.

156
00:11:33,120 --> 00:11:39,435
And then we saw how we can create tab navigation and enclose other content.

157
00:11:39,435 --> 00:11:46,200
This is also a good time for you to do a Git Comment with the message tabs.