1
00:00:05,360 --> 00:00:07,710
Welcome to the bootstrap for a crash course.

2
00:00:07,720 --> 00:00:14,650
S. Let's quickly discuss our goals upon completion of this section by the end of this section.

3
00:00:14,660 --> 00:00:19,610
You should have an understanding of a bootstrap is you should be able to get and use the bootstrap component

4
00:00:19,610 --> 00:00:23,600
templates and the documentation specifically be able to create nav bars.

5
00:00:23,720 --> 00:00:28,700
Since we'll be using those a lot within our web applications and understand in general how to use that

6
00:00:29,110 --> 00:00:30,390
documentation.

7
00:00:30,440 --> 00:00:37,400
So let's quickly start off by understanding what bootstrap is at its very core bootstrap is really just

8
00:00:37,490 --> 00:00:41,500
a very large CSSA file and a very large javascript file.

9
00:00:41,510 --> 00:00:44,110
However in practice it's really a lot more than that.

10
00:00:44,900 --> 00:00:50,450
Bootstrap has pre-built to use components that you can incorporate into your web applications and what

11
00:00:50,450 --> 00:00:55,700
that means is we're going to be able to make our Web sites look nice and have basic functionality on

12
00:00:55,700 --> 00:01:00,740
the front end without having to do a whole lot of work and bootstrap is going to save us a lot of time

13
00:01:00,820 --> 00:01:05,930
or making those websites look clean which is important because as we're dealing with the tedious work

14
00:01:05,990 --> 00:01:11,150
of the back and with Python flask and learning all that new material we don't have to have to worry

15
00:01:11,240 --> 00:01:17,450
about each TMLC SS bootstrap is going to make those websites look nice on the front end for us now it's

16
00:01:17,480 --> 00:01:21,730
easiest to understand how this actually works by going to the bootstrap documentation.

17
00:01:21,740 --> 00:01:22,920
So let's quickly go to.

18
00:01:22,940 --> 00:01:27,380
There'll be W.W. that get bootstrapped dot com or just google search Bitstrips and it'll take you to

19
00:01:27,380 --> 00:01:28,250
this page.

20
00:01:28,250 --> 00:01:30,120
Let's head over to the page on our browser.

21
00:01:30,460 --> 00:01:30,710
OK.

22
00:01:30,710 --> 00:01:34,790
Here we are at get bootstrapped dot com on the bootstrap documentation page.

23
00:01:34,880 --> 00:01:38,230
And if you scroll down you'll notice that there's a bootstrap CDN.

24
00:01:38,420 --> 00:01:40,380
So there's two ways of using bootstrap.

25
00:01:40,400 --> 00:01:46,450
One is to just manually download the CSSA and javascript files and linked to them manually.

26
00:01:46,640 --> 00:01:48,980
Just as we would link our own CSSA files.

27
00:01:48,980 --> 00:01:55,040
Or you can easily just copy the CSSA link as well as these javascript links and Jake Query links and

28
00:01:55,040 --> 00:01:59,000
they're hosted on what's known as a Cdn or content delivery network.

29
00:01:59,000 --> 00:02:03,440
So as long as your Web site has some sort of link to the Internet it can grab these automatically from

30
00:02:03,440 --> 00:02:04,020
the Internet.

31
00:02:04,100 --> 00:02:07,070
So you don't need to actually download the files themselves.

32
00:02:07,140 --> 00:02:11,240
Then typically that's what we're going to be using because it's really simple you just copy and paste

33
00:02:11,240 --> 00:02:14,200
these four lines of code and then you can use bootstrap.

34
00:02:14,210 --> 00:02:18,620
So we haven't really explored what bootstrap is before we do that let's check out some examples.

35
00:02:18,770 --> 00:02:22,100
So scroll up here and click on examples in the navigation bar.

36
00:02:22,870 --> 00:02:26,920
And they'll take it to some examples it can download the source code for all these examples as well

37
00:02:27,220 --> 00:02:28,570
comes in a nice zip file.

38
00:02:28,840 --> 00:02:34,210
But you'll notice if we start opening some of these in new tabs there's many different ways you can

39
00:02:34,210 --> 00:02:35,740
use bootstrap.

40
00:02:35,770 --> 00:02:39,480
So here's an example of bootstrap being used for a pricing page.

41
00:02:39,490 --> 00:02:41,900
So we see here there's a navigation bar at the top.

42
00:02:42,080 --> 00:02:46,120
There's kind of a nice container holding things in the center and then we see these cards first sign

43
00:02:46,120 --> 00:02:47,440
up for free get started.

44
00:02:47,560 --> 00:02:49,840
And then there's a nice footer here at the bottom.

