1
00:00:00,042 --> 00:00:04,268
[MUSIC]

2
00:00:04,268 --> 00:00:09,793
In the previous lesson I referred to the
nav class that is used in Bootstrap for

3
00:00:09,793 --> 00:00:12,790
creating navigation structures.

4
00:00:12,790 --> 00:00:17,376
We explored the navbar nav
already in the previous module.

5
00:00:17,376 --> 00:00:21,660
In this lecture,

6
00:00:21,660 --> 00:00:26,700
we're going to explore nav tabs and
nav pills in a bit more detail.

7
00:00:26,700 --> 00:00:29,350
And the exercise that follows this, we'll

8
00:00:29,350 --> 00:00:33,927
look at how we make use of this to create
a navigation structure for our web page.

9
00:00:36,020 --> 00:00:41,300
Tabs and pills provide a interesting
navigation structure for our web page.

10
00:00:42,640 --> 00:00:47,608
They will allow you to enclose
content inside your web page that

11
00:00:47,608 --> 00:00:52,201
the user can navigate among
the content without reloading

12
00:00:52,201 --> 00:00:55,460
the web page to a different web page.

13
00:00:55,460 --> 00:01:00,190
So if you have a certain amount of
content to be presented in your web page,

14
00:01:00,190 --> 00:01:04,700
but want to show only part of
the content on your web page, but

15
00:01:04,700 --> 00:01:09,855
still provide user with an ability to
navigate to other parts of the content,

16
00:01:09,855 --> 00:01:13,340
then tabs and pills can be very useful for
this purpose.

17
00:01:14,390 --> 00:01:18,290
What's better than to just go and
take a look at the use of tabs and

18
00:01:18,290 --> 00:01:19,790
pills in navigation?

19
00:01:20,860 --> 00:01:25,430
Taking a look at an example of
the use of tabs in navigation,

20
00:01:25,430 --> 00:01:28,890
you'll see that in this particular case,
you have

21
00:01:29,910 --> 00:01:34,570
the Corporate Leadership information
in our aboutus.html page,

22
00:01:34,570 --> 00:01:40,240
enclosed inside tabs with
the tab navigation built on top.

23
00:01:40,240 --> 00:01:44,740
So you can see that you have
the four different corporate leaders

24
00:01:44,740 --> 00:01:47,270
represented in their own tab here.

25
00:01:47,270 --> 00:01:52,080
And the content currently
revealed on the web page is only

26
00:01:52,080 --> 00:01:55,270
the details about
the first corporate leader.

27
00:01:55,270 --> 00:02:00,280
So if you want to switch to others,
then you simply click on

28
00:02:00,280 --> 00:02:05,520
the corresponding tab, and
then reveal that content in your web page.

29
00:02:05,520 --> 00:02:08,610
So notice that we are not navigating
to a different web page, but

30
00:02:08,610 --> 00:02:13,590
we are simply revealing the content
using this tab navigation here.

31
00:02:15,030 --> 00:02:17,980
Instead, in some cases you may find

32
00:02:17,980 --> 00:02:22,650
a pill-based navigation more useful for
your purpose.

33
00:02:22,650 --> 00:02:25,150
So a pill-based navigation
works like this.

34
00:02:25,150 --> 00:02:29,210
So you still have the same navigation
structure on top here, but

35
00:02:29,210 --> 00:02:34,270
the currently displayed information
will be highlighted as a pill here.

36
00:02:34,270 --> 00:02:39,760
So if you switch to another part
of your navigation, notice how

37
00:02:39,760 --> 00:02:45,600
that particular item is being
highlighted in the web page,

38
00:02:45,600 --> 00:02:49,500
and the corresponding information being
displayed in the tab content down below.

39
00:02:49,500 --> 00:02:51,790
So this is a pill-based navigation.

40
00:02:51,790 --> 00:02:56,680
So this uses nav pills
instead of nav tabs for

41
00:02:56,680 --> 00:03:02,030
the class being applied
to the nav class there.

42
00:03:02,030 --> 00:03:06,770
Now that you have seen an example of
the use of tabbed and pull navigation

43
00:03:06,770 --> 00:03:12,180
in a web page, I'm sure you're curious
to know how it is actually constructed.

44
00:03:12,180 --> 00:03:16,310
That is what we're going to
explore in the exercise next.

45
00:03:16,310 --> 00:03:20,418
So we will use tabbed navigation and
then use tab content and

46
00:03:20,418 --> 00:03:25,940
tab panes to organize the actual content
that will be displayed in our web page.

47
00:03:25,940 --> 00:03:29,369
[MUSIC]