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.
De eerste is dat ik wil de vier verschillende maten die ik kort vermelde adres.
We hebben gewerkt met een column Elgie hebben niet gesproken over wat dat betekent en er zijn drie andere maten dit zal werken.
Zij willen ook om te laten zien hoe we kunnen nest grids binnenkant van andere netten verder die 12 eenheden opdelen in kleinere stukken.
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.
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.
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.
Ze zijn allemaal blijven tot het nemen van 12 eenheden en stapelen op de top van elkaar.
Maar er zijn eigenlijk vier verschillende maten die we kunnen opgeven, zodat we vier verschillende lay-outs kan hebben.
Op dit moment is dit een mobiele lay-out die extra kleine toegang.
Dan krijgen we te klein die is als een tablet lay-out en vervolgens medium dat is hier.
Dit zou op een laptop of een kleiner browservenster en vervolgens grote die wij hier.
Dus het ziet er niet uit alsof er veel van een verschil, behalve hier als we gaan tussen het zijn zelfs grote.
Er zijn vier maten en we kunnen en verhoudingen geven voor elk van die grootte.
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.
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.
S.M. is klein M.D. is middelgrote en LG is groot en dat is wat we hebben gebruikt.
Dus laten we zeggen dat ik wil dat mijn lay-out hetzelfde bij de grote breekpunt blijven.
En toen we overschakelen naar medium hier Ik wil deze 12 kolommen die ieder voor zich een enkele eenheid.
Ik wil dat ze elkaar in plaats daarvan het nemen van twee eenheden.
Dus we zullen eindigen met zes gaan over.
En vervolgens nog eens 6 hieronder.
Dus laten we focussen op die en om dingen te vereenvoudigen.
Ik kom eigenlijk te ontdoen van onze tweede rij voor nu.
Dus alles wat we hebben, is dit recht hier.
Dus toen we dit medium breakpoint sloeg daar Ik wil niet dat dit gebeurt.
In plaats daarvan wil ik zes kolommen gaan over om dat te doen.
Ik voeg gewoon in een andere klasse.
Dus ik zal dat doen om een ​​ieder en het gaat naar kolom medium zijn.
Dus wanneer dit net wordt ingesteld de middelgrote willen we dat ze elkaar tot het nemen van twee eenheden en we zullen redden.
Laten we nu eens gaan en te vernieuwen.
Maak het volledige grootte.
Er verandert niets, omdat we op de grote omvang.
Maar nu als ik overschakel hier tot medium.
Merk op dat ze elkaar nu nemen twee eenheden en krijgen we zes gaan over.
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.
Dus laten we teruggaan en lees laten we teruggaan naar onze verheven en te doen herleven onze oude rooster.
Dus we zullen zich te ontdoen van deze ene, want het is niet zo gebruikelijk om daadwerkelijk 12 verschillende onderdelen over te gaan.
Meestal werk je met drie of vier soms zes maar 12 afzonderlijke kolommen is vrij zeldzaam.
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.
het begint dus op vier gaan over.
Dan krimpen we naar beneden.
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.
En dan mobiele x of klein is één.
Dus dat is wat we proberen en opnieuw niet de inhoud alleen de structuur.
Dus we zullen hier terug te gaan.
En we willen beginnen met vier gaan over.
Dat betekent dat ieder neemt drie eenheden en dan kunnen we de tekst hier veranderen.
En laten we gewoon zeggen of datum.
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.
En het enige verschil is eigenlijk de inhoud.
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.
Okee.
Dus de volgende breekpunt is als we in medium.
Het blijft op vier.
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.
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.
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.
Zodat de grote omvang elk van deze beslaat 25 procent drie eenheden van 12 de gemiddelde grootte.
Hetzelfde.
Ze nemen 25 procent en vervolgens bij de kleine omvang die voor tablets zij elk neem vervolgens een stijging van 50 procent.
Dus laten we vernieuwen nemen elk drie minuten en dan drie eenheden toen wij slaan klein.
En nu zijn ze elk voor zich zes eenheden en toen moesten we extra klein.
Dan nemen ze automatisch de volledige 12 eenheden en dat is wat we willen.
U kunt zien wanneer we klein slaan we willen dat ze tot het nemen van een eenheid gaan over.
Okee.
Dus we hebben die naar beneden is er een kleine verandering kunnen we als we terug gaan naar subliem.
Je zult zien dat we twee keer zijn het opgeven van deze drie eenheden voor de grote en middelgrote.
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.
het werkt dus op dezelfde manier.
Er is niets veranderd.
Ik heb al verfrist ziet identieke onze medium breakpoint is er nog steeds en onze kleine werken.
Zodat we niet lang na te vermelden dat.
Dus laat mij komen N.Z. we verlost van dat en het werkt op precies dezelfde manier.
En in feite als we een kijkje gaan we naar de website.
Ik durf te wedden dat als we elk van deze inspecteren je daar gaan we zien.
Column kleine zes kolom medium drie.
Precies wat we nu dat we die vier verschillende maten hebben besproken hadden.
Hopelijk kunt u zien hoe veelzijdig en nuttig het net kan zijn.
Laten we terug gaan.
En nu zal ik nesten roosters aan te pakken.
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.
Ik kan ook daadwerkelijk te gaan en toe te voegen in een andere rij binnen van daar.
Dus class is gelijk aan rij.
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.
Laten we het veranderen van de eerste helft en de andere helft en we zullen besparen en laten we geven ze een klassieke roze.
Dus wat we nu hebben gedaan, is zullen we moeten drie gaan over stilstaande of vier over te gaan.
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 .
Daar ga je en maken het nog meer voor de hand.
Laat ik geef ze een andere klasse.
Laten we het oranje.
Bestaat nog niet.
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.
Vernieuwen kunt u nu zien we nog steeds deze vier dingen over te gaan.
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.
Je kunt niet zomaar beginnen dit te doen waar u een kolom in plaats van een kolom.
Er moet een rij zijn.
En laten we nog één.
Laten we dit laatste is hier in zes kleine stukjes binnen.
Dus moeten we een rij toe te voegen binnenkant van die div class is gelijk aan rij in plaats van daar.
We moeten nog een div en we moeten zes van deze waar we column grote twee elk toegang tot twee van de 12 eenheden.
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.
OK.
Dus hebben we vier grote zuilen die dwars over de eerste die we in tweeën.
De laatste we splitsen in zes stukken en je kunt niet echt iets zien, zodat we geen tekst heeft gezet in.
Dus laten we gaan doen.
Of liever gezegd het is eigenlijk gewoon eens met of een hoogte aan de klas oranje.
Laten we ze elke 50 pixels.
En als ik refresh je ziet dat nu alles wat oranje die klasse oranje neemt 50 pixels in de hoogte heeft.
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.
Dus dat is allemaal van de belangrijkste stukken van het net.
In een notendop hebben we 12 eenheden in elke rij.
Je splitsen ze op zoals jij dat wilt.
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.
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.
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.
Dit is de gemeenschappelijke lay-out op mobiel waar je niet meerdere stukken content in dezelfde rij.
OK.
Laten we terug gaan naar subliem.
Zorg ervoor dat ik sprak over de drie belangrijkste doelstellingen.
Dus spraken we over het doel van de punt van het grid-systeem helpt ons de dingen lay-out.
Het is geweldig.
Begrijp de vier verschillende maten.
Dat zijn grote middelgrote kleine extra klein en dan rechts geneste grids.
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.