WEBVTT

00:00:07.730 --> 00:00:13.500
In this video we're going to learn how to create buzz using bootstrap but you're really creating a nav

00:00:13.500 --> 00:00:16.210
bar similar to this one.

00:00:16.260 --> 00:00:22.290
So let's explore together the behavior of our body in different viewpoints.

00:00:22.710 --> 00:00:27.920
So in large devices you can see most all the elements of the nav bar obviously.

00:00:28.620 --> 00:00:35.610
But if we decrease the width of the viewport and go for smaller devices and the 706 pixels we can see

00:00:36.000 --> 00:00:40.080
that all these elements they will collapse.

00:00:40.080 --> 00:00:45.080
And instead we can see a single button that will allow us to access those elements.

00:00:45.620 --> 00:00:46.630
OK.

00:00:47.310 --> 00:00:54.820
So to make it easy the number contains a couple of main components.

00:00:54.840 --> 00:01:02.200
So the first component is a nav bar header which consists of a brand.

00:01:02.250 --> 00:01:05.970
In our case it's store and a toggle button.

00:01:05.990 --> 00:01:06.690
OK.

00:01:07.110 --> 00:01:17.610
And the other components is the collapsible content which is shown or which consists of all these elements

00:01:17.610 --> 00:01:21.340
so links forms buttons whatever.

00:01:21.990 --> 00:01:22.860
OK.

00:01:23.250 --> 00:01:26.400
So let's create our nav bar.

00:01:26.460 --> 00:01:31.000
So first thing we need to play is enough back outside our container.

00:01:31.520 --> 00:01:33.960
OK so

00:01:37.980 --> 00:01:40.380
we can use the love tag

00:01:43.800 --> 00:01:52.110
and are going to need to give that tag a roll navigation and we're going to use a few classes.

00:01:52.110 --> 00:01:54.290
The main one is going to be Narva.

00:01:54.770 --> 00:01:55.660
OK.

00:01:56.160 --> 00:02:05.500
That will creates the number and then we need another class to tile the number but we can go for nav

00:02:05.570 --> 00:02:11.610
bar default and you can see the gray color for the nav bar.

00:02:11.760 --> 00:02:18.590
We can use we can use number inverse to go for the black version as we have done here.

00:02:18.680 --> 00:02:20.080
OK.

00:02:20.700 --> 00:02:26.700
Next we need a container inside the nerve.

00:02:26.850 --> 00:02:35.220
So it's going to be a div of class container or container fluid.

00:02:35.400 --> 00:02:36.840
If you want.

00:02:37.980 --> 00:02:39.250
OK.

00:02:39.340 --> 00:02:49.140
And then inside the container we can place our couple of components the number header and then the collapsible

00:02:49.740 --> 00:02:50.370
contents.

00:02:50.550 --> 00:02:52.430
So let's start with the header.

00:02:52.620 --> 00:02:59.260
So it's going to be a div of class nav bar header.

00:03:00.210 --> 00:03:07.400
Ok I would replace both the brand and the toggle button inside this neighborhood.

00:03:07.710 --> 00:03:09.440
So it starts with the brand.

00:03:09.480 --> 00:03:11.150
So it's going to be a link.

00:03:11.400 --> 00:03:12.480
OK.

00:03:13.130 --> 00:03:13.710
OK.

00:03:13.950 --> 00:03:16.130
And we need to give it a class

00:03:20.940 --> 00:03:23.880
Navar brand.

00:03:25.490 --> 00:03:28.310
OK.

00:03:29.440 --> 00:03:32.250
Now let's move to the button.

00:03:32.310 --> 00:03:36.650
So you going to create a button using the button tag.

00:03:37.480 --> 00:03:39.800
OK.

00:03:41.220 --> 00:03:46.810
And let's give it a swipe button.

00:03:47.430 --> 00:03:53.780
And also a class of nav bar toggle.

00:03:56.210 --> 00:03:59.520
OK.

00:04:02.430 --> 00:04:04.950
All right.

00:04:06.210 --> 00:04:10.920
So let's see how to create these bars inside the button.

00:04:10.920 --> 00:04:11.520
Are we going to do.

00:04:11.520 --> 00:04:17.900
We're going to place a few spans inside the button and give them a class icon bar.

00:04:18.600 --> 00:04:25.690
So let's start with the first one and give it to a class icon bar.

