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.
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.
Het is echt een gemakkelijke manier voor ons om de structuur uit te voegen en leg onze applicatie.
Dus laat ik je een paar voorbeelden van wat u kunt doen met de grid-systeem.
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.
Let op de lay-out hier.
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.
Dus dat is de bootstrap grid-systeem op het werk, is dit recht hier, waar we een ander soortgelijk effect hebben.
Ze klimmen en dan stapelen ze op tablet en mobiel formaat.
Hier is een ander voorbeeld.
Dit is IJslandse muzikant en Olafur Arnolds en dit is scroll naar beneden op deze site.
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.
Dit hier deze content.
Deze tour data hier.
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.
Hier hetzelfde gedaan.
Het laat ons verdelen dat met het scherm in stukken en pick hoeveel stuks we willen.
Elk van onze eigen elementen om oppakkern en hier is de laatste die we al hebben gezien.
Het heet creatieve Tim woestijn scroll hier beneden vergelijkbare inhoud.
Hier is het net en hier ook.
Dus dit is allemaal gedaan met de grid-systeem.
Dit alles dus echt belangrijk om zeer spannende dingen.
Het helpt ons de dingen lay-out zo gemakkelijk in vergelijking met wat we zouden moeten doen zonder bootstrap.
Dus we gebruiken bootstraps grid-systeem en vrijwel elke applicatie die we maken het gebruik van bootstrap.
En laat ik je een van hen.
Dit is onze yo kamp toepassing en merken dat we een raster van campings voor over.
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.
We gaan naar één tegenover en het is echt een mooi en makkelijk te mobiele lay-out te gebruiken.
Dus dat is gewoon een plek waar we een grid-systeem gaat gebruiken.
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.
U kunt klikken op de grid-systeem.
Er is nogal een beetje tot het net, maar ik ga om te beginnen door alleen te wijzen op een enkel nummer hier 12.
Dit is echt belangrijk hoe de grid-systeem werkt.
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.
Dus in dit geval het lijkt alsof ze hebben iets te nemen ongeveer 10 van de 12 eenheden.
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.
Dus als we terug gaan naar het kamp hier dit is onze container hier.
En elk van deze uit 12 eenheden neemt elke drie eenheden.
Dus eindigen we met vier gelijke kolommen en vervolgens krimpen we het naar beneden hier.
Nu zijn ze ieder voor zich zes eenheden van de 12.
Dus nogmaals dat de nummer 12 van groot belang.
Laten we nu gaan in de juiste.
Onze allereerste net.
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.
Anytime gebruiken we een Boucek rooster het moet zijn binnen van een container.
Dus class is gelijk aan container.
En het eerste wat we moeten doen is om een ​​andere div met klasse gelijk vinden aan rij in plaats van elke rij.
We hebben 12 eenheden om uit te kiezen.
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.
Dus laten we dat nu doen.
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.
Je gaat niet om te werken.
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.
Klasse is gelijk aan kolom grote zes.
Dan zullen we een aantal content toe te voegen hier.
Ze zullen gewoon zeggen kolom grote zes.
Hetzelfde hier.
En als ik dat laten we redden en we zullen niet echt zien veel we niet de grid zelf te zien.
Zo te maken dat duidelijker zal ik een klas hier te definiëren in plaats van een stijl tag.
Wat ik ga doen is definiëren een klasse.
Ik noem het roze en ik zal deze klasse van toepassing zijn op of twee divs, zodat we ze kunnen zien.
Dus nu zijn ze gewoon wit.
Geen grens.
Gewoon een klein stukje tekst.
Maar als we voegen deze in.
Zo roze.
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.
Ieder neemt zes eenheden.
Nu terug te gaan en we vernieuwen.
Daar gaan we.
U kunt zien hebben we twee divs die nemen precies de helft van de container.
De container begint hier en hier.
En we hebben in tweeën gedeeld.
Dus nu kunnen we terug gaan en te spelen rond een beetje meer en laten we proberen toe te voegen in een derde kolom.
En deze keer de middenkolom acht eenheden en vervolgens de linker en rechter zullen twee.
Dus eindigen en ik zal deze nummers hier wijzigen.
Daar gaan we.
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.
Dus dat is een heel basisconcept ten grondslag liggen aan alle van de bootstrap grid-systeem.
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.
Dus we konden doen 12 afzonderlijke kolommen elk één kolom grote en we konden doen dat 12 keer, net als dit.
Zorg ervoor dat ik niet tel kwijt.
Daar gaan we.
En dan zullen we ontdoen van deze twee krijgen voor nu.
En als ik verse waren zie je in één rij hebben we 12 evenredig verdeelde columns.
Ieder neemt een eenheid en dan zal ik ook laten zien dat we andere rijen kunnen toevoegen.
Dus laten we dat nu doen div class is gelijk aan rij en het zal net gaan onder dit eerste rij dat we hebben.
Dus binnenkant van deze ene laten we div.
Klasse is gelijk aan kolom Dasch groot en laten we het doen vier.
Dus we splitsen tot drie evenredig verdeelde eenheden.
Dus column arge voor haar te gaan, net als dat.
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.
Dus we kunnen toevoegen in de roze klas alleen maar om het gemakkelijker maken om te zien wat er gebeurt.
En daar gaan we.
Dus dit is gewoon een simpel voorbeeld.
Je zou niet eigenlijk deze roze dozen hoogstwaarschijnlijk op onze site.
Maar zoals je hier kunt zien hebben we een rooster waar we rijen en elke rij heeft vier kolommen over te gaan.
Ieder is drie eenheden breed of hier op dit creatieve Tim website.
We hebben drie kolommen die over een ieder is vier eenheden breed.
Hetzelfde hier.
Drie columns gaan over hier.
We hebben vier kolommen.
Elke kamer heeft drie eenheden breed.
Dus dat is het heel erg grondbeginselen van het rooster in de volgende video.
We zullen praten over hoe de grid responsieve te maken en hebben verschillende lay-outs in verschillende maten.
Op dit moment hebben we gewerkt met kolom grote.
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.