1
00:00:00,540 --> 00:00:01,930
Hello and welcome.

2
00:00:02,070 --> 00:00:11,730
In this show we are going to be taking a look at a quick overview of the pope's struck frame work.

3
00:00:11,880 --> 00:00:18,480
We're not going to look at everything just kind of pick a few bits and pieces within the framework to

4
00:00:18,510 --> 00:00:20,510
have a look.

5
00:00:20,670 --> 00:00:24,250
I'm on the book's trap website.

6
00:00:24,540 --> 00:00:27,910
So this is the main website for post crap.

7
00:00:27,930 --> 00:00:36,960
So there are different components of it books trap is a framework so it contains elements of csx.

8
00:00:38,110 --> 00:00:42,910
And then it's on companies javascript and then the cost of my session.

9
00:00:42,910 --> 00:00:44,510
If you want a cost to my.

10
00:00:44,770 --> 00:00:47,820
So let's begin with the get started.

11
00:00:47,830 --> 00:00:49,060
Part of it.

12
00:00:49,100 --> 00:01:00,270
So getting start just guides you to how you can install it then less good to be seen as part of it.

13
00:01:00,610 --> 00:01:08,970
Okay so this is a CNS part of the framework and this is a quick overview before you can you see assess

14
00:01:08,990 --> 00:01:17,650
see csx Needs hastier Mel to work with so the very first thing you need to do in your code as recommended

15
00:01:17,650 --> 00:01:21,990
by Bose wrap is to define his team of five doctype.

16
00:01:22,240 --> 00:01:27,340
So on your documents your code you must have the doctype.

17
00:01:27,640 --> 00:01:31,530
This is my sample project file.

18
00:01:51,480 --> 00:01:58,770
I have got the doctype specified as advice by the bootstraps document I've got its best fight.

19
00:01:58,800 --> 00:02:03,080
This indicates that the documents and his team of five doc.

20
00:02:03,510 --> 00:02:11,250
Next thing you need to do in your code remember that framework defines how you write your code.

21
00:02:11,250 --> 00:02:22,690
Next scene of advice is to define the method tag which indicates that the core is small but friendly.

22
00:02:22,780 --> 00:02:25,820
You do that using this piece of tag here.

23
00:02:25,850 --> 00:02:33,510
The metal refers to information the view refers to the screen size of the device that will be here in

24
00:02:33,510 --> 00:02:34,500
the page.

25
00:02:34,500 --> 00:02:39,240
So you need to specify that in your code and in the ed section.

26
00:02:39,720 --> 00:02:46,350
I have done that in my sample document so it is always a good idea to have a sample template and then

27
00:02:46,350 --> 00:02:50,100
define all these so I've defined that the viewport.

28
00:02:50,200 --> 00:02:53,250
And they were for the mobile device.

29
00:02:53,250 --> 00:02:56,250
The initial SCO here refers to the zoomin.

30
00:02:56,370 --> 00:03:01,550
He allows you to zoom in and zoom out of the mobile.

31
00:03:01,690 --> 00:03:05,160
This is the topography by default.

32
00:03:05,280 --> 00:03:13,350
Books drop sets the background quite a lot of documents to white on the body and then he uses the font

33
00:03:13,350 --> 00:03:23,220
family font to that family as the base for the font and uses values also contain as bootstrap requires

34
00:03:23,220 --> 00:03:28,050
that a containing element wraps around the site content.

35
00:03:28,050 --> 00:03:35,570
So any element you want to specify your code for use in Bootstrap you need to rub that in containers.

36
00:03:35,910 --> 00:03:41,330
This is a piece of code written for creating buttons as you can see.

37
00:03:41,340 --> 00:03:48,000
I've wrapped them all in containers as advice but bootstrap warkentin out there that's another container

38
00:03:48,190 --> 00:03:54,030
and that's another container also always wrap your elements in containers so that you can utilize the

