Jak zrobić takie pozycjonowanie używając bootstrap?

Odpowiedz Nowy wątek
2019-05-10 16:21
0

Hej, przeglądałem parę poradników związanych z pozycjonowaniem i nie mam z tym żadnych, bo zrobiłem sobie trochę przykładów i wszystko jest ok, ale nie mam pomysłu jak stworzyć coś takiego:

---------- ----------------- 1
---------- 3
----------
2
---------- -----------------

Nie wiem jak mogę to inaczej narysować. Jeśli robię rząd, pakuję tam 1 i 3 i przypisuję im wartość col-6, a następnie 1 ma height 200px, a 3 ma height: 400px; to nie mogę wcisnąć już 2 poniżej jedynki, bo ląduje poniżej 3. Jak mogę zrobić podobny układ ale w taki sposób jak na rysunku?

Pozostało 580 znaków

2019-05-10 17:09
2019-05-10 17:23
0

Dobrze by było, byś zrobił jakiś obrazek i na tym obrazku oznaczył dokładnie, np. kolorując wszystkie komórki na różne kolory, która komórka ma obok której być, bo trudno mi obecnie dojść.

edytowany 2x, ostatnio: Silv, 2019-05-10 22:43

Pozostało 580 znaków

2019-05-10 22:41
0

O cholera, nie wiem co to się stało. Dodaję obrazek i chciałbym uzyskać efekt zaznaczony na czerwono. https://imgur.com/sRYzqHk

Dodatkowo jak wtedy mogę zmieniać wysokość i szerokość poszczególnych okien? Bo rozumiem, że całość robię używając siatki bootstrapa. @Silv

Pozostało 580 znaków

2019-05-10 23:18
1

Jednym słowem, chodzi ci o tzw. spanrowspan oraz colspan (tak to się nazywa przynajmniej w tabelach HTML-a).

Tutaj przykład: https://jsfiddle.net/6sc1dnyp/3/

O takie coś chodzi?

Pozostało 580 znaków

2019-05-10 23:25
0

Tak, dokładnie o coś takiego, dzięki. Jeśli będzie jakiś background w każdym prostokącie i chciałbym od każdej linii odstęp 5px, to już muszę w CSS się bawić?

Pozostało 580 znaków

2019-05-10 23:44
1
Mateusz23 napisał(a):

Tak, dokładnie o coś takiego, dzięki. Jeśli będzie jakiś background w każdym prostokącie i chciałbym od każdej linii odstęp 5px, to już muszę w CSS się bawić?

Niekoniecznie, Bootstrap udostępnia marginesy oraz padding: https://getbootstrap.com/docs/4.3/utilities/spacing/. Domyślna wartość dla podstawy obliczania paddingu to 1rem (w kwestii jednostki rem – zob. https://developer.mozilla.org/en-US/docs/Web/CSS/length). Jeżeli u Ciebie wielkość czcionki elementu <html> (czyli właśnie 1rem) wynosi 16px (tak jest w większości wypadków domyślnie, np. u mnie na Firefoksie), to nie da rady ustawić 5px bez "ręcznej" ingerencji w CSS. Może być wtedy jedynie albo 4px (czyli 0,25 * 1rem), albo 8px (czyli 0,5 * 1rem).


Tip: nie zawsze musi to być wielkość czcionki elementu <html>. Ogólnie chodzi o "root element" w obiekcie Document, a jego można zmienić z <html> na inny. Zobacz specyfikację pseudoklasy :root: https://drafts.csswg.org/selectors-4/#root-pseudo. Ale – zazwyczaj jest to właśnie element <html>.


UPDATE: Tzn. oczywiście Bootstrap ma więcej rozmiarów niż 4px i 8px, ale wybrałem te najbliższe do 5px. ;)

edytowany 14x, ostatnio: Silv, 2019-05-11 00:12

Pozostało 580 znaków

2019-05-11 00:12
0

