1 00:00:00,390 --> 00:00:07,550 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ć. 2 00:00:07,590 --> 00:00:12,070 Pierwszym jest to, że chcę zająć się cztery różne rozmiary, które pokrótce wymienione. 3 00:00:12,150 --> 00:00:18,530 Pracujemy z kolumną Elgie nie rozmawialiśmy o tym, co to znaczy, i są trzy inne rozmiary to będzie pracować. 4 00:00:18,600 --> 00:00:25,820 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. 5 00:00:26,250 --> 00:00:34,100 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. 6 00:00:34,290 --> 00:00:50,810 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. 7 00:00:50,850 --> 00:00:59,400 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. 8 00:00:59,460 --> 00:01:03,140 Wszystkie one nadal trwać 12 jednostek i stos jedna na drugiej. 9 00:01:03,330 --> 00:01:08,980 Ale tak naprawdę są cztery różne rozmiary, że możemy określić, dzięki czemu możemy mieć cztery różne układy. 10 00:01:09,030 --> 00:01:13,850 Teraz jest to mobilny układ, który jest dodatkowa mała dostępu. 11 00:01:14,040 --> 00:01:20,730 Potem się zbyt mały, co jest jak tabletka rozłożyć, a następnie medium, które jest tutaj. 12 00:01:20,730 --> 00:01:26,590 To byłoby na laptopie lub mniejszym oknie przeglądarki, a następnie duży, co mamy tutaj. 13 00:01:26,940 --> 00:01:31,870 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. 14 00:01:31,980 --> 00:01:38,330 Ale istnieją cztery rozmiary i możemy określić stosunki i proporcje dla każdego z tych rozmiarach. 15 00:01:38,460 --> 00:01:46,900 Więc w dokach bootstrap ramach opcji sieciowych tutaj systemowych sieci można zobaczyć tam stół i pokazuje nam cztery różne rozmiary. 16 00:01:47,130 --> 00:02:02,940 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. 17 00:02:03,000 --> 00:02:08,630 S. M. jest mała M. D. jest średni i LG jest duża co jest, co używaliśmy. 18 00:02:09,030 --> 00:02:14,170 Więc powiedzmy, że chcę, aby mój układ pozostanie taka sama w dużym przerwania. 19 00:02:14,340 --> 00:02:22,410 A potem, kiedy przełączyć na nośniku tu chcę tych 12 kolumn, z których każda pobiera się pojedynczą jednostkę. 20 00:02:22,800 --> 00:02:25,320 Chcę, żeby każda podjąć dwie jednostki w zamian. 21 00:02:25,320 --> 00:02:27,670 Będziemy więc skończyć z sześciu idzie w poprzek. 22 00:02:27,690 --> 00:02:29,510 A następnie przez kolejne 6 poniżej. 23 00:02:29,820 --> 00:02:32,880 Więc skupmy się na tym i uprościć. 24 00:02:33,100 --> 00:02:36,360 Będę naprawdę pozbyć się naszego drugiego rzędu teraz. 25 00:02:36,600 --> 00:02:39,170 Więc wszystko, co mamy, jest to właśnie tutaj. 26 00:02:39,210 --> 00:02:43,730 Kiedy więc hit tego medium przerwania tam nie chcę, aby tak się stało. 27 00:02:43,740 --> 00:02:48,510 Zamiast tego chcę sześć kolumn idzie w poprzek, aby to zrobić. 28 00:02:48,510 --> 00:02:50,740 Dodam tylko w innej klasie. 29 00:02:50,940 --> 00:02:58,120 Tak zrobię, że do każdego z nich i to będzie kolumna średniej. 30 00:02:58,200 --> 00:03:05,600 Więc kiedy ta siatka ustawiona jest średniego rozmiaru chcemy je podjąć każde dwie jednostki i będziemy oszczędzać. 31 00:03:05,640 --> 00:03:07,200 Teraz chodźmy i odświeżyć. 32 00:03:07,380 --> 00:03:09,120 Sprawiają, że w pełnym rozmiarze. 33 00:03:09,120 --> 00:03:12,380 Nic się nie zmienia, bo jesteśmy w dużym rozmiarze. 34 00:03:12,570 --> 00:03:16,190 Ale teraz, kiedy przełączyć na nośniku właśnie tutaj. 35 00:03:16,200 --> 00:03:21,380 Zauważ, że każdy z nich ma dwie jednostki i teraz mamy sześć idzie w poprzek. 36 00:03:21,630 --> 00:03:33,480 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. 37 00:03:33,900 --> 00:03:41,040 Więc wróćmy i czytać wróćmy do naszego wzniosłe i ożywić naszą starą siatkę. 38 00:03:41,130 --> 00:03:47,160 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. 39 00:03:47,160 --> 00:03:53,300 Zwykle pracujesz z trzech lub czterech, ale czasami sześć 12 pojedynczych kolumn jest dość rzadkie. 40 00:03:53,400 --> 00:04:01,250 Więc wróćmy do tego i co zrobimy jest spróbować odtworzyć, że siatka grać z harmonogramem turystycznej w Olafura Arnolda tutaj. 41 00:04:01,590 --> 00:04:04,200 Tak zaczyna się o czwartej idzie w poprzek. 42 00:04:04,200 --> 00:04:05,400 Potem skurczy się. 43 00:04:05,550 --> 00:04:13,100 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. 44 00:04:13,140 --> 00:04:15,580 A potem mobilna x lub małe jest jeden. 45 00:04:15,990 --> 00:04:20,530 Więc to, co spróbujemy i nie tylko odtworzenie zawartości strukturę. 46 00:04:20,790 --> 00:04:22,080 Więc wracamy tutaj. 47 00:04:22,650 --> 00:04:25,740 A my chcemy zacząć od czterech idzie w poprzek. 48 00:04:25,740 --> 00:04:31,860 Co oznacza, że ​​każdy z nich trwa trzy jednostki, a następnie możemy zmienić tekst tutaj. 49 00:04:31,860 --> 00:04:35,510 I niech po prostu mieć to powiedzieć lub data. 50 00:04:35,610 --> 00:04:46,320 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. 51 00:04:46,320 --> 00:04:48,720 I jedyna różnica naprawdę jest rzeczywista zawartość. 52 00:04:48,720 --> 00:05:00,190 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. 53 00:05:00,600 --> 00:05:01,200 W porządku. 54 00:05:01,200 --> 00:05:03,790 Więc następnym punktem przerwa jest, gdy mamy do podłoża. 55 00:05:03,960 --> 00:05:05,840 To pozostaje w czterech. 56 00:05:06,300 --> 00:05:15,440 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. 57 00:05:15,600 --> 00:05:34,190 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. 58 00:05:34,310 --> 00:05:49,140 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. 59 00:05:49,400 --> 00:05:57,070 Tak duży rozmiar każdy z nich zajmuje 25 procent trzy jednostki z 12 na średniej wielkości. 60 00:05:57,120 --> 00:05:57,920 Ta sama rzecz. 61 00:05:58,010 --> 00:06:05,480 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. 62 00:06:05,480 --> 00:06:12,980 Warto więc odświeżyć każda trwać trzy minuty, a następnie trzy jednostki następnie trafiliśmy małe. 63 00:06:13,040 --> 00:06:17,880 A teraz każdy z nich trwać sześć jednostek, a następnie mieliśmy ekstra małe. 64 00:06:17,940 --> 00:06:21,620 Wtedy automatycznie trwać pełne 12 jednostek, które jest to, co chcemy. 65 00:06:21,810 --> 00:06:27,350 Można zobaczyć, kiedy trafiliśmy małe chcemy je podjąć jedną jednostkę idzie w poprzek. 66 00:06:27,380 --> 00:06:28,010 W porządku. 67 00:06:28,010 --> 00:06:33,240 Mamy więc, że tam jest mała zmiana możemy zrobić, jeśli wrócimy do wysublimowane. 68 00:06:33,770 --> 00:06:39,560 Zobaczysz, że jesteśmy podając dwa razy w tym trzy jednostki dla dużych i średnich przedsiębiorstw. 69 00:06:39,560 --> 00:06:54,320 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. 70 00:06:54,440 --> 00:06:55,880 Tak to działa w ten sam sposób. 71 00:06:55,880 --> 00:06:56,650 Nic się nie zmieniło. 72 00:06:56,660 --> 00:07:02,420 Ja już odświeżony wygląda identycznie nasz średniej przerwania nadal istnieje, a nasze małe dzieła. 73 00:07:02,420 --> 00:07:04,800 Więc nie trzeba określić, że dwa razy. 74 00:07:05,300 --> 00:07:10,460 Więc pozwól mi przyjść N.Z. pozbyliśmy się, że i to działa dokładnie w ten sam sposób. 75 00:07:10,520 --> 00:07:14,990 I rzeczywiście, jeśli przyjrzymy się przejść do witryny internetowej. 76 00:07:15,000 --> 00:07:19,770 Założę się, że jeśli będziemy sprawdzać każdy z nich będzie tam iść zobaczyć. 77 00:07:19,780 --> 00:07:22,590 Kolumna mała sześć kolumn średnio trzy. 78 00:07:22,790 --> 00:07:26,990 Dokładnie to, co mieliśmy teraz, że omówiliśmy te cztery różne rozmiary. 79 00:07:27,070 --> 00:07:30,710 Mam nadzieję, że można zobaczyć, jak wszechstronny i przydatny system siatka może być. 80 00:07:30,750 --> 00:07:31,520 Wracajmy. 81 00:07:31,740 --> 00:07:33,960 A teraz zwracam gniazdowania siatek. 82 00:07:34,310 --> 00:07:42,710 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. 83 00:07:42,800 --> 00:07:47,340 Mogę rzeczywiście iść i dodać w innym wierszu wewnątrz tam. 84 00:07:47,370 --> 00:07:49,230 Więc klasa równa wiersz. 85 00:07:49,740 --> 00:08:09,100 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. 86 00:08:09,360 --> 00:08:18,170 Zmieńmy go do pierwszej połowy i drugiej połowy i będziemy zapisywać i dajmy im klasyczny różowy. 87 00:08:18,200 --> 00:08:24,000 Więc co zrobiliśmy teraz jest będziemy mieli trzy dzieje w dalszym ciągu lub czterech idzie w poprzek. 88 00:08:24,000 --> 00:08:38,530 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 , 89 00:08:38,960 --> 00:08:41,770 Nie pójdziesz i uczynić go jeszcze bardziej oczywiste. 90 00:08:41,780 --> 00:08:43,280 Podam im kolejną klasę. 91 00:08:43,400 --> 00:08:45,170 Nazwijmy to pomarańczowy. 92 00:08:45,370 --> 00:08:46,940 Jeszcze nie istnieje. 93 00:08:46,940 --> 00:09:04,870 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. 94 00:09:05,540 --> 00:09:10,530 Odśwież widać teraz mamy jeszcze te cztery rzeczy idzie w poprzek. 95 00:09:10,520 --> 00:09:19,160 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. 96 00:09:19,160 --> 00:09:22,520 Nie można po prostu zacząć robić to, gdzie trzeba kolumnę zamiast kolumny. 97 00:09:22,520 --> 00:09:23,980 Musi być jakiś wiersz. 98 00:09:24,260 --> 00:09:25,520 I zróbmy jeszcze jeden. 99 00:09:25,910 --> 00:09:31,090 Postawmy ten ostatni tu na sześć małych kawałków środka. 100 00:09:31,500 --> 00:09:39,770 Tak więc musimy dodać wiersz wewnątrz że div class równa wiersz zamiast tam. 101 00:09:39,770 --> 00:09:50,310 Potrzebujemy innego div i będziemy mieli sześć z tych, gdzie mamy dwa duże kolumny każda mających dwie z 12 jednostek. 102 00:09:50,310 --> 00:09:59,370 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ć. 103 00:10:00,440 --> 00:10:01,150 OK. 104 00:10:01,640 --> 00:10:06,540 Mamy więc cztery wielkie kolumny dzieje w pierwszej podzieliliśmy na pół. 105 00:10:06,650 --> 00:10:12,710 Ostatni z nich dzielimy na sześć części i naprawdę nie można zobaczyć coś, więc nie umieścić dowolny tekst w środku. 106 00:10:12,920 --> 00:10:14,200 Więc chodźmy zrobić. 107 00:10:14,270 --> 00:10:20,100 Albo raczej to faktycznie po prostu dać się lub wysokości do klasy pomarańczy. 108 00:10:20,100 --> 00:10:22,950 Zróbmy im każde 50 pikseli. 109 00:10:22,940 --> 00:10:29,960 A gdybym odświeżyć widać, że teraz wszystko, co ma na pomarańczowo, że klasa pomarańczowy zaczyna się 50 pikseli wysokości. 110 00:10:30,260 --> 00:10:40,880 Mamy więc nasze dwa podzielone kolumny i wtedy nasz sześć podzielone kolumn wewnątrz tych czterech równo podzielona kolumnami najwyższego szczebla. 111 00:10:40,880 --> 00:10:43,700 Więc to wszystko z najważniejszych elementów systemu siatki. 112 00:10:43,860 --> 00:10:46,420 W skrócie mamy 12 sztuk w każdym rzędzie. 113 00:10:46,560 --> 00:10:48,300 Podzielić je jednak chcesz. 114 00:10:48,360 --> 00:10:58,900 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. 115 00:10:59,000 --> 00:11:04,870 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. 116 00:11:04,880 --> 00:11:12,830 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ół. 117 00:11:12,840 --> 00:11:18,630 Jest to wspólny układ na telefon komórkowy, w którym nie mają wiele elementów treści w tym samym wierszu. 118 00:11:19,080 --> 00:11:19,540 OK. 119 00:11:19,700 --> 00:11:20,990 Wróćmy do wysublimowane. 120 00:11:21,090 --> 00:11:23,290 Upewnij się, że mówiłem o trzech głównych celów. 121 00:11:23,610 --> 00:11:28,160 Więc rozmawialiśmy o celu punktem systemu sieci pomaga nam położyć rzeczy. 122 00:11:28,160 --> 00:11:29,270 To jest zajebiste. 123 00:11:29,660 --> 00:11:31,690 Rozumieć cztery różne rozmiary. 124 00:11:31,700 --> 00:11:36,740 Są to duże średnie małe ekstra małe, a następnie prawy zagnieżdżone sieci. 125 00:11:37,040 --> 00:11:45,790 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.