WEBVTT

00:00:07.120 --> 00:00:14.540
In this video we're going to learn how to create components like nav tabs enough bills using bootstrap

00:00:14.550 --> 00:00:15.420
.

00:00:15.480 --> 00:00:18.510
So let's start with the love taps.

00:00:18.520 --> 00:00:24.480
Let's create some basic taps using bootstrap so we can create an unloaded list.

00:00:25.110 --> 00:00:26.270
OK.

00:00:26.280 --> 00:00:34.070
And you can happily place a few list items inside the list go for for list items.

00:00:34.230 --> 00:00:39.170
Third each one is going to have a roll presentation.

00:00:39.660 --> 00:00:40.130
OK.

00:00:40.230 --> 00:00:42.690
And a link

00:00:45.840 --> 00:00:48.110
with an entry.

00:00:49.770 --> 00:00:55.490
OK so let's just duplicate this for list items.

00:00:55.880 --> 00:00:56.350
OK.

00:00:56.850 --> 00:01:05.370
So let's add some text inside cyclings So let's go for something like home messages

00:01:08.130 --> 00:01:15.100
and occasions and contacts us.

00:01:16.750 --> 00:01:17.420
OK.

00:01:17.670 --> 00:01:26.070
So so to create tabs we're going to need to give the least a class.

00:01:26.490 --> 00:01:31.210
So the first class we're going to use is going to be enough.

00:01:31.660 --> 00:01:35.420
You can see how this styling changed.

00:01:35.450 --> 00:01:41.280
You can see the whole states when we hope on the components.

00:01:41.280 --> 00:01:44.290
Also we need a class for nav tabs.

00:01:44.300 --> 00:01:47.540
So it's going to be enough tabs.

00:01:49.230 --> 00:01:54.340
OK I can already see how the nav tabs.

00:01:54.390 --> 00:01:54.930
No.

00:01:55.170 --> 00:02:03.310
OK so we have created a basic bootstrap or basic push up nav tabs using the nerve enough tabs classes

00:02:03.330 --> 00:02:03.640
.

00:02:03.990 --> 00:02:04.380
OK.

00:02:04.740 --> 00:02:06.920
So now let's do a few more things.

00:02:06.960 --> 00:02:17.880
Let's add some icons so it's I'd like one just before the Home tab using a glyph icon.

00:02:18.390 --> 00:02:21.980
So we're going to create a spud.

00:02:23.310 --> 00:02:26.390
OK.

00:02:26.710 --> 00:02:31.830
We're going to give it a glass Cliff.

00:02:32.040 --> 00:02:32.790
Cliff I can

00:02:36.280 --> 00:02:36.790
then

00:02:39.770 --> 00:02:45.430
leave like go home.

00:02:46.650 --> 00:02:48.470
OK.

00:02:49.980 --> 00:02:54.730
All right let's do the same thing for messages.

00:02:55.050 --> 00:03:02.190
So we going to add a span just before

00:03:05.940 --> 00:03:15.820
text this time we want to add an envelope just before text.

00:03:15.840 --> 00:03:16.620
OK.

00:03:17.100 --> 00:03:26.880
Also we can add a bunch writes of a text showing for example how many messages how many new messages

00:03:27.990 --> 00:03:29.640
the user has got.

00:03:29.880 --> 00:03:39.370
So to do that we need to add another span after the text.

00:03:40.020 --> 00:03:46.810
And this time span is going to be of class much.

00:03:47.480 --> 00:03:53.700
OK let's play some text for example three four three messages.

00:03:54.050 --> 00:04:00.120
OK you can do the same thing with notifications.

00:04:00.160 --> 00:04:07.220
Just copy the spin and it's up after text.

00:04:08.220 --> 00:04:10.620
OK.

00:04:10.620 --> 00:04:13.720
All right.

00:04:17.400 --> 00:04:27.910
So we can change the styling of the Nav tabs so that they take the whole width of the viewport.

00:04:28.120 --> 00:04:31.960
And also they can have the same with all of them.

00:04:32.190 --> 00:04:34.250
So there is a class for that.

00:04:34.260 --> 00:04:36.710
It's going to be enough Josephite.

00:04:37.230 --> 00:04:38.550
Colleges are diskless

00:04:41.480 --> 00:04:41.970
lists

00:04:45.130 --> 00:04:47.320
though.

00:04:47.730 --> 00:04:58.130
You can see that they always take the full width of the viewport So in the x rays more devices under

00:04:58.170 --> 00:05:01.810
seven hundred sixty eight pixels you can see that the US sucks.

00:05:01.810 --> 00:05:10.710
But just beyond 768 pixels we can see that they take the whole width of the viewport and they are like

00:05:10.880 --> 00:05:12.010
OK.

00:05:12.480 --> 00:05:17.480
And all the way they have the same way OK.

00:05:17.730 --> 00:05:22.110
All right so let's move to nerve pills.

00:05:22.560 --> 00:05:31.050
So this creates another list.

00:05:32.550 --> 00:05:37.690
Some items.

00:05:39.970 --> 00:05:44.430
Again real presentation.

00:05:45.150 --> 00:05:46.920
Each of them is going to have a

00:05:51.050 --> 00:05:51.590
link

00:05:56.990 --> 00:05:59.420
within inches.

00:06:01.030 --> 00:06:09.570
OK so is this for example is one who then page on

00:06:15.210 --> 00:06:15.900
page to

00:06:18.690 --> 00:06:22.010
page three.

00:06:24.640 --> 00:06:25.360
OK.

00:06:25.440 --> 00:06:30.420
So we're going to add a class to our list.

00:06:30.420 --> 00:06:33.830
So first we still need the enough plus.

00:06:33.910 --> 00:06:34.820
OK.

00:06:35.100 --> 00:06:42.350
And then we are going to use the class of pills.

00:06:44.430 --> 00:06:46.220
Let's make sure everything is fine

00:06:48.920 --> 00:06:51.620
we please.

00:06:51.780 --> 00:06:56.320
So I'd.

00:07:00.960 --> 00:07:01.650
OK.

00:07:02.010 --> 00:07:06.710
So we've just created a basic nerve pills using bootstrap.

00:07:06.870 --> 00:07:15.380
We can make these studies if you want to by adding the nerve socket class.

00:07:15.430 --> 00:07:16.470
OK.

00:07:16.650 --> 00:07:21.130
Also we can make a certain item active.

00:07:21.390 --> 00:07:25.190
So let's say first item it is make it active.

00:07:25.260 --> 00:07:27.450
We need to use the class active.

00:07:27.540 --> 00:07:32.640
Well that's OK I can do the same thing with our NAV tabs.

00:07:32.660 --> 00:07:45.390
So let's make the home item active OK and class active.

00:07:47.100 --> 00:07:47.250
OK

00:07:47.550 --> 00:07:53.150
.

00:07:54.200 --> 00:07:57.200
All right.

00:07:57.320 --> 00:07:57.710
So

00:08:00.750 --> 00:08:02.460
OK let's add something else.

00:08:02.460 --> 00:08:06.680
Let's make a certain item disabled.

00:08:07.350 --> 00:08:12.740
So to do that is make the page 3 Item disabled.

00:08:13.080 --> 00:08:16.510
So we need the class disabled.

00:08:16.580 --> 00:08:19.180
This is pretty straightforward.

00:08:19.590 --> 00:08:21.130
OK.

00:08:21.240 --> 00:08:29.130
All right so we have learned how to create enough components basic knife components using bootstrap

00:08:29.820 --> 00:08:33.300
in the next video will get introduced to us