39
00:03:54,030 --> 00:03:56,250
framework properly.

40
00:03:56,250 --> 00:04:03,910
You've got the great system the bootstrap framework includes irresponsive more by a first fluey create

41
00:04:03,990 --> 00:04:10,930
system so the grid system used to create a page layout so there must be handy.

42
00:04:10,950 --> 00:04:14,910
Do that in rows and columns.

43
00:04:14,910 --> 00:04:17,680
So let's go to the javascript side of the frame work.

44
00:04:17,690 --> 00:04:25,350
This is Jeff us group site and here are the various things that are available for you to use so if you

45
00:04:25,350 --> 00:04:27,990
need to create an alert you come here.

46
00:04:27,990 --> 00:04:29,430
Click on the alert.

47
00:04:29,440 --> 00:04:32,040
See how they want you to do it.

48
00:04:32,430 --> 00:04:35,170
So this is how they found files that you write the code.

49
00:04:35,190 --> 00:04:39,630
If you want to include an alert so there are different methods are staff.

50
00:04:39,630 --> 00:04:47,100
So the framework really is just to guide you as to how you would use the tools available within the

51
00:04:47,100 --> 00:04:49,770
framework and dealt with the complex section.

52
00:04:49,770 --> 00:04:57,510
These are various components like the graphic ones here are various icons that you can use and then

53
00:04:57,510 --> 00:04:58,630
you've got drub down.

54
00:04:58,650 --> 00:05:01,270
If you wanted to create a drop down your.

55
00:05:01,350 --> 00:05:08,660
Look at the drop down and depending on the type of drop down you want to create the trap framework as

56
00:05:08,670 --> 00:05:15,450
already called sample's So you just need to replicate the samples and write it your code the way they

57
00:05:15,450 --> 00:05:22,040
have specified so you can take advantage of the various classes built into the frame.

58
00:05:22,470 --> 00:05:30,110
The key the key thing here is to come to know how to use the features within the framework.

59
00:05:30,270 --> 00:05:31,030
So if you want.

60
00:05:31,080 --> 00:05:35,850
This says companero you've come to the CSA section and just have a look.

61
00:05:35,850 --> 00:05:42,150
For example if you wanted a button you click on the button tab and see how they created the button and

62
00:05:42,150 --> 00:05:46,840
they will advise you how to use the classes they have defined for the buttons.

63
00:05:46,990 --> 00:05:51,250
So all these are how you would use dipiero features in the.

64
00:05:51,450 --> 00:05:55,360
And then you've got the customized session that lets you customize.

65
00:05:55,530 --> 00:05:57,400
So these are the main things.

66
00:05:57,410 --> 00:06:04,980
If you wanted less files you come on check what you want from the framework and then they'll read compile

67
00:06:04,980 --> 00:06:07,430
it to cost of build for you.

68
00:06:07,440 --> 00:06:11,140
So these are the various components of the framework.

69
00:06:11,160 --> 00:06:17,440
If he does need all of them you can just check it and then rebuild the ones you want.

70
00:06:17,520 --> 00:06:20,030
So this is how you would cost 10 miles.

71
00:06:20,050 --> 00:06:25,830
Both strap frame work so you don't need to use everything you can use what you need.

72
00:06:26,010 --> 00:06:31,000
So in this video just went to a very quick overview of the frame work.

73
00:06:31,220 --> 00:06:38,370
These are the various components so if you need to do anything you just click on the respective rest

74
00:06:38,940 --> 00:06:45,890
tabs and then utilize the various devices or features they have.

75
00:06:45,990 --> 00:06:47,320
But strub does give you.

76
00:06:47,440 --> 00:06:50,470
Vice on how to use them as well.

77
00:06:50,490 --> 00:06:52,860
So thank you so much for watching this video.

78
00:06:52,860 --> 00:06:54,520
I hope it's helpful.

79
00:06:54,720 --> 00:06:56,530
Take care and bye for now.