Bubble: Jaki układ layoutu stosujemy?

0:00Jesteśmy znów w edytorze, w którym usunąłem wszystkie zbędne elementy.

0:03Rozpoczynamy więc naszą pracę od czystej kartki.

0:06Zanim jednak do tego przystąpimy, wróćmy

0:08na chwilę do strony wzorcowej i zobaczmy, jak jest tutaj to wszystko rozmieszczone.

0:13No więc przede wszystkim mamy stronę, która

0:15rozciąga się na całą szerokość okna przeglądarki.

0:18Kolejno mamy tutaj kontener, który jest wycentrowany w ramach tego okna.

0:23Dodatkowo ma jakąś maksymalną szerokość,

0:25jak również nie rozciąga się poza jakąś tutaj określoną wartość.

0:29A w samym tym kontenerze

0:30umieszczone są wszystkie elementy składowe, czyli tutaj header, sekcja top.

0:36Tu mamy jakąś dodatkową sekcję z benefitami, następną sekcja itd.

0:41Spróbujmy więc teraz odwzorować sobie ten układ w samym edytorze.

0:47Wróćmy więc przede wszystkim do ustawień naszej strony.

0:52Tu mam ustawione container layout na column.

0:54Natomiast ponieważ w środku będzie się znajdował tylko i wyłącznie jeden element,

0:59czyli ten nasz tutaj główny wrapper, to tak naprawdę nie ma tutaj znaczenia czy

1:03wybierzesz column czy wybierzesz row, abyś tylko nie wybierał żadnych z

1:07tych dwóch tutaj fixed ani align to parent.

1:10Ja zostawię tutaj column.

1:13Dodatkowo chcę aby cała moja strona miała kolor biały.

1:18A więc wpiszę tutaj sześć razy wartość F.

1:23Ustawienia dla strony mamy już gotowe.

1:25Teraz dodajmy właśnie ten wrapper, który będzie nam trzymał cały nasz content.

1:29W tym celu podaję tutaj grupę.

1:34Nazwijmy ją grupa wrapper.

1:38I przejdźmy tutaj do jej ustawień.

1:42Ta grupa z kolei przede wszystkim będzie

1:43wycentrowana, czyli dokładnie tutaj umieszczona w samym centrum naszej strony.

1:50A dodatkowo jak już pamiętasz, mówiliśmy,

1:52że wszystkie elementy w środku będą umieszczone jeden pod drugim,

1:56a więc dla nich będziemy musieli ustawić wartość tutaj na column.

2:01Teraz musimy tutaj zdefiniować,

2:05te wartości. Na chwilę obecną

2:07szerokość takiego elementu tej grupy wrapper ustawiona jest na stałe na 400 pixeli.

2:11Ponieważ zaznaczona jest tutaj opcja

2:13make this element fixed-width oznacza to, że jeżeli będziemy zwężać bądź

2:17rozszerzać okno przeglądarki, to szerokość tej grupy nigdy się nie zmieni.

2:21Nam natomiast na tym nie zależy.

2:23Chcemy aby nasza strona była w pełni

2:25responsywna, a więc odznaczamy tutaj tą opcję

2:30I teraz musimy ustawić wartość minimalną oraz wartość maksymalną.

2:34Wartość minimalna na jaką chce, żeby taka grupa się skurczyła to 320 pixeli.

2:41A wartość maksymalna jaką może się rozszerzyć to 1280 pixeli.

2:47Czyli jest to dokładnie taka wartość, z jaką pracujemy tutaj dla strony w naszym

2:52builderze.

2:54Dlaczego tutaj ustawiłem 320 pixeli, ponieważ jest to minimalna wartość, na

2:58jaką chcemy obsługiwać dla ekranów telefonów komórkowych.

3:02Jeżeli chciałbyś zobaczyć tutaj podgląd takiej skrótowej strony na różnych

3:06rozdzielczościach, to możemy to zrobić bezpośrednio z samego Bubble poprzez

3:10zakładkę responsive. Wystarczy, że tutaj kliknę.