00:04:25.800 --> 00:04:28.480
So you can see the first bar.

00:04:28.710 --> 00:04:32.730
If you duplicate this you can have a second bar and a third bar.

00:04:33.150 --> 00:04:35.220
And that's exactly what we wanted.

00:04:35.880 --> 00:04:38.040
OK.

00:04:38.310 --> 00:04:38.670
All right

00:04:42.730 --> 00:04:51.220
just for assistive technologies we can place another span just before these bars with some text in it's

00:04:51.730 --> 00:05:04.580
saying toggle navigation then we can give it to a class A saw only so that it's hidden.

00:05:05.710 --> 00:05:06.790
All right.

00:05:07.510 --> 00:05:12.600
OK so now we're going to move to the collapsable content.

00:05:13.660 --> 00:05:19.500
So the first component you say is the love header.

00:05:19.520 --> 00:05:24.310
Now we're going to move to another Dave.

00:05:26.500 --> 00:05:30.750
This time is the glass of all content.

00:05:30.940 --> 00:05:32.260
I'm going to give it a class

00:05:34.990 --> 00:05:35.380
of

00:05:38.110 --> 00:05:39.340
bar clumps

00:05:43.840 --> 00:05:45.800
and clumps.

00:05:46.660 --> 00:05:51.130
OK let's give you an ID as well.

00:05:51.130 --> 00:05:55.960
We will need this ID to link it to the toggle button.

00:05:56.310 --> 00:05:56.800
OK.

00:05:57.040 --> 00:05:59.760
So let's give us an ID love bar collapse.

00:05:59.830 --> 00:06:01.570
Well no.

00:06:02.860 --> 00:06:03.480
OK.

00:06:03.490 --> 00:06:12.010
Let's place a few elements inside this not pocalypse.

00:06:12.330 --> 00:06:19.370
So let's go for a list for example.

00:06:20.510 --> 00:06:21.800
OK.

00:06:22.270 --> 00:06:28.080
So we need to give the lists a class of love.

00:06:28.120 --> 00:06:30.530
Nuff nuff.

00:06:30.550 --> 00:06:32.210
OK.

00:06:32.230 --> 00:06:35.350
Then inside the list let's have a few list items.

00:06:35.480 --> 00:06:42.490
If you links the first one is go for

00:06:45.640 --> 00:06:58.680
all products and then help then deposits all products into places inside to link all products.

00:06:58.770 --> 00:07:05.700
Gail it's a way to refer to the link you want to.

00:07:05.710 --> 00:07:11.530
And also let's have a class because this one is active.

00:07:12.070 --> 00:07:17.830
So we're just going to add a class to the link itself to the list item itself.

00:07:18.130 --> 00:07:21.200
But he's going to be active.

00:07:21.430 --> 00:07:24.590
So our goal wasn't doesn't work at the moment.

00:07:24.930 --> 00:07:32.340
But if we expand this you can see the elements being added.

00:07:33.040 --> 00:07:37.140
Ok so let's add another list item

00:07:40.290 --> 00:07:42.780
the link and it's.

00:07:43.530 --> 00:07:47.670
So it is time it's going to be help.

00:07:47.670 --> 00:07:54.060
Then if Wiseman's so help you.

00:07:55.000 --> 00:07:56.080
I think we know.

00:07:56.140 --> 00:07:58.450
And finally it's

00:08:03.980 --> 00:08:16.190
deps OK for now we'll see later how to create a drop down menu in Bootstrap.

00:08:16.280 --> 00:08:28.560
But for now let's just creates this arow using a spoon with a class of carrots.

00:08:28.780 --> 00:08:31.270
OK.

00:08:33.140 --> 00:08:33.620
OK.

00:08:33.700 --> 00:08:48.890
So now we will need to link the TO GO button to the collapsable content.

00:08:49.040 --> 00:08:58.430
So the way you do that's great is going to be to go back to the button.

00:08:58.480 --> 00:09:08.980
So first we are going to need a data targets so bootstrap comes with some pre-built

00:09:14.980 --> 00:09:27.580
data attributes that will allow us to create some interaction on a web page without having to write

00:09:27.610 --> 00:09:29.530
any javascript code.

00:09:29.560 --> 00:09:39.850
So by using these data butes we will make this button collapse and expand our collapsable content without