Świetnie, mam jeszcze jedno pytanie z jednostkami. Jeśli próbuję coś zamieniać, porządkuję na stronie żeby było po równo, to moja strona domyślnie ma width: 100vw, oraz height 100vh? Bo czytałem również, że teoretycznie width: 100% = width: 100vw, ale vw są relatywne względem okna, w % względem rodzica. I jeszcze jedna sprawa, powinienem unikać używania px i zastąpić czymś innym? Bo tak mi się wydaje, że rozdzielczość to każdy ma inną, zależnie od urządzenia i na czym strona jest wyświetlana, jeśli chodzi o przekątną np monitora.

Pozostało 580 znaków

2019-05-11 00:49
Mateusz23 napisał(a):

Świetnie, mam jeszcze jedno pytanie z jednostkami. Jeśli próbuję coś zamieniać, porządkuję na stronie żeby było po równo, to moja strona domyślnie ma width: 100vw, oraz height 100vh?

Chciałbym zauważyć, że nie jest to tematem tego wątku; ale odpowiem. Hm, nie powiedziałbym "strona", ale, powiedzmy, "widok" – czyli dokładnie ta treść, którą "naraz" widzisz na ekranie. Dokładnie masz to opisane na już wspomnianej stronie: https://developer.mozilla.org/en-US/docs/Web/CSS/length:

vh
Equal to 1% of the height of the viewport's initial containing block.

vw
Equal to 1% of the width of the viewport's initial containing block.

Zaznaczę, że celowo jest tu napisane "viewport's initial containing block", a nie po prostu "viewport width". Ja nie miałem okazji dokładnie tego studiować, więc dla dokładnej definicji terminu "containing block" zobacz specyfikację: https://drafts.csswg.org/css2/visudet.html#x0

Pamiętaj, że w szerokości 100vw zawiera się też miejsce na ewentualne paski przewijania na stronie, więc musisz odsuwanie od nich treści sam obsłużyć.

Bo czytałem również, że teoretycznie width: 100% = width: 100vw, ale vw są relatywne względem okna, w % względem rodzica.

Powiedziałbym, że wartość width: 100% dla danego elementu może odpowiadać wartości width: 100vw pod pewnymi warunkami. Zazwyczaj (zawsze?), jeżeli element ma width: 100%, to tylko wtedy odpowiada to width: 100vw, gdy rodzic elementu posiada szerokość 100vw (nie piszę width: 100vw, bo szerokość obliczana przez przeglądarkę jest czymś innym niż nadana przez programistę). Piszę "zawsze?" ze znakiem zapytania, bo mogę nie znać jakichś przypadków granicznych (innymi słowy, mogę się mylić co do wszystkich przypadków), więc w sprawie dokładnych definicji – zobacz specyfikację, np.: https://drafts.csswg.org/css2/visudet.html#x0

I jeszcze jedna sprawa, powinienem unikać używania px i zastąpić czymś innym?

Nie powinieneś "unikać px". Nie jestem ekspertem, ale w mojej opinii należy jednostki stosować stosownie do okoliczności. Jeżeli ustawiasz np. szerokość linii – myślę, że sensownie byłoby dać szerokość w pikselach (np. border-width: 2px). Z drugiej strony, jeżeli masz np. szerokość panelu bocznego na stronie, możesz spróbować zaszaleć i ustawić mu rozmiar w % – aczkolwiek ja skłaniałbym się do porzucenia % i zrobienia po prostu CSS grid-a na całej stronie. Są jeszcze takie opinie i warto je znać: https://benfrain.com/just-use-pixels/

Bo tak mi się wydaje, że rozdzielczość to każdy ma inną, zależnie od urządzenia i na czym strona jest wyświetlana, jeśli chodzi o przekątną np monitora.

Nie studiowałem tego tematu dokładnie, więc nie chcę się wypowiadać.

edytowany 3x, ostatnio: Silv, 2019-05-11 00:52
Wielkie dzięki za pomoc, naprawdę bardzo mi pomogłeś. Wszystkiego dobrego, dzięki jeszcze raz. - Mateusz23 2019-05-11 01:08
Spoko. Jak coś jeszcze, pytaj na forum w nowych wątkach, może inni będą mogli udzielić więcej porad. - Silv 2019-05-11 01:09

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0