3:14Teraz mogę sobie podejrzeć jak moja strona

3:16będzie się prezentowała na różnych rozdzielczościach.

3:18Jak widzisz minimalna jaką tutaj mamy to 320 pixeli.

3:21Dlatego ja właśnie tutaj zawsze ustawiam

3:23tę wartość na 320 pixeli jako minimalną, a maksymalna jest dowolna, ponieważ tutaj

3:29mogę kliknąć 1200, ale równie dobrze mogę sobie rozszerzać tutaj całą moją stronę.

3:34Jak widzisz

3:36nasz wrapper maksymalnie rozciągnął się na 1280 pixeli, a dodatkowo jest wycentrowany

3:41i dalej się nie rozszerza, a więc osiągnęliśmy dokładnie ten sam efekt jaki

3:45mamy tutaj ten wrapper właśnie jest

3:47wycentrowany i ma wartość ustawioną na maksymalnie 1280 pixeli.

3:54Wróćmy tutaj do edytora.

3:55Jak widzisz możemy też podejrzeć

3:58naszą stronę tutaj na widoku tabletowym.

4:00Tutaj na 992 pixele.

4:02Te wartości są żywcem skopiowane tutaj z tych wartości responsywnych z tzw.

4:07breakpointów właśnie z bootstrap'a.

4:10Ja kiedyś się do nich stosowałem i tak

4:12projektowałem swoje strony internetowe i aplikacje.

4:15Natomiast jeżeli też to robiłeś i działałeś w taki sposób, to doskonale wiesz, że

4:20czasami zapanowanie nad tym, jak te Twoje elementy będą wyglądać na różnych

4:24rozdzielczościach może przyprawić o ból głowy.

4:27Dlatego też ja właśnie od jakiegoś czasu stosuję to podejście 320 do 1280 pixeli.

4:33Dlaczego akurat takie? Już Ci pokazuję.

4:36Wróćmy sobie do samego edytora, czyli tutaj UI builder.

4:40I teraz do tej grupy wrapper.

4:43Wrzućmy do środka

4:444 grupy.

4:46Jeżeli tutaj ustawię 1 grupę,

4:50muszę tu wybrać dowolną inną wartość niż fixed.

4:52Ja ustawię np. row

4:54w ten sposób

4:55mam tutaj teraz dostęp do minimalnej i maksymalnej szerokości.

5:01Jako minimalną wartość.

5:03Tutaj również ustawiam 320 pixeli.

5:06Natomiast wartość maksymalną pozostawię pustą.

5:08Wtedy pojawia mi się tutaj inf, czyli infinity.

5:12Oznacza to, że taka grupa będzie się

5:13rozciągała na całą dostępną szerokość okna rodzica.

5:17Teraz wystarczy, że sobie skopiuje taką grupę 4 razy muszę na nią najechać.

5:22Mam tu informacje, że mam zaznaczoną grupę b.

5:25Klikam

5:26command C i command V.

5:30Natomiast żeby nam to oczywiście zadziałało to

5:32dla grupy wrapper musimy na chwilę obecną ustawić tutaj row.

5:38OK.

5:40Group wrapper, mamy row.

5:44Tu nam jakieś dziwne wartości powskakiwały dla tych grup.

5:49Wystarczy, że to tutaj teraz zmienię, ok.

5:51Mamy grupę wrapper.

5:53Jeszcze raz grupa wrapper.

5:54Minimalna szerokość 320.

5:56Maksymalna 1280.

5:59W środku grupa B i grupa C.

6:03Skopiujmy to jeszcze raz i raz, tak żebyśmy otrzymali tutaj 4 grupy.

6:11Czy tutaj nam się tutaj odpowiednio skopiowało?

6:13Niestety nie.

6:16Dałem jedną grupę wewnątrz drugiej.

6:19Teraz osiągnąłem dokładnie taki efekt, jaki mi chodziło.

6:21Mamy grupę wrapper, a w środku tutaj 4 grupy.

6:25Każda z nich może się skurczyć minimalnie do wartości 320 pixeli, a maksymalnie

