1 00:00:00,390 --> 00:00:07,550 Welkom terug in deze les zullen we blijven samenwerken met de bootstrap rooster in het bijzonder zijn er twee belangrijke functies die ik wil benadrukken. 2 00:00:07,590 --> 00:00:12,070 De eerste is dat ik wil de vier verschillende maten die ik kort vermelde adres. 3 00:00:12,150 --> 00:00:18,530 We hebben gewerkt met een column Elgie hebben niet gesproken over wat dat betekent en er zijn drie andere maten dit zal werken. 4 00:00:18,600 --> 00:00:25,820 Zij willen ook om te laten zien hoe we kunnen nest grids binnenkant van andere netten verder die 12 eenheden opdelen in kleinere stukken. 5 00:00:26,250 --> 00:00:34,100 Maar begin al door te praten over de vier maten Ik ga om te beginnen met het terug naar de browser te gaan en het nemen van een blik op de demo die we gebouwd in de laatste les. 6 00:00:34,290 --> 00:00:50,810 Dus hebben we twee rijen die 12 kolommen die drie gaan over en kijk wat er gebeurt als ik de grootte van het raam dingen schalen prima heeft en dan slaan we een breekpunt recht hier, waar alles verandert in elke kolom. 7 00:00:50,850 --> 00:00:59,400 neemt nu een volledige 12 eenheden gaan over en ze stapelen op de top van elkaar en als ze houden resizing u eventuele wijzigingen niet echt merken. 8 00:00:59,460 --> 00:01:03,140 Ze zijn allemaal blijven tot het nemen van 12 eenheden en stapelen op de top van elkaar. 9 00:01:03,330 --> 00:01:08,980 Maar er zijn eigenlijk vier verschillende maten die we kunnen opgeven, zodat we vier verschillende lay-outs kan hebben. 10 00:01:09,030 --> 00:01:13,850 Op dit moment is dit een mobiele lay-out die extra kleine toegang. 11 00:01:14,040 --> 00:01:20,730 Dan krijgen we te klein die is als een tablet lay-out en vervolgens medium dat is hier. 12 00:01:20,730 --> 00:01:26,590 Dit zou op een laptop of een kleiner browservenster en vervolgens grote die wij hier. 13 00:01:26,940 --> 00:01:31,870 Dus het ziet er niet uit alsof er veel van een verschil, behalve hier als we gaan tussen het zijn zelfs grote. 14 00:01:31,980 --> 00:01:38,330 Er zijn vier maten en we kunnen en verhoudingen geven voor elk van die grootte. 15 00:01:38,460 --> 00:01:46,900 Zo op het bootstrap dokken onder het rooster opties hier grid-systeem kun je zien dat er een tafel en het toont ons de vier verschillende maten. 16 00:01:47,130 --> 00:02:02,940 Dus er is extra kleine apparaten zoals telefoons dan kleine apparaten die tablet medium apparaten zijn desktops grote apparaten of grotere desktops die groter zijn dan twaalfhonderd pixels breed en ze hebben elk een voorvoegsel dat we zo column toegang is eigenlijk klein kan gebruiken. 17 00:02:03,000 --> 00:02:08,630 S.M. is klein M.D. is middelgrote en LG is groot en dat is wat we hebben gebruikt. 18 00:02:09,030 --> 00:02:14,170 Dus laten we zeggen dat ik wil dat mijn lay-out hetzelfde bij de grote breekpunt blijven. 19 00:02:14,340 --> 00:02:22,410 En toen we overschakelen naar medium hier Ik wil deze 12 kolommen die ieder voor zich een enkele eenheid. 20 00:02:22,800 --> 00:02:25,320 Ik wil dat ze elkaar in plaats daarvan het nemen van twee eenheden. 21 00:02:25,320 --> 00:02:27,670 Dus we zullen eindigen met zes gaan over. 22 00:02:27,690 --> 00:02:29,510 En vervolgens nog eens 6 hieronder. 23 00:02:29,820 --> 00:02:32,880 Dus laten we focussen op die en om dingen te vereenvoudigen. 24 00:02:33,100 --> 00:02:36,360 Ik kom eigenlijk te ontdoen van onze tweede rij voor nu. 25 00:02:36,600 --> 00:02:39,170 Dus alles wat we hebben, is dit recht hier. 26 00:02:39,210 --> 00:02:43,730 Dus toen we dit medium breakpoint sloeg daar Ik wil niet dat dit gebeurt. 27 00:02:43,740 --> 00:02:48,510 In plaats daarvan wil ik zes kolommen gaan over om dat te doen. 28 00:02:48,510 --> 00:02:50,740 Ik voeg gewoon in een andere klasse. 29 00:02:50,940 --> 00:02:58,120 Dus ik zal dat doen om een ​​ieder en het gaat naar kolom medium zijn. 30 00:02:58,200 --> 00:03:05,600 Dus wanneer dit net wordt ingesteld de middelgrote willen we dat ze elkaar tot het nemen van twee eenheden en we zullen redden. 31 00:03:05,640 --> 00:03:07,200 Laten we nu eens gaan en te vernieuwen. 32 00:03:07,380 --> 00:03:09,120 Maak het volledige grootte. 33 00:03:09,120 --> 00:03:12,380 Er verandert niets, omdat we op de grote omvang. 34 00:03:12,570 --> 00:03:16,190 Maar nu als ik overschakel hier tot medium. 35 00:03:16,200 --> 00:03:21,380 Merk op dat ze elkaar nu nemen twee eenheden en krijgen we zes gaan over. 36 00:03:21,630 --> 00:03:33,480 En als ik blijf krimpen het naar beneden we dan druk op de kleine breekpunt en dat is waar het schakelaars waarbij elke kolom gaat nu helemaal over volledige 12 eenheden en ze stapelen op de top van elkaar. 37 00:03:33,900 --> 00:03:41,040 Dus laten we teruggaan en lees laten we teruggaan naar onze verheven en te doen herleven onze oude rooster. 38 00:03:41,130 --> 00:03:47,160 Dus we zullen zich te ontdoen van deze ene, want het is niet zo gebruikelijk om daadwerkelijk 12 verschillende onderdelen over te gaan. 39 00:03:47,160 --> 00:03:53,300 Meestal werk je met drie of vier soms zes maar 12 afzonderlijke kolommen is vrij zeldzaam. 40 00:03:53,400 --> 00:04:01,250 Dus laten we teruggaan naar deze ene en wat we zullen doen is proberen en recreëren die net uit te spelen van de Olafur Arnold's tourschema hier. 41 00:04:01,590 --> 00:04:04,200 het begint dus op vier gaan over. 42 00:04:04,200 --> 00:04:05,400 Dan krimpen we naar beneden. 43 00:04:05,550 --> 00:04:13,100 Er is een medium break point en we zijn nog steeds op vier en dan komen we bij de kleine break point en we gaan naar twee over. 44 00:04:13,140 --> 00:04:15,580 En dan mobiele x of klein is één. 45 00:04:15,990 --> 00:04:20,530 Dus dat is wat we proberen en opnieuw niet de inhoud alleen de structuur. 46 00:04:20,790 --> 00:04:22,080 Dus we zullen hier terug te gaan. 47 00:04:22,650 --> 00:04:25,740 En we willen beginnen met vier gaan over. 48 00:04:25,740 --> 00:04:31,860 Dat betekent dat ieder neemt drie eenheden en dan kunnen we de tekst hier veranderen. 49 00:04:31,860 --> 00:04:35,510 En laten we gewoon zeggen of datum. 50 00:04:35,610 --> 00:04:46,320 Dus als we waren vers We moeten vier kolommen gaan over die wij doen en dat is precies wat dit begint als vier gaan over te hebben. 51 00:04:46,320 --> 00:04:48,720 En het enige verschil is eigenlijk de inhoud. 52 00:04:48,720 --> 00:05:00,190 Dus in plaats van elke kolom zouden we voeg gewoon een H drie een paragraaf op een knop en welke andere inhoud die we een beetje H.R. het lijkt erop dat nodig en we zouden nog steeds dezelfde afstand. 53 00:05:00,600 --> 00:05:01,200 Okee. 54 00:05:01,200 --> 00:05:03,790 Dus de volgende breekpunt is als we in medium. 55 00:05:03,960 --> 00:05:05,840 Het blijft op vier. 56 00:05:06,300 --> 00:05:15,440 Dus wat je zou kunnen denken dat we moeten doen is geef het medium breekpunt dus toen we dit sloeg ze moeten nog steeds elke nemen van drie eenheden. 57 00:05:15,600 --> 00:05:34,190 We kunnen terugkijken op sublieme gaan en voeg die opnieuw noemen ze gemiddeld drie en op te slaan en ze elkaar beginnen bij drie eenheden wij slaan medium en ze blijven op drie eenheden en dan gaan we kleine en nu zijn ze 12 eenheden weer. 58 00:05:34,310 --> 00:05:49,140 En wat we willen voor het volgen van dit is dat wanneer we de kleine omvang raakte ze nu ieder voor zich tot zes eenheden, zodat we hier kunnen gaan en voeg die in kolom kleine 6. 59 00:05:49,400 --> 00:05:57,070 Zodat de grote omvang elk van deze beslaat 25 procent drie eenheden van 12 de gemiddelde grootte. 60 00:05:57,120 --> 00:05:57,920 Hetzelfde. 61 00:05:58,010 --> 00:06:05,480 Ze nemen 25 procent en vervolgens bij de kleine omvang die voor tablets zij elk neem vervolgens een stijging van 50 procent. 62 00:06:05,480 --> 00:06:12,980 Dus laten we vernieuwen nemen elk drie minuten en dan drie eenheden toen wij slaan klein. 63 00:06:13,040 --> 00:06:17,880 En nu zijn ze elk voor zich zes eenheden en toen moesten we extra klein. 64 00:06:17,940 --> 00:06:21,620 Dan nemen ze automatisch de volledige 12 eenheden en dat is wat we willen. 65 00:06:21,810 --> 00:06:27,350 U kunt zien wanneer we klein slaan we willen dat ze tot het nemen van een eenheid gaan over. 66 00:06:27,380 --> 00:06:28,010 Okee. 67 00:06:28,010 --> 00:06:33,240 Dus we hebben die naar beneden is er een kleine verandering kunnen we als we terug gaan naar subliem. 68 00:06:33,770 --> 00:06:39,560 Je zult zien dat we twee keer zijn het opgeven van deze drie eenheden voor de grote en middelgrote. 69 00:06:39,560 --> 00:06:54,320 We kunnen eigenlijk te ontdoen van kolom grote drie en gewoon middelmatige daar en bootstrap zal weten dat, omdat we het instellen van de middellange tot drie en hebben we het niet expliciet het instellen van de grote zal het gewoon wat we stellen voor middelgrote en toe te passen Het grote. 70 00:06:54,440 --> 00:06:55,880 het werkt dus op dezelfde manier. 71 00:06:55,880 --> 00:06:56,650 Er is niets veranderd. 72 00:06:56,660 --> 00:07:02,420 Ik heb al verfrist ziet identieke onze medium breakpoint is er nog steeds en onze kleine werken. 73 00:07:02,420 --> 00:07:04,800 Zodat we niet lang na te vermelden dat. 74 00:07:05,300 --> 00:07:10,460 Dus laat mij komen N.Z. we verlost van dat en het werkt op precies dezelfde manier. 75 00:07:10,520 --> 00:07:14,990 En in feite als we een kijkje gaan we naar de website. 76 00:07:15,000 --> 00:07:19,770 Ik durf te wedden dat als we elk van deze inspecteren je daar gaan we zien. 77 00:07:19,780 --> 00:07:22,590 Column kleine zes kolom medium drie. 78 00:07:22,790 --> 00:07:26,990 Precies wat we nu dat we die vier verschillende maten hebben besproken hadden. 79 00:07:27,070 --> 00:07:30,710 Hopelijk kunt u zien hoe veelzijdig en nuttig het net kan zijn. 80 00:07:30,750 --> 00:07:31,520 Laten we terug gaan. 81 00:07:31,740 --> 00:07:33,960 En nu zal ik nesten roosters aan te pakken. 82 00:07:34,310 --> 00:07:42,710 Laten we veronderstellen dat in plaats van deze eerste column hier wil ik op te splitsen in de helft en iets aan de linkerkant van die iets aan de rechterkant hebben. 83 00:07:42,800 --> 00:07:47,340 Ik kan ook daadwerkelijk te gaan en toe te voegen in een andere rij binnen van daar. 84 00:07:47,370 --> 00:07:49,230 Dus class is gelijk aan rij. 85 00:07:49,740 --> 00:08:09,100 En dan de binnenkant van die rij ik in een div kan toevoegen met klasse gelijk aan kolom en al gewoon te groot voor nu column grote zes en een andere kolom grote 6 en ik zal gewoon schrijven wat tekst hier halverwege en de andere helft. 86 00:08:09,360 --> 00:08:18,170 Laten we het veranderen van de eerste helft en de andere helft en we zullen besparen en laten we geven ze een klassieke roze. 87 00:08:18,200 --> 00:08:24,000 Dus wat we nu hebben gedaan, is zullen we moeten drie gaan over stilstaande of vier over te gaan. 88 00:08:24,000 --> 00:08:38,530 Een twee drie vier en in de eerste hebben we opgesplitst in nog eens 12 eenheden door een andere rij toe te voegen in en we zijn met behulp van de eerste zes om iets te zeggen en we gebruik van de tweede helft om te zeggen iets anders op te slaan of refresh . 89 00:08:38,960 --> 00:08:41,770 Daar ga je en maken het nog meer voor de hand. 90 00:08:41,780 --> 00:08:43,280 Laat ik geef ze een andere klasse. 91 00:08:43,400 --> 00:08:45,170 Laten we het oranje. 92 00:08:45,370 --> 00:08:46,940 Bestaat nog niet. 93 00:08:46,940 --> 00:09:04,870 En gedefinieerd dit verschijnen oranje en het zal achtergrond oranje en we zullen voegen in orde één pixel stevige rode en dan eigenlijk doen Dasht OK. 94 00:09:05,540 --> 00:09:10,530 Vernieuwen kunt u nu zien we nog steeds deze vier dingen over te gaan. 95 00:09:10,520 --> 00:09:19,160 Ieder neemt drie eenheden, maar we deelden de eerste in zes eenheden en zes eenheden door het toevoegen van die rij in en je moet de rij toe te voegen. 96 00:09:19,160 --> 00:09:22,520 Je kunt niet zomaar beginnen dit te doen waar u een kolom in plaats van een kolom. 97 00:09:22,520 --> 00:09:23,980 Er moet een rij zijn. 98 00:09:24,260 --> 00:09:25,520 En laten we nog één. 99 00:09:25,910 --> 00:09:31,090 Laten we dit laatste is hier in zes kleine stukjes binnen. 100 00:09:31,500 --> 00:09:39,770 Dus moeten we een rij toe te voegen binnenkant van die div class is gelijk aan rij in plaats van daar. 101 00:09:39,770 --> 00:09:50,310 We moeten nog een div en we moeten zes van deze waar we column grote twee elk toegang tot twee van de 12 eenheden. 102 00:09:50,310 --> 00:09:59,370 En we willen de zes en dan gaan we op elk een en laten we u in deze oranje klasse gewoon zo dat we ze kunnen zien. 103 00:10:00,440 --> 00:10:01,150 OK. 104 00:10:01,640 --> 00:10:06,540 Dus hebben we vier grote zuilen die dwars over de eerste die we in tweeën. 105 00:10:06,650 --> 00:10:12,710 De laatste we splitsen in zes stukken en je kunt niet echt iets zien, zodat we geen tekst heeft gezet in. 106 00:10:12,920 --> 00:10:14,200 Dus laten we gaan doen. 107 00:10:14,270 --> 00:10:20,100 Of liever gezegd het is eigenlijk gewoon eens met of een hoogte aan de klas oranje. 108 00:10:20,100 --> 00:10:22,950 Laten we ze elke 50 pixels. 109 00:10:22,940 --> 00:10:29,960 En als ik refresh je ziet dat nu alles wat oranje die klasse oranje neemt 50 pixels in de hoogte heeft. 110 00:10:30,260 --> 00:10:40,880 Dus hebben we onze twee groten getale aanwezig kolommen en vervolgens onze zes groten getale aanwezig kolommen binnenkant van deze vier gelijkmatig verdeeld topniveau columns. 111 00:10:40,880 --> 00:10:43,700 Dus dat is allemaal van de belangrijkste stukken van het net. 112 00:10:43,860 --> 00:10:46,420 In een notendop hebben we 12 eenheden in elke rij. 113 00:10:46,560 --> 00:10:48,300 Je splitsen ze op zoals jij dat wilt. 114 00:10:48,360 --> 00:10:58,900 Er zijn vier maten groot middelgrote kleine extra klein en je kunt die 12 eenheden toewijzen op elk van deze vier breekpunten die vier verschillende maten. 115 00:10:59,000 --> 00:11:04,870 En dat is hoe je eindigt met deze mooie responsieve lay-outs en in het algemeen het patroon dat je ziet is dat op mobiele sites. 116 00:11:04,880 --> 00:11:12,830 Zo op het extra kleine omvang de meeste sites zullen hun inhoud gewoon stapelen op de top van elkaar, zoals we zouden hier als ik dit naar beneden krimpen. 117 00:11:12,840 --> 00:11:18,630 Dit is de gemeenschappelijke lay-out op mobiel waar je niet meerdere stukken content in dezelfde rij. 118 00:11:19,080 --> 00:11:19,540 OK. 119 00:11:19,700 --> 00:11:20,990 Laten we terug gaan naar subliem. 120 00:11:21,090 --> 00:11:23,290 Zorg ervoor dat ik sprak over de drie belangrijkste doelstellingen. 121 00:11:23,610 --> 00:11:28,160 Dus spraken we over het doel van de punt van het grid-systeem helpt ons de dingen lay-out. 122 00:11:28,160 --> 00:11:29,270 Het is geweldig. 123 00:11:29,660 --> 00:11:31,690 Begrijp de vier verschillende maten. 124 00:11:31,700 --> 00:11:36,740 Dat zijn grote middelgrote kleine extra klein en dan rechts geneste grids. 125 00:11:37,040 --> 00:11:45,790 En dat is wat we hier doen, waar we een rij toe te voegen in plaats van een kolom en dan kunnen we die rij te vullen met verdere sub kolommen in de volgende video.