1 00:00:00,410 --> 00:00:11,310 We komen terug in deze les komen en tonen de bootstrap grid-systeem en het net is waarschijnlijk de nummer een van de redenen die mensen gebruiken bootstrap de formulieren dutje uur. 2 00:00:11,310 --> 00:00:19,290 De knoppen zijn mooi stilistische veranderingen die we kunnen maken met bootstrap maar de bootstrap grid-systeem zal optreden als het skelet van onze gehele applicatie. 3 00:00:19,440 --> 00:00:23,980 Het is echt een gemakkelijke manier voor ons om de structuur uit te voegen en leg onze applicatie. 4 00:00:24,000 --> 00:00:27,480 Dus laat ik je een paar voorbeelden van wat u kunt doen met de grid-systeem. 5 00:00:27,480 --> 00:00:36,140 Ik heb een paar plaatsen geopend van Bootstrap ex-beau de eerste hier is een product pagina voor een water-werper en scroll naar beneden. 6 00:00:36,240 --> 00:00:37,530 Let op de lay-out hier. 7 00:00:37,560 --> 00:00:50,310 We hebben drie punten naast elkaar en dan ook merken als ze grootte te veranderen hier zijn ze schaal naar beneden en toen ik tablet formaat raakte ze stapelen op de top van elkaar. 8 00:00:51,090 --> 00:00:57,270 Dus dat is de bootstrap grid-systeem op het werk, is dit recht hier, waar we een ander soortgelijk effect hebben. 9 00:00:57,270 --> 00:01:02,100 Ze klimmen en dan stapelen ze op tablet en mobiel formaat. 10 00:01:02,880 --> 00:01:04,110 Hier is een ander voorbeeld. 11 00:01:04,140 --> 00:01:10,440 Dit is IJslandse muzikant en Olafur Arnolds en dit is scroll naar beneden op deze site. 12 00:01:10,560 --> 00:01:23,150 We hebben een aantal content die is gebouwd met de grid-systeem hier dat u vergelijkbare lay-out kunt zien, maar het is niet alleen dat dit is gebouwd met een grid-systeem ook. 13 00:01:23,160 --> 00:01:25,210 Dit hier deze content. 14 00:01:26,100 --> 00:01:28,350 Deze tour data hier. 15 00:01:28,350 --> 00:01:49,220 In principe is het gebruik van het net kunnen we zeggen dat we willen bepaalde inhoud tot het nemen van 100 procent van het scherm, dan kunnen we ook gebruiken om te zeggen dat we willen dat elk van deze tot het nemen van 25 procent van de breedte van het scherm totdat wij slaan de mobiele kant of de tablet grootte voor elke nemen 50 nu en dan wanneer we Mobile raken ze elkaar nemen 100 procent. 16 00:01:49,860 --> 00:01:50,850 Hier hetzelfde gedaan. 17 00:01:50,850 --> 00:01:56,660 Het laat ons verdelen dat met het scherm in stukken en pick hoeveel stuks we willen. 18 00:01:56,790 --> 00:02:00,660 Elk van onze eigen elementen om oppakkern en hier is de laatste die we al hebben gezien. 19 00:02:00,660 --> 00:02:05,670 Het heet creatieve Tim woestijn scroll hier beneden vergelijkbare inhoud. 20 00:02:05,680 --> 00:02:09,530 Hier is het net en hier ook. 21 00:02:09,570 --> 00:02:11,430 Dus dit is allemaal gedaan met de grid-systeem. 22 00:02:11,430 --> 00:02:15,590 Dit alles dus echt belangrijk om zeer spannende dingen. 23 00:02:15,760 --> 00:02:20,640 Het helpt ons de dingen lay-out zo gemakkelijk in vergelijking met wat we zouden moeten doen zonder bootstrap. 24 00:02:20,670 --> 00:02:25,660 Dus we gebruiken bootstraps grid-systeem en vrijwel elke applicatie die we maken het gebruik van bootstrap. 25 00:02:25,890 --> 00:02:27,500 En laat ik je een van hen. 26 00:02:27,540 --> 00:02:33,940 Dit is onze yo kamp toepassing en merken dat we een raster van campings voor over. 27 00:02:33,960 --> 00:02:40,050 En toen ik de grootte van het bericht scherm dat ze schaal en dan gaan we naar twee over en dan naar beneden naar Mobile. 28 00:02:40,050 --> 00:02:44,480 We gaan naar één tegenover en het is echt een mooi en makkelijk te mobiele lay-out te gebruiken. 29 00:02:44,760 --> 00:02:47,840 Dus dat is gewoon een plek waar we een grid-systeem gaat gebruiken. 30 00:02:47,850 --> 00:02:57,800 Laten we nu aan de slag in het schrijven van een code met behulp van het net zo vol screen dit venster en ga terug naar bootstrap dotcom te krijgen onder het tabblad beoordeeld. 31 00:02:58,050 --> 00:03:00,850 U kunt klikken op de grid-systeem. 32 00:03:00,850 --> 00:03:07,300 Er is nogal een beetje tot het net, maar ik ga om te beginnen door alleen te wijzen op een enkel nummer hier 12. 33 00:03:07,470 --> 00:03:09,890 Dit is echt belangrijk hoe de grid-systeem werkt. 34 00:03:09,900 --> 00:03:21,150 Dus elke container en bootstrap kunnen worden onderverdeeld in 12 verschillende kolommen en vervolgens met behulp van het net kunnen we kiezen hoeveel van die 12 eenheden van elk element moet nemen. 35 00:03:21,150 --> 00:03:27,050 Dus in dit geval het lijkt alsof ze hebben iets te nemen ongeveer 10 van de 12 eenheden. 36 00:03:27,060 --> 00:03:40,320 En dan hier twee van de 12 eenheden of misschien wel negen en 3, maar ze hebben een aantal verhouding waar ze meer uit van die 12 aan de linkerkant en dan een klein deel uit van de 12 aan de rechterkant. 37 00:03:40,770 --> 00:03:46,510 Dus als we terug gaan naar het kamp hier dit is onze container hier. 38 00:03:46,890 --> 00:03:51,670 En elk van deze uit 12 eenheden neemt elke drie eenheden. 39 00:03:51,810 --> 00:03:56,850 Dus eindigen we met vier gelijke kolommen en vervolgens krimpen we het naar beneden hier. 40 00:03:56,880 --> 00:04:00,040 Nu zijn ze ieder voor zich zes eenheden van de 12. 41 00:04:00,240 --> 00:04:02,840 Dus nogmaals dat de nummer 12 van groot belang. 42 00:04:02,850 --> 00:04:03,660 Laten we nu gaan in de juiste. 43 00:04:03,660 --> 00:04:05,130 Onze allereerste net. 44 00:04:05,250 --> 00:04:14,640 Dus ik heb een bestand gemaakt raster doet h t m L Het is leeg, op de bootstraps de SS-bestand en om te beginnen moeten we een container definiëren. 45 00:04:14,860 --> 00:04:18,180 Anytime gebruiken we een Boucek rooster het moet zijn binnen van een container. 46 00:04:18,210 --> 00:04:22,230 Dus class is gelijk aan container. 47 00:04:22,290 --> 00:04:29,190 En het eerste wat we moeten doen is om een ​​andere div met klasse gelijk vinden aan rij in plaats van elke rij. 48 00:04:29,220 --> 00:04:31,100 We hebben 12 eenheden om uit te kiezen. 49 00:04:31,350 --> 00:04:40,730 Dus wat we gaan om te beginnen door te doen is gewoon te doen een 50 50 split we 1 div dat neemt 6 van de 12 en dan nog een div dat neemt 6 van de 12 hebben. 50 00:04:41,070 --> 00:04:42,050 Dus laten we dat nu doen. 51 00:04:42,120 --> 00:04:48,330 We zullen een div toe te voegen en dan zal ik ook mijn tweede divisie toe te voegen en op dit moment is het gewoon twee apparaten zijn leeg. 52 00:04:48,330 --> 00:04:49,430 Je gaat niet om te werken. 53 00:04:49,650 --> 00:05:00,300 Maar wat ik ga doen is het toevoegen van een klasse om de eerste en dit zal een beetje raar column Een grote zes kijken en we zullen hetzelfde doen hier. 54 00:05:00,300 --> 00:05:03,520 Klasse is gelijk aan kolom grote zes. 55 00:05:03,630 --> 00:05:05,200 Dan zullen we een aantal content toe te voegen hier. 56 00:05:05,210 --> 00:05:10,880 Ze zullen gewoon zeggen kolom grote zes. 57 00:05:10,950 --> 00:05:12,140 Hetzelfde hier. 58 00:05:12,210 --> 00:05:18,950 En als ik dat laten we redden en we zullen niet echt zien veel we niet de grid zelf te zien. 59 00:05:19,020 --> 00:05:24,300 Zo te maken dat duidelijker zal ik een klas hier te definiëren in plaats van een stijl tag. 60 00:05:24,300 --> 00:05:26,670 Wat ik ga doen is definiëren een klasse. 61 00:05:26,730 --> 00:05:31,350 Ik noem het roze en ik zal deze klasse van toepassing zijn op of twee divs, zodat we ze kunnen zien. 62 00:05:31,490 --> 00:05:32,820 Dus nu zijn ze gewoon wit. 63 00:05:32,820 --> 00:05:33,660 Geen grens. 64 00:05:33,750 --> 00:05:34,840 Gewoon een klein stukje tekst. 65 00:05:35,010 --> 00:05:36,050 Maar als we voegen deze in. 66 00:05:36,180 --> 00:05:37,010 Zo roze. 67 00:05:37,140 --> 00:05:49,950 En dan willen we achtergrond roze en we zullen een paarse grens één pixel solide paars doen en dan zullen we de roze klasse van toepassing op deze twee divs. 68 00:05:49,950 --> 00:05:52,660 Ieder neemt zes eenheden. 69 00:05:52,680 --> 00:05:54,570 Nu terug te gaan en we vernieuwen. 70 00:05:54,900 --> 00:05:55,580 Daar gaan we. 71 00:05:55,800 --> 00:05:59,640 U kunt zien hebben we twee divs die nemen precies de helft van de container. 72 00:05:59,670 --> 00:06:01,930 De container begint hier en hier. 73 00:06:02,460 --> 00:06:04,530 En we hebben in tweeën gedeeld. 74 00:06:04,620 --> 00:06:10,110 Dus nu kunnen we terug gaan en te spelen rond een beetje meer en laten we proberen toe te voegen in een derde kolom. 75 00:06:10,410 --> 00:06:16,150 En deze keer de middenkolom acht eenheden en vervolgens de linker en rechter zullen twee. 76 00:06:16,170 --> 00:06:21,270 Dus eindigen en ik zal deze nummers hier wijzigen. 77 00:06:21,280 --> 00:06:22,200 Daar gaan we. 78 00:06:22,200 --> 00:06:30,900 We eindigen met een mooi gecentreerd column in het midden en vervolgens twee kleinere kolommen aan de linker- en rechterkant die we konden gebruiken voor een bar of iets dergelijks. 79 00:06:30,900 --> 00:06:34,860 Dus dat is een heel basisconcept ten grondslag liggen aan alle van de bootstrap grid-systeem. 80 00:06:34,920 --> 00:06:42,210 We hebben 12 eenheden gaan over welke container we binnenkant van werken en kunnen we die 12 eenheden aan te wijzen op een manier die we willen. 81 00:06:42,240 --> 00:06:52,170 Dus we konden doen 12 afzonderlijke kolommen elk één kolom grote en we konden doen dat 12 keer, net als dit. 82 00:06:52,290 --> 00:06:53,600 Zorg ervoor dat ik niet tel kwijt. 83 00:06:54,090 --> 00:06:54,670 Daar gaan we. 84 00:06:54,690 --> 00:06:56,620 En dan zullen we ontdoen van deze twee krijgen voor nu. 85 00:06:56,820 --> 00:07:01,630 En als ik verse waren zie je in één rij hebben we 12 evenredig verdeelde columns. 86 00:07:01,650 --> 00:07:07,570 Ieder neemt een eenheid en dan zal ik ook laten zien dat we andere rijen kunnen toevoegen. 87 00:07:07,740 --> 00:07:14,390 Dus laten we dat nu doen div class is gelijk aan rij en het zal net gaan onder dit eerste rij dat we hebben. 88 00:07:14,730 --> 00:07:18,870 Dus binnenkant van deze ene laten we div. 89 00:07:19,020 --> 00:07:23,350 Klasse is gelijk aan kolom Dasch groot en laten we het doen vier. 90 00:07:23,370 --> 00:07:27,280 Dus we splitsen tot drie evenredig verdeelde eenheden. 91 00:07:27,360 --> 00:07:36,260 Dus column arge voor haar te gaan, net als dat. 92 00:07:36,420 --> 00:07:49,260 En laten we eens een kijkje nemen nu en je kunt zien we hadden niet de roze klasse toe te passen, maar we hebben drie evenredig verdeelde kolommen die vallen onder de 12 evenredig verdeelde kolommen werden gemaakt. 93 00:07:49,470 --> 00:07:53,240 Dus we kunnen toevoegen in de roze klas alleen maar om het gemakkelijker maken om te zien wat er gebeurt. 94 00:07:53,940 --> 00:07:54,800 En daar gaan we. 95 00:07:55,140 --> 00:07:57,350 Dus dit is gewoon een simpel voorbeeld. 96 00:07:57,420 --> 00:08:01,470 Je zou niet eigenlijk deze roze dozen hoogstwaarschijnlijk op onze site. 97 00:08:01,710 --> 00:08:08,760 Maar zoals je hier kunt zien hebben we een rooster waar we rijen en elke rij heeft vier kolommen over te gaan. 98 00:08:08,760 --> 00:08:15,830 Ieder is drie eenheden breed of hier op dit creatieve Tim website. 99 00:08:15,900 --> 00:08:19,830 We hebben drie kolommen die over een ieder is vier eenheden breed. 100 00:08:20,070 --> 00:08:20,900 Hetzelfde hier. 101 00:08:20,900 --> 00:08:23,860 Drie columns gaan over hier. 102 00:08:23,910 --> 00:08:24,960 We hebben vier kolommen. 103 00:08:24,960 --> 00:08:26,840 Elke kamer heeft drie eenheden breed. 104 00:08:27,390 --> 00:08:30,650 Dus dat is het heel erg grondbeginselen van het rooster in de volgende video. 105 00:08:30,660 --> 00:08:35,850 We zullen praten over hoe de grid responsieve te maken en hebben verschillende lay-outs in verschillende maten. 106 00:08:35,850 --> 00:08:38,230 Op dit moment hebben we gewerkt met kolom grote. 107 00:08:38,250 --> 00:08:52,290 Ik heb uitgelegd met een grote middelen en er zijn drie andere maten en we zullen zien die in de volgende video en we zullen ook zien hoe we geneste grids kunnen schrijven, waar we een andere rij toe te voegen binnen van een van deze kolommen en split dat in nog eens 12 stuks.