1 00:00:01,280 --> 00:00:07,930 Hello, in this video, I am going to show you how to implement Beyblade Bidstrup the very similar to 2 00:00:08,060 --> 00:00:10,190 how you would implement a normal table. 3 00:00:10,610 --> 00:00:18,170 And I'll also provide a link in the description to the bootstrap page where you can access pages such 4 00:00:18,170 --> 00:00:22,970 as a table, which gives you all of the different classes and features that you can implement. 5 00:00:23,150 --> 00:00:25,280 I will show you the basics to get you going. 6 00:00:25,550 --> 00:00:33,950 OK, so first of all, let's create a simple table, a table, and we're going to create it without 7 00:00:33,950 --> 00:00:36,320 any real bootstrap stuff initially. 8 00:00:37,100 --> 00:00:42,820 And we'll see table head and then the table row in here. 9 00:00:42,850 --> 00:00:49,340 Again, this is all just the amount of nothing out the ordinary or special here. 10 00:00:49,640 --> 00:00:55,900 And I'm going to say this like the number, the road number, that's what that will represent. 11 00:00:56,210 --> 00:00:58,330 Then we'll page 90. 12 00:01:00,950 --> 00:01:03,150 And this one will be for 13 00:01:05,960 --> 00:01:12,290 its own will be like this one will be grown. 14 00:01:14,960 --> 00:01:25,760 And then we'll have the table body itself and in here we'll have a couple of table rows here and we're 15 00:01:25,760 --> 00:01:27,380 going to have a header first. 16 00:01:28,900 --> 00:01:31,570 And, uh, the other. 17 00:01:38,310 --> 00:01:52,160 And this is going to be just one hour punch TD four table data now and say brucke to wearing. 18 00:01:59,420 --> 00:02:04,650 We'll have one more of these can not as many as you want. 19 00:02:04,670 --> 00:02:11,570 You could obviously have the data from the database, for example, some pleura online Ajax call, and 20 00:02:11,570 --> 00:02:22,010 then you could populate a table and fix the whole thing and say, well, I didn't 21 00:02:25,160 --> 00:02:25,710 necessarily. 22 00:02:26,240 --> 00:02:28,310 This is what a normal table looks like. 23 00:02:28,310 --> 00:02:30,350 Nothing special doesn't look so good. 24 00:02:30,680 --> 00:02:36,560 Now let's just implement some basic bootstrap classes and you'll see that it gets elevated to a whole 25 00:02:36,560 --> 00:02:38,310 nother level easily. 26 00:02:38,720 --> 00:02:49,280 First of all, the class table, then what we're going to do is add a scope and we're going to call 27 00:02:49,280 --> 00:02:49,670 for this. 28 00:02:49,670 --> 00:02:55,300 And the same in its scope is the whole column in the Strupp. 29 00:02:56,470 --> 00:03:01,410 And for this, we're going to say the scope of this is the row 30 00:03:04,450 --> 00:03:11,620 and the piece that we just these few simple changes, we produce this amazing knocking table that is 31 00:03:11,630 --> 00:03:13,910 responsive, really cool stuff. 32 00:03:14,230 --> 00:03:15,770 Let me show you what happened. 33 00:03:15,790 --> 00:03:22,800 This section created another one and implemented by Frey, who put Yoda. 34 00:03:23,160 --> 00:03:25,150 Yoda does not have a second name. 35 00:03:25,160 --> 00:03:26,320 So we're going to get rid of that. 36 00:03:26,590 --> 00:03:31,590 And these Torito must reload. 37 00:03:32,050 --> 00:03:37,840 We get of an issue, Grandma, that needs to be in the role section and definitely have a last name 38 00:03:37,840 --> 00:03:39,490 or surname however you want to call it. 39 00:03:39,850 --> 00:03:40,970 But he doesn't have one. 40 00:03:41,170 --> 00:03:44,110 So how do we get around that issue? 41 00:03:44,440 --> 00:03:45,220 It's really simple. 42 00:03:45,220 --> 00:03:57,160 Bootstrap provides this feature called Spane Equals, and it's put to this particular column will spend 43 00:03:57,160 --> 00:03:57,930 two columns. 44 00:03:57,940 --> 00:04:02,850 Now that way, this is basically the content for both of these. 45 00:04:02,860 --> 00:04:06,160 And this now goes into the void section. 46 00:04:06,430 --> 00:04:07,810 That's really cool stuff. 47 00:04:08,050 --> 00:04:11,080 Now let me show you something else, which is pretty cool. 48 00:04:11,410 --> 00:04:17,920 If you see tables online, you've probably seen that the roles themselves, not the header row, but 49 00:04:17,920 --> 00:04:24,990 each of the row has alternating colors like some great white, black, white, dark and light background. 50 00:04:25,000 --> 00:04:33,460 So it just aesthetically looks a lot more pleasing for Taboada dash striped reload. 51 00:04:33,490 --> 00:04:33,970 There we go. 52 00:04:34,090 --> 00:04:36,950 No matter how many more you add, it will alternate light. 53 00:04:37,120 --> 00:04:39,990 So, like I said, I'll provide a link to this. 54 00:04:40,000 --> 00:04:44,890 You can see the different variants of color so you could add one of these to your headers. 55 00:04:44,890 --> 00:04:47,490 As you can see the information right here. 56 00:04:47,860 --> 00:04:52,330 And this is the table structure that I just did, the different variants to it. 57 00:04:52,330 --> 00:04:53,860 You can do a table dark. 58 00:04:54,220 --> 00:04:59,040 You could do a table that says you could do table Hober as well. 59 00:04:59,050 --> 00:05:06,100 So if you want to hover over a highlight, Soroses makes it easier to have a look and you can make certain 60 00:05:06,100 --> 00:05:09,640 tables table of activity the last of you could do. 61 00:05:10,000 --> 00:05:11,700 So that's it for this video. 62 00:05:12,010 --> 00:05:15,520 If you have any questions as usual, feel free to drop me a message. 63 00:05:15,760 --> 00:05:21,880 You know, feel free to comment on the video or the best place is to join the discussion group, which 64 00:05:21,880 --> 00:05:30,610 has about fourteen hundred members now, and the duty of 50 to 100 members always online, ready to 65 00:05:30,610 --> 00:05:30,940 help. 66 00:05:30,970 --> 00:05:35,200 So that's the best way there'll be a link to that speech about how we can feel free to contact. 67 00:05:35,320 --> 00:05:38,890 And as usual, I look forward to seeing you in the next video.