Wrócimy w tej lekcji i wykazać startowej systemu sieci i systemu siatka jest prawdopodobnie numer jeden powód, dla którego ludzie używają bootstrap form nap godzin.
Przyciski są ładne stylistyczne zmiany możemy dokonać z bootstrap ale ładujący system sieci będzie działać jako szkielet całej naszej aplikacji.
Jest to bardzo łatwy sposób na dodanie struktury i położyć się do naszego wniosku.
Więc pozwól mi pokazać kilka przykładów tego, co można zrobić z sieci energetycznej.
Mam kilka stron otwarte od Bootstrap ex-Beau pierwszy o to strona produktu za dzban wody i przewiń w dół.
Zauważ, że leżała tutaj.
Mamy trzech elementów obok siebie, a potem również zauważyć, jak tu zmienić rozmiar ich skalowanie w dół, a potem, kiedy uderzę wielkości tabletki są układane na wierzchu od siebie nawzajem.
Więc to jest bootstrap system sieci w pracy, jak to jest tu, gdzie mamy kolejny podobny efekt.
skalować je, a potem układane na tablecie i wielkości mobilnego.
Oto kolejny przykład.
Jest muzykiem islandzki i Olafur Arnolds a to przewinąć w dół na tej stronie.
Mamy pewne treści, które wbudowane w system siatki tutaj widać podobny układ, ale nie tylko, że jest zbudowany z sieci energetycznej, jak również.
To tu treść.
Terminy tutaj te turystycznej.
Zasadniczo za pomocą systemu sieci możemy powiedzieć, że chcemy pewne treści do objęcia 100 procent ekranie możemy również użyć go do powiedzieć, że chcemy każdemu z nich do podjęcia 25 procent szerokości ekranu, aż trafiliśmy mobilny boku lub rozmiar tablet dla każdego trwać 50 teraz i wtedy, gdy trafiliśmy mobile, każdy z nich zajmują 100 procent.
To samo zrobić tutaj.
To pozwala nam podzielić, że z ekranu na kawałki i wybrać ile sztuk chcemy.
Każdy z naszych własnych elementów przenośniku i oto ostatni już widzieliśmy.
To się nazywa kreatywna Tim pustyni przewijania tu podobna treść.
Oto system sieci i również tutaj.
Więc to wszystko jest zrobione z sieci energetycznej.
Wszystko to tak naprawdę ważne bardzo ekscytujące rzeczy.
Pomaga nam położyć rzeczy tak łatwo w porównaniu do tego, co musielibyśmy zrobić bez startowej.
Więc będziemy używać systemu bootstraps siatki i prawie każdą aplikację wykonujemy za pomocą startowej.
I pozwól mi pokazać jeden z nich.
To jest nasz yo aplikacji obozu i zauważ, że mamy siatkę campingów w poprzek.
I jak zmienić rozmiar ekranu zawiadomienie, że skalowanie ich, a następnie idziemy do dwóch poprzek, a następnie w dół do komórki.
Idziemy do jednej całej i to jest naprawdę ładny i łatwy w obsłudze układ mobilny.
Więc to jest tylko jedno miejsce, gdzie będziemy korzystać z sieci energetycznej.
Teraz zacząć na piśmie niektóre kodu za pomocą systemu sieci tak pełny ekran to okno i wrócić, aby uzyskać bootstrapped DOTCOM w zakładce ocenione.
Możesz kliknąć na sieci energetycznej.
Jest sporo do sieci energetycznej, ale mam zamiar zacząć po prostu wskazując jeden numer tutaj 12.
To jest bardzo ważne, w jaki sposób działa system siatki.
Więc każdy pojemnik i bootstrap można podzielić na 12 różnych kolumn, a następnie za pomocą systemu sieci możemy wybrać, ile z tych 12 jednostek każdy element powinien wziąć górę.
Więc w tym przypadku wygląda na to, że mają coś objęciem około 10 z 12 jednostek.
A następnie tu dwa z 12 jednostek lub może wynosić dziewięć i 3, ale mają pewne proporcje, gdzie mają więcej z tych 12 po lewej stronie, a następnie niewielki ułamek z 12 na prawej stronie.
Więc jeśli wrócimy do obozu tutaj to jest nasz pojemnik tutaj.
I każdy z nich z 12 jednostek każdy trwa trzy jednostki.
Tak więc kończy się z czterech równych kolumnach a potem kurczą go tutaj.
Teraz każdy z nich trwać sześć jednostek z 12.
Więc jeszcze raz, że liczba 12 bardzo ważne.
Teraz idziemy w prawo.
Nasz pierwszy siatki.
Więc mam pliku wykonana siatka robi h Tm l jest pusty wyjątkiem siłach pliku przez SS i zacząć musimy zdefiniować pojemnik.
W każdej chwili używamy siatki Boucek to musi być wewnątrz pojemnika.
Więc klasy wynosi pojemnik.
A pierwszą rzeczą, którą musisz zrobić, to znaleźć inny div z klasą równym rzędzie zamiast każdego wiersza.
Mamy 12 jednostek do wyboru.
Więc co mamy zamiar rozpocząć wykonując właśnie robi 50 50 rozłamu będziemy mieli 1 Div, które odbywają się 6 z 12 a potem jeszcze div, które odbywają się 6 z 12.
Więc zróbmy to teraz.
Dodamy div, a potem będę również dodać mój drugi podział, a teraz to tylko dwa urządzenia są puste.
Nie idziesz do pracy.
Ale co zrobię, to dodać klasę do pierwszego i będzie to wyglądać trochę dziwne kolumny Duża sześć i zrobimy to samo tutaj.
Klasa równa kolumnę dużą sześć.
Następnie dodamy jakąś treść tutaj.
Oni po prostu powiedzieć, kolumna duża sześć.
To samo tutaj.
I jak ja, że ​​załóżmy zapisać i nie będzie faktycznie zobaczyć bardzo nie widzimy samej siatki.
Więc, aby wyraźniej, że będę zdefiniować klasę tutaj zamiast znacznika stylu.
Co zrobię to zdefiniować klasę.
Ja po prostu nazwać to różowy i będę stosować tę klasę lub dwie div, dzięki czemu możemy je zobaczyć.
Więc teraz są po prostu białe.
Bez granic.
Tylko trochę tekstu.
Ale jeśli dodamy do tego w.
Tak różowo.
A potem chcemy tła być różowe i zrobimy fioletowy granicy jeden piksel stałe fioletowy i wtedy będziemy stosować różową klasy do tych dwóch DIV.
Każdy z nich zajmuje sześć jednostek.
Teraz wracamy i odświeżyć.
No to jedziemy.
Widać mamy dwie div, które zajmują dokładnie połowa pojemnika.
Pojemnik zaczyna się tutaj i tutaj.
I mamy podzielony na dwie części.
Więc teraz możemy wrócić i poeksperymentować trochę więcej i spróbujmy dodając w trzeciej kolumnie.
I tym razem uczyni środkowej kolumnie ośmiu jednostek, a następnie w lewo i prawo będą dwa.
Tak kończy się, a ja tu zmienić te numery.
No to jedziemy.
Będziemy skończyć z ładnym skupione kolumny w środku, a następnie dwa mniejsze kolumny po lewej i prawej stronie, które moglibyśmy wykorzystać na pasku bocznym lub czegoś.
Więc to jest bardzo podstawową koncepcję wszystkie bootstrap systemu sieciowego.
Mamy 12 jednostek dzieje w jakimkolwiek pojemniku pracujemy wewnątrz i możemy wyznaczyć te 12 jednostek w jakikolwiek sposób, który chcemy.
Tak więc mogliśmy zrobić 12 poszczególnych kolumn każdej jednej kolumny duży jeden i możemy to zrobić 12 razy tak jak ten.
Upewnij się, że nie tracę rachubę.
No to jedziemy.
A potem będziemy pozbyć się tych dwóch na razie.
A jeśli były świeże zobaczysz w jednym rzędzie mamy 12 równomiernie wielkości kolumny.
Każdy z nich zajmuje jedną jednostkę, a następnie będę również pokazać, możemy dodać inne wiersze.
Więc zróbmy to teraz div class równa wiersz i będzie po prostu zejść poniżej tego pierwszego rzędu, które mamy.
Więc wewnątrz tej jednej zróbmy div.
Klasa równa kolumny Dasch duże i zróbmy cztery.
Będziemy więc podzielić ją do trzech jednostek równomiernie wielkości.
Więc kolumna Arge na nią przejść tak po prostu.
I chodźmy spojrzeć teraz i widać, że nie stosowała różową klasy, ale mamy trzy równomiernie wielkości kolumn, które spadają poniżej 12 równomiernie wielkości kolumn powstały.
Więc możemy dodać w różowym klasy po prostu łatwiej zobaczyć, co się dzieje.
I tam idziemy.
Więc jest to tylko prosty przykład.
Nie byłoby rzeczywiście mają te różowe pudełka najprawdopodobniej na naszej stronie.
Ale jak widać mamy tutaj siatkę gdzie mamy wiersze, a każdy wiersz ma cztery kolumny wykraczających poprzek.
Każdy z nich ma trzy jednostki szerokości lub tutaj na tej stronie twórczej Tim.
Mamy trzy kolumny dzieje w każdej z nich jest cztery jednostki szerokości.
To samo tutaj.
Trzy kolumny dzieje w tutaj.
Mamy cztery kolumny.
Każdy z nich składa się z trzech jednostek szerokości.
Więc to jest bardzo, bardzo podstaw sieci w następnym filmie.
Porozmawiamy o tym, jak sprawić, że siatki elastyczne i mają różne układy w różnych rozmiarach.
W tej chwili pracujemy z kolumną duży.
Wytłumaczyłem z dużych środków i istnieją trzy inne rozmiary i zobaczymy tych, w następnym filmie, a także zobaczymy, jak możemy napisać zagnieżdżonych siatek, gdzie możemy dodać kolejny wiersz wewnątrz każdej z tych kolumn i rozłamu, że na kolejne 12 sztuk.