Witamy z powrotem w tej lekcji będziemy kontynuować pracę z siatki bootstrap w szczególności istnieją dwie główne cechy, które chcę podkreślić.
Pierwszym jest to, że chcę zająć się cztery różne rozmiary, które pokrótce wymienione.
Pracujemy z kolumną Elgie nie rozmawialiśmy o tym, co to znaczy, i są trzy inne rozmiary to będzie pracować.
Chcą też, aby pokazać, w jaki sposób możemy zagnieżdżać wewnątrz sieci z innych sieci do dalszego podziału tych 12 jednostek na mniejsze kawałki.
Ale zaczynają choć mówiąc o czterech wielkościach mam zamiar rozpocząć przechodząc z powrotem do przeglądarki i przyjrzeniu się demo, którą wybudowaliśmy w ostatniej lekcji.
Mamy więc dwa rzędy taki, który ma 12 kolumn taki, który ma trzy dzieje po drugiej stronie i obserwować, co się dzieje, jak zmiana rozmiaru okna skalowania rzeczy dobrze, a potem trafiliśmy punkt załamania właśnie tutaj, gdzie wszystko zmienia się w każdej kolumnie.
Teraz trwa pełne 12 jednostek Idąc wzdłuż i stos na górze siebie i jak zachować zmiany rozmiaru nie zauważysz żadnych zmian do końca.
Wszystkie one nadal trwać 12 jednostek i stos jedna na drugiej.
Ale tak naprawdę są cztery różne rozmiary, że możemy określić, dzięki czemu możemy mieć cztery różne układy.
Teraz jest to mobilny układ, który jest dodatkowa mała dostępu.
Potem się zbyt mały, co jest jak tabletka rozłożyć, a następnie medium, które jest tutaj.
To byłoby na laptopie lub mniejszym oknie przeglądarki, a następnie duży, co mamy tutaj.
Więc to nie wygląda jak nie ma wielkiej różnicy, z wyjątkiem tu kiedy jedziemy między byciem a nawet dużych.
Ale istnieją cztery rozmiary i możemy określić stosunki i proporcje dla każdego z tych rozmiarach.
Więc w dokach bootstrap ramach opcji sieciowych tutaj systemowych sieci można zobaczyć tam stół i pokazuje nam cztery różne rozmiary.
Więc nie ma dodatkowych małych urządzeń takich jak telefony niż małych urządzeń, które są urządzeniami typu tablet średnie stacjonarnych dużych urządzeń stacjonarnych lub większych, które są większe niż tysiąc dwieście pikseli szerokości i każdy z nich ma prefiks, który możemy wykorzystać tak kolumna jest faktycznie niewielka dostępu.
S. M. jest mała M. D. jest średni i LG jest duża co jest, co używaliśmy.
Więc powiedzmy, że chcę, aby mój układ pozostanie taka sama w dużym przerwania.
A potem, kiedy przełączyć na nośniku tu chcę tych 12 kolumn, z których każda pobiera się pojedynczą jednostkę.
Chcę, żeby każda podjąć dwie jednostki w zamian.
Będziemy więc skończyć z sześciu idzie w poprzek.
A następnie przez kolejne 6 poniżej.
Więc skupmy się na tym i uprościć.
Będę naprawdę pozbyć się naszego drugiego rzędu teraz.
Więc wszystko, co mamy, jest to właśnie tutaj.
Kiedy więc hit tego medium przerwania tam nie chcę, aby tak się stało.
Zamiast tego chcę sześć kolumn idzie w poprzek, aby to zrobić.
Dodam tylko w innej klasie.
Tak zrobię, że do każdego z nich i to będzie kolumna średniej.
Więc kiedy ta siatka ustawiona jest średniego rozmiaru chcemy je podjąć każde dwie jednostki i będziemy oszczędzać.
Teraz chodźmy i odświeżyć.
Sprawiają, że w pełnym rozmiarze.
Nic się nie zmienia, bo jesteśmy w dużym rozmiarze.
Ale teraz, kiedy przełączyć na nośniku właśnie tutaj.
Zauważ, że każdy z nich ma dwie jednostki i teraz mamy sześć idzie w poprzek.
A jeśli trzymam kurczy ją my wtedy uderzył w małą pułapkę i tam przełącza gdzie każda kolumna teraz przechodzi przez całą drogę w poprzek pełnych 12 jednostek i układać jeden na drugim.
Więc wróćmy i czytać wróćmy do naszego wzniosłe i ożywić naszą starą siatkę.
Będziemy więc pozbyć się tego jednego, bo to nie jest tak powszechne, aby rzeczywiście mieć 12 różnych komponentów będzie w poprzek.
Zwykle pracujesz z trzech lub czterech, ale czasami sześć 12 pojedynczych kolumn jest dość rzadkie.
Więc wróćmy do tego i co zrobimy jest spróbować odtworzyć, że siatka grać z harmonogramem turystycznej w Olafura Arnolda tutaj.
Tak zaczyna się o czwartej idzie w poprzek.
Potem skurczy się.
Jest medium punkt krytyczny i jesteśmy jeszcze w czterech, a potem dostać się do małego punktu przerwy i jedziemy do dwóch poprzek.
A potem mobilna x lub małe jest jeden.
Więc to, co spróbujemy i nie tylko odtworzenie zawartości strukturę.
Więc wracamy tutaj.
A my chcemy zacząć od czterech idzie w poprzek.
Co oznacza, że ​​każdy z nich trwa trzy jednostki, a następnie możemy zmienić tekst tutaj.
I niech po prostu mieć to powiedzieć lub data.
Jeśli więc były świeże Powinniśmy mieć cztery kolumny dzieje w których robimy co jest dokładnie to, co zaczyna się jako cztery idzie w poprzek.
I jedyna różnica naprawdę jest rzeczywista zawartość.
Więc zamiast każdej kolumnie możemy po prostu dodać H trzy akapitu przycisk i cokolwiek inna zawartość musimy trochę H.R. wygląda na to, że i my wciąż w tej samej odległości.
W porządku.
Więc następnym punktem przerwa jest, gdy mamy do podłoża.
To pozostaje w czterech.
Więc co można by pomyśleć, że musimy zrobić, to określić średni punkt załamania więc kiedy trafiliśmy to powinno nadal każda trwać trzy jednostki.
Możemy wrócić do wzniosłości i dodać, że po raz zadzwonić do nich średnio trzy i zapisać i każdy z nich zaczynają się od trzech jednostek trafiliśmy średnie i pozostają one w trzech jednostkach, a następnie kierujemy się mała i teraz są 12 jednostek ponownie.
A to, co chcemy w następstwie tego jest to, że gdy uderzył w mały rozmiar to teraz każda trwać sześć jednostek więc możemy iść tu dodać, że w kolumnie małej 6.
Tak duży rozmiar każdy z nich zajmuje 25 procent trzy jednostki z 12 na średniej wielkości.
Ta sama rzecz.
Zajmują one 25 procent, a następnie w małym rozmiarze, który jest dla tabletek każdy z nich, a następnie zajmują 50 proc.
Warto więc odświeżyć każda trwać trzy minuty, a następnie trzy jednostki następnie trafiliśmy małe.
A teraz każdy z nich trwać sześć jednostek, a następnie mieliśmy ekstra małe.
Wtedy automatycznie trwać pełne 12 jednostek, które jest to, co chcemy.
Można zobaczyć, kiedy trafiliśmy małe chcemy je podjąć jedną jednostkę idzie w poprzek.
W porządku.
Mamy więc, że tam jest mała zmiana możemy zrobić, jeśli wrócimy do wysublimowane.
Zobaczysz, że jesteśmy podając dwa razy w tym trzy jednostki dla dużych i średnich przedsiębiorstw.
Możemy faktycznie pozbyć dużej kolumnie trzeciej i po prostu umieścić nośnik tam i bootstrap będzie wiedział, że ponieważ jesteśmy ustawiania medium trzy i nie jesteśmy wyraźnie ustawienie duża będzie po prostu wziąć to, co możemy ustawić dla średnich i stosowania go duża.
Tak to działa w ten sam sposób.
Nic się nie zmieniło.
Ja już odświeżony wygląda identycznie nasz średniej przerwania nadal istnieje, a nasze małe dzieła.
Więc nie trzeba określić, że dwa razy.
Więc pozwól mi przyjść N.Z. pozbyliśmy się, że i to działa dokładnie w ten sam sposób.
I rzeczywiście, jeśli przyjrzymy się przejść do witryny internetowej.
Założę się, że jeśli będziemy sprawdzać każdy z nich będzie tam iść zobaczyć.
Kolumna mała sześć kolumn średnio trzy.
Dokładnie to, co mieliśmy teraz, że omówiliśmy te cztery różne rozmiary.
Mam nadzieję, że można zobaczyć, jak wszechstronny i przydatny system siatka może być.
Wracajmy.
A teraz zwracam gniazdowania siatek.
Załóżmy, że zamiast tej pierwszej kolumnie tutaj chcę podzielić ją na pół i mieć coś na lewej stronie, że i coś po prawej stronie.
Mogę rzeczywiście iść i dodać w innym wierszu wewnątrz tam.
Więc klasa równa wiersz.
A następnie wewnątrz tego wiersza można dodać w div z klasą równej kolumny i wszystko po prostu zbyt duże w stosunku do obecnie kolumny dużej sześciu, a kolejna jedna kolumna duża 6, a ja po prostu napisać tekst tutaj połowy i drugiej połowie.
Zmieńmy go do pierwszej połowy i drugiej połowy i będziemy zapisywać i dajmy im klasyczny różowy.
Więc co zrobiliśmy teraz jest będziemy mieli trzy dzieje w dalszym ciągu lub czterech idzie w poprzek.
Raz, dwa, trzy, cztery, aw pierwszej mamy podzielić ją na kolejne 12 jednostek dodając kolejny wiersz i używamy pierwsze sześć coś powiedzieć, a my korzystając z drugiego sześć powiedzieć coś jeszcze zapisać lub odświeżania ,
Nie pójdziesz i uczynić go jeszcze bardziej oczywiste.
Podam im kolejną klasę.
Nazwijmy to pomarańczowy.
Jeszcze nie istnieje.
I zdefiniowane tego pojawiają się pomarańczowe i będzie musiał pomarańczowym tle a my dodamy, aby jeden piksel stałe czerwone, a potem faktycznie Dasht OK.
Odśwież widać teraz mamy jeszcze te cztery rzeczy idzie w poprzek.
Każdy z nich trwa trzy jednostki, ale dzielimy pierwszy jeden do sześciu jednostek i sześć jednostek, dodając, że rząd i trzeba dodać wiersz.
Nie można po prostu zacząć robić to, gdzie trzeba kolumnę zamiast kolumny.
Musi być jakiś wiersz.
I zróbmy jeszcze jeden.
Postawmy ten ostatni tu na sześć małych kawałków środka.
Tak więc musimy dodać wiersz wewnątrz że div class równa wiersz zamiast tam.
Potrzebujemy innego div i będziemy mieli sześć z tych, gdzie mamy dwa duże kolumny każda mających dwie z 12 jednostek.
I chcemy sześć, a potem pójdziemy na każdej z nich, a dodajmy do tej klasy pomarańczowego tak, że możemy je zobaczyć.
OK.
Mamy więc cztery wielkie kolumny dzieje w pierwszej podzieliliśmy na pół.
Ostatni z nich dzielimy na sześć części i naprawdę nie można zobaczyć coś, więc nie umieścić dowolny tekst w środku.
Więc chodźmy zrobić.
Albo raczej to faktycznie po prostu dać się lub wysokości do klasy pomarańczy.
Zróbmy im każde 50 pikseli.
A gdybym odświeżyć widać, że teraz wszystko, co ma na pomarańczowo, że klasa pomarańczowy zaczyna się 50 pikseli wysokości.
Mamy więc nasze dwa podzielone kolumny i wtedy nasz sześć podzielone kolumn wewnątrz tych czterech równo podzielona kolumnami najwyższego szczebla.
Więc to wszystko z najważniejszych elementów systemu siatki.
W skrócie mamy 12 sztuk w każdym rzędzie.
Podzielić je jednak chcesz.
Istnieją cztery rozmiary duże średnie małe ekstra małe i można przypisać te 12 jednostek na każdym z tych czterech punktów przerwy te cztery różnej wielkości.
I w ten sposób skończyć z tych miłych reagujących układów i ogólnie wzór, który można zobaczyć, że na stronach mobilnych.
Więc na dodatkowym małym rozmiarze większość stron będzie miała ich treść prostu układać na wierzchu siebie jakbyśmy byłoby mnie tutaj, gdybym skurczyć to w dół.
Jest to wspólny układ na telefon komórkowy, w którym nie mają wiele elementów treści w tym samym wierszu.
OK.
Wróćmy do wysublimowane.
Upewnij się, że mówiłem o trzech głównych celów.
Więc rozmawialiśmy o celu punktem systemu sieci pomaga nam położyć rzeczy.
To jest zajebiste.
Rozumieć cztery różne rozmiary.
Są to duże średnie małe ekstra małe, a następnie prawy zagnieżdżone sieci.
A to, co robimy tu, gdzie możemy dodać wiersz zamiast kolumny, a następnie możemy wypełnić ten wiersz z kolejnymi sub kolumn w następnym filmie.