00:09:39.850 --> 00:09:42.020
using any javascript's.

00:09:42.310 --> 00:09:51.640
So the first attribute you're going to use here is going to be data targets which is going to be our

00:09:51.640 --> 00:10:03.090
collapsable content and we're going to use We're looking here at our back ups.

00:10:03.160 --> 00:10:08.070
We're looking at the elements of ID number collapse.

00:10:10.360 --> 00:10:20.230
Sign followed by the ID of them we need a data Tuggle.

00:10:22.020 --> 00:10:25.150
That say that we are collapsing

00:10:28.030 --> 00:10:32.540
the elements not collapse.

00:10:32.590 --> 00:10:37.090
Now if you click on the table wasn't you can see how it works

00:10:37.310 --> 00:10:44.220
.

00:10:44.510 --> 00:10:44.740
OK

00:10:48.190 --> 00:10:51.280
let's refresh the page

00:10:51.280 --> 00:11:00.450
.

00:11:02.770 --> 00:11:06.470
OK.

00:11:07.810 --> 00:11:08.540
OK.

00:11:08.590 --> 00:11:12.210
Now let's add a few more things inside our collapsible content.

00:11:12.460 --> 00:11:17.600
So let's add a search form.

00:11:18.160 --> 00:11:19.220
OK.

00:11:20.010 --> 00:11:21.250
So let's go

00:11:26.800 --> 00:11:34.090
after the lists and create a form.

00:11:34.090 --> 00:11:35.630
So.

00:11:35.850 --> 00:11:45.150
So he wants to first of all we need to use a class where the form is going to be enough but form.

00:11:45.730 --> 00:11:50.130
And we we want to align this form to the left.

00:11:50.290 --> 00:12:03.700
So so are you going to use another class now Bob left and we can either roll if you want to if other

00:12:03.700 --> 00:12:07.740
all switch to this form.

00:12:08.210 --> 00:12:10.350
OK.

00:12:10.870 --> 00:12:23.560
Now to create this inputs and attach a button to it with the glyph icon as we have done earlier in the

00:12:25.390 --> 00:12:31.660
forms section we need to place everything inside any group.

00:12:31.960 --> 00:12:40.720
So we're going to use a diff k with the class input group.

00:12:41.980 --> 00:12:44.170
OK so first we need to start with a

00:12:46.950 --> 00:12:48.410
So.

00:12:48.540 --> 00:12:55.270
So the button is going to be placed inside a span of class in Group button.

00:12:55.630 --> 00:12:57.610
We have done this earlier if you remember.

00:12:57.670 --> 00:12:59.560
So let's create a span

00:13:02.700 --> 00:13:10.540
OK and give it a class input group button.

00:13:10.730 --> 00:13:14.210
Now we can use our button inside dispatch.

00:13:14.220 --> 00:13:15.520
So the button is going to be

00:13:18.430 --> 00:13:25.930
of type submit and we're going to give it's a class

00:13:31.450 --> 00:13:37.310
Button and decided like this button info.

00:13:38.850 --> 00:13:40.410
OK.

00:13:40.600 --> 00:13:43.630
See.

00:13:43.720 --> 00:13:48.120
OK so let's put some text in the button go.

00:13:48.520 --> 00:13:50.410
Here we go.

00:13:50.530 --> 00:13:52.280
All right.

00:13:52.300 --> 00:13:57.050
Now let's move to our search inputs.

00:13:57.580 --> 00:13:59.650
You go for words.

00:13:59.860 --> 00:14:00.850
What it is.

00:14:00.850 --> 00:14:01.510
Text

00:14:04.130 --> 00:14:15.590
is give you an ID search and we need the form control class.

00:14:15.670 --> 00:14:17.280
OK.

00:14:18.260 --> 00:14:23.990
And let's have a placeholder as well search.

00:14:25.110 --> 00:14:27.780
OK and before we move on.

00:14:27.940 --> 00:14:32.730
When he has a good practice we need a label for all our inputs.

00:14:33.220 --> 00:14:37.830
So even if we want the level to be hidden we still need a label.

00:14:38.410 --> 00:14:38.960
OK.

00:14:39.030 --> 00:14:47.880
And let's use the class a saw only to hide the label.

00:14:50.470 --> 00:14:51.510
OK.

00:14:52.030 --> 00:14:58.960
So finally let's go for a search if I can.