45
00:02:49,840 --> 00:02:54,730
So that's a very typical example of what our web sites will look like after implementing bootstrap on

46
00:02:54,730 --> 00:02:55,540
them.

47
00:02:55,600 --> 00:02:58,810
So here you can see a checkout for example you can provide your name.

48
00:02:58,960 --> 00:03:02,990
Essentially it's a really nice looking form and we can see what's in the car.

49
00:03:03,090 --> 00:03:08,840
There's a carousel temple template excuse me and you can see here the carousel allows you to see more

50
00:03:08,840 --> 00:03:09,560
photos.

51
00:03:09,680 --> 00:03:13,140
And then we can see other panels and little cards here as well.

52
00:03:13,190 --> 00:03:16,710
One more cover template for kind of a home page features contact.

53
00:03:16,880 --> 00:03:18,380
Here's a product example.

54
00:03:18,380 --> 00:03:20,830
So all of these are built with bootstrap.

55
00:03:20,840 --> 00:03:22,330
So what does that actually mean.

56
00:03:22,370 --> 00:03:25,800
If we go back to get bootstrap that come come back to home.

57
00:03:25,820 --> 00:03:29,970
And if you click on documentation you'll notice that there's lots of information here.

58
00:03:29,990 --> 00:03:32,180
Introduction download contents.

59
00:03:32,270 --> 00:03:35,740
Essentially what we need to understand is this basic concept.

60
00:03:35,780 --> 00:03:39,590
Let's say I want to add a navigation bar to my actual Web site.

61
00:03:39,800 --> 00:03:45,560
All I need to do is come to documentation component's scroll down until I find the component I'm looking

62
00:03:45,560 --> 00:03:47,990
for such as nav bar.

63
00:03:47,990 --> 00:03:50,940
Click on that it'll explain how it works.

64
00:03:51,050 --> 00:03:54,700
So we can see the various classes the supported content as well.

65
00:03:54,830 --> 00:04:00,300
And most importantly we see these nice examples with their direct code below them.

66
00:04:00,320 --> 00:04:02,240
So what does that actually mean.

67
00:04:02,240 --> 00:04:05,450
It means that we have this navigation bar as it dropped down.

68
00:04:05,450 --> 00:04:10,690
It has a search button etc. and here we see the actual code that builds it out.

69
00:04:10,940 --> 00:04:14,780
So here's the navigation bar code and you'll notice that there's these class calls.

70
00:04:14,780 --> 00:04:20,510
So if I zoom in here you'll see these specific class calls and these are the class calls that come with

71
00:04:20,510 --> 00:04:22,580
bootstraps CSSA file.

72
00:04:22,580 --> 00:04:24,320
So that's the really important part.

73
00:04:24,320 --> 00:04:28,170
So let's say you want to add maybe a form to your Web site.

74
00:04:28,340 --> 00:04:34,430
Will you come to components click on forms read the overview and then you can see here a really nice

75
00:04:34,430 --> 00:04:35,340
looking form.

76
00:04:35,450 --> 00:04:37,850
And that's where you're going to use your skeleton code.

77
00:04:38,060 --> 00:04:41,630
So here we can see the form and we're already familiar of H.T. and all forms.

78
00:04:41,690 --> 00:04:46,850
All you need to notice is that there's various classes here and these classes again make it look really

79
00:04:46,850 --> 00:04:51,130
nice and you can always customize it yourself with your own C SS classes.

80
00:04:51,290 --> 00:04:57,110
And then there's I just scroll down more examples of things like form control multiple select etc. and

81
00:04:57,110 --> 00:04:59,600
you can always copy and paste this example code.

82
00:04:59,660 --> 00:05:02,820
So if you scroll down you'll see tons of examples that are super useful.

83
00:05:03,090 --> 00:05:03,650
OK.

84
00:05:03,830 --> 00:05:08,780
So by the end of this section of the course you should have a really comfortable feeling of coming over

85
00:05:08,780 --> 00:05:13,370
to the documentation page looking at the various components deciding on which one you want to add to

86
00:05:13,370 --> 00:05:14,610
your actual Web site.

87
00:05:14,720 --> 00:05:18,610
For instance we'll learn about how to add a Jumbotron that's really useful.

88
00:05:18,620 --> 00:05:23,300
You'll copy this and be able to use his example code a lot of it is just copying and pasting from the

89
00:05:23,300 --> 00:05:28,860
documentation and then making custom adjustments for your own Web site coming up next we'll begin to

90
00:05:28,860 --> 00:05:32,900
actually learn some of these key components that we're going to be using to bootstrap.

91
00:05:32,910 --> 00:05:33,540
We'll see if they're.