WEBVTT 00:00:07.950 --> 00:00:14.700 So far we have covered that bootstraps uses components as well as bootstrap lay out components. 00:00:14.700 --> 00:00:19.440 Now we're going to move to something else we're going to move to bootstrapped at javascript's plugins 00:00:20.880 --> 00:00:32.460 bootstrap comes with many Jacquard plugins that we can use by using the included data API and all these 00:00:32.470 --> 00:00:38.240 plugins they are included in our bootstrap javascript's file. 00:00:38.250 --> 00:00:42.780 We have already covered a simple example when we created our loved one. 00:00:43.020 --> 00:00:50.010 So if you remember when we were creating the functionality of our toggle button we use these attributes 00:00:50.010 --> 00:00:50.670 . 00:00:50.670 --> 00:00:58.650 So we used a data target and also used a data to go battels what action is triggered when we click on 00:00:58.650 --> 00:00:59.780 the button. 00:01:00.590 --> 00:01:06.600 Ok so now let's move to our first bootstrap Jay query plugin. 00:01:06.600 --> 00:01:09.420 We can look at a drop down menus. 00:01:09.450 --> 00:01:12.250 So we're going to create a menu just like this one. 00:01:12.680 --> 00:01:13.230 OK. 00:01:13.560 --> 00:01:20.180 So we're going to have a button and also a list of items for our menu. 00:01:20.280 --> 00:01:21.790 So let's go ahead and do this. 00:01:22.050 --> 00:01:29.130 So first of all we going to place everything inside a parent element of claws 00:01:31.900 --> 00:01:33.960 dropped out. 00:01:34.040 --> 00:01:35.240 All right. 00:01:35.790 --> 00:01:39.090 And then let's create a button 00:01:42.850 --> 00:01:44.910 we can go for a link as well. 00:01:44.970 --> 00:01:45.940 Both will work. 00:01:45.990 --> 00:01:48.060 But let's go for a button for that. 00:01:49.130 --> 00:01:50.040 OK. 00:01:50.070 --> 00:01:57.500 So let's give our Butson a glass of dropdown toggle. 00:01:59.690 --> 00:02:00.490 OK. 00:02:00.850 --> 00:02:09.740 And then reconcile the button using the button class and then Busson info. 00:02:11.400 --> 00:02:22.920 Ok this gives a type as well of button and also is giving you an ID dropdown menu. 00:02:24.350 --> 00:02:29.900 OK let's add some takes the top down. 00:02:30.600 --> 00:02:34.050 And also to create the arrow. 00:02:34.430 --> 00:02:41.310 You can go over a span of class. 00:02:41.660 --> 00:02:45.590 Correct. 00:02:45.600 --> 00:02:47.100 All right. 00:02:48.120 --> 00:02:49.280 OK. 00:02:50.160 --> 00:02:54.610 Now we going to create a list. 00:02:54.940 --> 00:02:57.210 We're going to place all these items in a list. 00:02:57.510 --> 00:03:01.200 So first of all our list will need a class of dropdown menu 00:03:02.610 --> 00:03:05.750 . 00:03:07.530 --> 00:03:08.510 OK. 00:03:08.840 --> 00:03:10.590 Can give you a roll of menu 00:03:13.570 --> 00:03:15.810 and also you can use a. 00:03:16.570 --> 00:03:22.890 Another attributes is going to be area labeled by. 00:03:23.840 --> 00:03:32.620 So these attributes will identify the elements that labels the current elements. 00:03:32.640 --> 00:03:35.650 In our case it's going to be our button. 00:03:35.660 --> 00:03:37.780 So we're going to use the ID of the button. 00:03:38.520 --> 00:03:39.690 OK. 00:03:40.710 --> 00:03:42.130 All right. 00:03:42.780 --> 00:03:47.780 So now let's start with the first list item. 00:03:47.830 --> 00:03:52.530 So at the moment we've got a header. 00:03:52.530 --> 00:04:02.570 So our list item is going to have all these items are going to have a roll of presentation. 00:04:02.620 --> 00:04:03.310 OK. 00:04:03.930 --> 00:04:08.520 And this one as is a header. 00:04:08.700 --> 00:04:13.230 We're going to give it to a class of dropdown head. 00:04:14.430 --> 00:04:20.100 OK and let's have some text there had one. 00:04:21.790 --> 00:04:22.200 OK. 00:04:22.380 --> 00:04:29.070 So at the moment if we click on the top down button nothing happens it's because we haven't built the 00:04:29.070 --> 00:04:30.530 functionality of the bus yet. 00:04:30.720 --> 00:04:37.170 So as we have said we'll use the aggregate data API to build this functionality. 00:04:37.170 --> 00:04:45.990 So in our case we'll use a data attributes is the data toggle as we have done with the total of our 00:04:46.170 --> 00:04:47.290 Naveh. 00:04:47.820 --> 00:04:55.460 By this time the action is going to be dropped out by now. 00:04:55.500 --> 00:04:58.930 If you click on the button you can see our list. 00:04:59.000 --> 00:05:00.050 All right. 00:05:00.630 --> 00:05:11.620 OK so let's add more list items to the next list item is going to be as well. 00:05:11.620 --> 00:05:14.640 We're going to give you a arrow presentation. 00:05:15.720 --> 00:05:16.170 OK. 00:05:16.170 --> 00:05:21.550 And then we're going to place a link inside our list item. 00:05:22.410 --> 00:05:23.050 OK. 00:05:23.220 --> 00:05:31.800 So this link is going to have a row of menu item. 00:05:31.800 --> 00:05:38.130 You can give it any Streff as well if you want to and it's some text. 00:05:38.440 --> 00:05:41.660 It's ok. 00:05:42.570 --> 00:05:43.350 It is public. 00:05:43.380 --> 00:05:46.800 That's got a couple of them there. 00:05:47.610 --> 00:05:50.820 And then we're going to have a divider. 00:05:51.000 --> 00:05:52.600 So it's a creates a divider. 00:05:52.830 --> 00:05:57.430 We just need another list item. 00:05:57.460 --> 00:05:58.720 OK. 00:05:58.830 --> 00:06:07.800 It's also the rule is presentation and the class this time we need is divide. 00:06:09.510 --> 00:06:10.760 OK. 00:06:11.670 --> 00:06:13.960 Now we need another header. 00:06:14.970 --> 00:06:18.910 So who's going to copy the first letter. 00:06:20.370 --> 00:06:21.090 OK. 00:06:21.090 --> 00:06:22.740 It's going to be headed to. 00:06:23.520 --> 00:06:27.590 And then we need three other items. 00:06:27.950 --> 00:06:30.510 So it is just copy one of these items 00:06:34.440 --> 00:06:36.700 and duplicate them. 00:06:37.890 --> 00:06:39.110 OK. 00:06:39.120 --> 00:06:50.300 You can disable a certain item if you want to by adding a class to the list item of disabled. 00:06:50.980 --> 00:06:51.290 You say 00:06:56.100 --> 00:06:58.770 hey you know it's it's used Sibyl's 00:07:01.590 --> 00:07:01.950 or