6:30rozszerzyć na całą dostępną dla niej przestrzeń.

6:33Ponieważ nasz kontener ma 1280 pixeli,

6:36to te 4 grupy mieszczą nam się tutaj jedna obok siebie.

6:39Ponieważ 4 razy 320, czyli ta minimalna

6:43wartość daje nam właśnie 1280 pixeli, dodajmy teraz tym grupom

6:48tutaj kolory.

6:50I zaraz zademonstruje Ci, jak to wszystko

6:52się będzie zachowywało wraz ze zmianą rozdzielczości.

7:05Dajemy tu wszędzie odpowiednie kolory, tu może taki i jeszcze dla tej grupy.

7:11Kolor czerwony.

7:13Jeżeli teraz podejrzałbym sobie naszą stronę

7:17tutaj w trypie responsywnym, to muszę przejechać do wartości 1280 pixeli.

7:21Jak widzisz tutaj mi się

7:23wyświetla aktualna szerokość mojej strony to jedziemy do 1280 pixeli.

7:28Jak widzisz, przy tej wartości wszystkie te

7:304 grupy mieszczą się obok siebie, ponieważ mogą się skurczyć,

7:33oczywiście minimalnie do 320 pixeli.

7:37Jeśli jednak skurczy się sam element rodzica.

7:41Widzisz jest to teraz wartość poniżej 1280 pixeli.

7:45To już te 4 grupy nie zmieszczą nam się

7:47obok siebie, ponieważ 4 razy 320 daje 1280, a my mamy

7:52dostępne tylko 1275, a więc te 3 grupy zajęły

7:57tutaj całe dostępne dla nich miejsce, a ta przeskoczyła poniżej.

8:02Jak się domyślasz, przy takich właśnie ustawieniach te 320 na 1280 pixeli

8:07mamy zawsze pewność jak się będą zachowywały nasze grupy.

8:10A więc przed 1280 pixelach zmieszczą się 4.

8:14Jeśli zjedziemy do wartości 960 pixeli.

8:21To będą nam się mieściły tutaj 3, bo 3 razy 320 daje nam 960 pixeli.

8:27Jeśli jednak zjada teraz chociaż pixel mniej.

8:31To jak widzisz teraz te dwie grupy zajęły całą dostępną przestrzeń,

8:35a dwie kolejne tutaj sobie podzieliły tą przestrzeń między sobą.

8:40Jak się domyślasz, te dwie grupy

8:43będą ustawione obok siebie do szerokości 640 pixeli.

8:48A jeżeli zjdziemy poniżej niej.

8:51To wszystko teraz tu przeskoczy i każda ta grupa zajmuje całą dostępną przestrzeń.

8:56W ten sposób mam pewność, jak moje

8:58elementy zachowują się na różnych rozdzielczościach.

9:01Nie muszę pamiętać, czy odpowiednio

9:02ustawiłem to na 768 czy może na 990 czy tam innych wartości.

9:07Ja wiem, że u mnie takimi wartościami

9:09granicznymi jest właśnie 320, 640, 960 i 1280,

9:17mając takie ustawienia właśnie jestem w stanie odpowiednio sobie tutaj wszystko

9:21zdefiniować, dzięki czemu będę w stanie stworzyć właśnie w pełni responsywne

9:28strony bądź aplikacje i dodatkowo łatwo tym zarządzać.

9:33Skoro tą kwestię mamy już wyjaśnioną, to usuńmy sobie te grupy.

9:41Grupę wraperra zostawiamy oczywiście.

9:45Tym razem musimy tu zmienić layout

9:47na column, ponieważ chcemy właśnie osiągnąć ten efekt, czyli header,

9:50poniżej sekcja top, poniżej kolejna sekcja itd.

9:55A więc to by było na tyle w tej lekcji.

9:57W następnej przystąpimy już do konkretnych

9:59działań, czyli zaczniemy budować nasz header.

10:02Dziękuje Ci za uwagę i widzimy się już za chwilę.