00:14:58.960 --> 00:15:03.450
So you can use a sperm.

00:15:04.610 --> 00:15:06.200
OK.

00:15:10.270 --> 00:15:13.480
That I'm going to give it a class.

00:15:14.620 --> 00:15:18.060
So if I can then

00:15:21.090 --> 00:15:23.500
if I can search

00:15:27.330 --> 00:15:34.230
then we need another class form control feedback.

00:15:35.780 --> 00:15:37.840
OK.

00:15:40.030 --> 00:15:49.270
Or it's now let's create our log in Boston so we can replace those inside the form.

00:15:49.870 --> 00:15:50.340
OK.

00:15:50.590 --> 00:15:55.700
It's always good to place all form elements inside a nav bar form.

00:15:56.120 --> 00:15:57.260
It shows.

00:15:57.540 --> 00:16:01.690
It's good for an obscene display.

00:16:01.700 --> 00:16:06.950
So let's let's create another form.

00:16:09.390 --> 00:16:11.580
OK.

00:16:11.640 --> 00:16:13.970
Give it a class.

00:16:14.640 --> 00:16:15.550
Bad form

00:16:18.900 --> 00:16:19.610
at this time.

00:16:19.630 --> 00:16:24.110
We want the form to be aligned to the right.

00:16:24.130 --> 00:16:24.540
OK.

00:16:24.760 --> 00:16:30.960
So are you going to use the class now for rights rather than have a left in a bar.

00:16:31.050 --> 00:16:33.450
Right.

00:16:33.800 --> 00:16:34.370
And let's

00:16:37.900 --> 00:16:45.160
create our input so we were not going to use a button we're going to use and inputs.

00:16:45.180 --> 00:16:48.010
OK.

00:16:51.170 --> 00:16:55.960
And we're going to give it a class button

00:16:58.670 --> 00:17:02.870
and then Butson success.

00:17:05.430 --> 00:17:13.000
So you can see that he's taking too much with other moments but when when we are the type button we

00:17:13.000 --> 00:17:14.330
can see the difference.

00:17:14.330 --> 00:17:22.500
Now let's just add a value showing Logan.

00:17:25.570 --> 00:17:26.010
OK

00:17:29.430 --> 00:17:33.160
you can see that our number is working.

00:17:33.860 --> 00:17:37.540
You can use the toggle button in small parts.

00:17:37.570 --> 00:17:39.330
OK.

00:17:39.490 --> 00:17:44.190
Now one final thing before we finish this creates.

00:17:44.320 --> 00:17:52.450
Are they close to the to the ball so that we can have a fixed top number.

00:17:52.900 --> 00:18:05.770
So let's create some content inside our container fluid for though this is a few paragraphs.

00:18:09.780 --> 00:18:10.710
OK.

00:18:11.400 --> 00:18:14.630
So at the moment let's see if we scroll down.

00:18:15.360 --> 00:18:25.690
The number goes way and if he wants the number to be fixed so he can just use another class for a number

00:18:25.700 --> 00:18:28.780
.

00:18:31.630 --> 00:18:37.920
It's going to be loved but fixed top.

00:18:38.300 --> 00:18:38.540
OK

00:18:43.140 --> 00:18:46.260
let's add a few more paragraphs.

00:18:46.440 --> 00:18:47.330
No.

00:18:48.050 --> 00:18:51.590
You can see that the number now is picked up.

00:18:51.620 --> 00:18:54.700
We can use fixed bottom as well.

00:18:54.970 --> 00:18:57.500
It's gives a similar behavior.

00:18:58.010 --> 00:19:00.210
OK let's keep it on top.

00:19:00.220 --> 00:19:01.160
No.

00:19:01.550 --> 00:19:07.200
One thing is you can notice that there is some content that is actually behind enough.

00:19:07.210 --> 00:19:11.270
So if we selects the first paragraph it's actually there.

00:19:11.570 --> 00:19:12.140
OK.

00:19:12.130 --> 00:19:18.150
So we can avoid that by styling this container.

00:19:18.830 --> 00:19:21.430
I think a Margene

00:19:24.460 --> 00:19:29.460
top for example of 60 pixels.

00:19:30.380 --> 00:19:31.000
OK.

00:19:31.010 --> 00:19:33.390
So now our first paragraph says the