WEBVTT

00:00:07.210 --> 00:00:10.710
In this video we're we going to get introduced to bootstrap.

00:00:10.730 --> 00:00:18.820
So it is bootstrap bootstrap is a framework that we use for front end web developments.

00:00:18.870 --> 00:00:23.670
It would make our web development experience easier and faster.

00:00:24.330 --> 00:00:28.800
Let's have a quick look at the trap hope Bache gets bootstrapped.

00:00:28.830 --> 00:00:36.960
Those come if you scroll down a little bit we can explore one of the main aspects of bootstrap is the

00:00:36.960 --> 00:00:42.590
facts that push Trump will help us create responsive web designs.

00:00:42.930 --> 00:00:51.240
So this means that we will easily build web pages that will automatically adjusts in all devices so

00:00:51.240 --> 00:00:59.670
we can see how these elements gets stacked at some points when the width of our browser gets too small

00:00:59.670 --> 00:01:00.010
.

00:01:00.060 --> 00:01:06.350
And also we can see how they behave when the width is wider.

00:01:06.380 --> 00:01:07.680
All right.

00:01:07.710 --> 00:01:15.540
Also with trust comes with pre-build styling and decoration that we can use to style a simple elements

00:01:15.630 --> 00:01:20.520
such as buttons tables and so on.

00:01:20.520 --> 00:01:31.010
Also bootstrap comes with layouts components like thumbnails bhajis navigation bars and more.

00:01:31.620 --> 00:01:37.740
And finally Butch's truck comes with javascript's plugins like carousels.

00:01:37.740 --> 00:01:40.840
So we learn how to create carousels just like this one.

00:01:40.850 --> 00:01:47.820
I also would learn how to create more jobs grids plugins all rights.

00:01:48.540 --> 00:01:55.260
So to get started we're going to create our bootstrap projects folder.

00:01:55.260 --> 00:01:56.310
So we're going to call it

00:01:58.920 --> 00:01:59.550
bootstrap

00:02:02.490 --> 00:02:04.220
or bootstrap 3.

00:02:04.940 --> 00:02:07.400
OK.

00:02:07.640 --> 00:02:11.520
And let's open this folder using brackets

00:02:11.550 --> 00:02:17.780
.

00:02:24.060 --> 00:02:24.910
OK.

00:02:25.380 --> 00:02:29.940
So we're going to create our first ASML file.

00:02:29.940 --> 00:02:43.440
This will create using both shrub so you file one is called intellection pose a shemale.

00:02:44.310 --> 00:02:47.820
OK let's go back to our bootstrap home page

00:02:53.400 --> 00:03:02.520
so we can download bootstrap Straight's from here by following this link to go Sivells choices here

00:03:02.730 --> 00:03:11.790
so we can either use a CDN as we did with d.j query Y or we can just don't download the Abu's drop components

00:03:11.820 --> 00:03:12.620
from there.

00:03:13.050 --> 00:03:17.020
OK we are just going to go through the download route.

00:03:17.070 --> 00:03:19.970
So if we click on the download link.

00:03:20.930 --> 00:03:25.520
And then we open the file.

00:03:26.490 --> 00:03:32.570
We can just copy these components inside our products folder.

00:03:33.020 --> 00:03:33.770
OK.

00:03:33.780 --> 00:03:35.910
So if you go to our products folder

00:03:44.510 --> 00:03:50.120
just like these in the other.

00:03:50.920 --> 00:03:54.880
OK.

00:03:58.130 --> 00:04:07.970
Now in the same page we can use a basic template to start with.

00:04:08.010 --> 00:04:17.580
So we just copy the basic bootstrap template file and just change

00:04:20.640 --> 00:04:21.270
the title

00:04:26.410 --> 00:04:28.900
into action.

00:04:29.340 --> 00:04:36.420
OK so we see here that we are linking the file to the bootstrap CSSA file and also at the end of the

00:04:36.420 --> 00:04:45.240
body we've called both a link to a query because its importance for the javascript plugins and also

00:04:45.240 --> 00:04:53.820
includes a link to the bootstrap javascript's file which includes all the compiled javascript plugins

00:04:53.820 --> 00:04:54.380
.

00:04:54.420 --> 00:04:55.410
All right.

00:04:55.980 --> 00:04:56.790
OK.

00:04:57.170 --> 00:05:06.170
Bruce drub will need a container that will wrap all the site's contents.

00:05:07.040 --> 00:05:15.110
So rather than going there using elements just like birds will need to place all the elements inside

00:05:15.110 --> 00:05:15.820
a container.

00:05:15.960 --> 00:05:20.090
Let's go for our life review first.

00:05:20.100 --> 00:05:23.210
See that's the way you can see the page there.

00:05:23.530 --> 00:05:26.970
Now we are going to go for a container so we just get to the lead.

00:05:26.970 --> 00:05:36.010
That's what creates a div that's going to be our container and we need to give it a class container

00:05:36.980 --> 00:05:39.900
OK or contain container fluid.

00:05:40.020 --> 00:05:47.430
So if we go for a container this class will provide us with a responsive fixed width container.

00:05:47.850 --> 00:05:49.830
OK so let's try that first.

00:05:49.860 --> 00:05:52.810
So this place a header.

00:05:52.820 --> 00:05:57.960
There we are learning bootstrap

00:06:01.410 --> 00:06:03.260
and let's have a program.

00:06:03.260 --> 00:06:04.050
For example

00:06:07.200 --> 00:06:10.390
the world.

00:06:11.350 --> 00:06:13.060
OK so if we

00:06:16.200 --> 00:06:19.710
look at how much wealth we are using.

00:06:19.750 --> 00:06:26.820
We're not using the whole width of the viewport but it's is fixed because we are using a fixed container

00:06:26.830 --> 00:06:26.970
.

00:06:27.120 --> 00:06:37.560
But if we change the class of the container to container fluid then we get to be using the full width

00:06:37.590 --> 00:06:39.030
of our viewport.

00:06:39.060 --> 00:06:40.150
Oh you see.

00:06:40.690 --> 00:06:41.080
OK

00:06:44.460 --> 00:06:46.250
OK so just one more thing.

00:06:46.410 --> 00:06:52.440
If we look here as the meta elements we see that we of course the viewport meta element which is very

00:06:52.440 --> 00:06:55.500
important for Responsive designs.

00:06:55.740 --> 00:07:03.940
So we are sitting here the width of the of the page to follow the screen width of the device.

00:07:03.940 --> 00:07:04.990
All right.

00:07:05.540 --> 00:07:09.050
And also we are setting the initial scale to 1.

00:07:09.090 --> 00:07:16.050
OK so this means that we sit in the initial zoom level to 1 when the page is first loaded by the browser

00:07:16.140 --> 00:07:16.690
.

00:07:16.760 --> 00:07:24.440
OK as we can see here in the in the Commons these three tags they they must come first in the head.

00:07:24.480 --> 00:07:28.830
By the way we're going to be using this template for the rest of the chapter.

00:07:28.870 --> 00:07:35.130
OK all right so in the next video we will have a look as the grid system