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

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?

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ść.

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

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?

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ć?

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. ;)

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.

1
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ć.

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