Pojęcie siatki

Zasada siatki

Siatka jest po prostu pocięta na komórki o tych samych wymiarach, jak pokazano poniżej:

../../_images/empty_grid.png

Siatka Bootstrap ma 12 kolumn.

Terminologia

Siatka jest podzielona na wiersze (nazywane „wierszem” w Bootstrap i „Linią” w WebAcappella RC) i kolumny („col”), jak na poniższym rysunku :

../../_images/grid_col_and_row.png

The Bootstrap Grid

Podział na kolumny dzieli szerokość ekranu na procenty. W przypadku rzędów wysokość zostanie jednak dostosowana do zawartości.

../../_images/grid_content.png

Organizacja sieci

Bootstrap bierze pod uwagę 4 rodzaje mediów:

4 ekrany paska startowego

Duże (Lg)

Bn

Sm

Xmały (Xs)
../../_images/LG.png
../../_images/MD.png
../../_images/SM.png
../../_images/XS.png

Wartość referencyjna

Wartość referencyjna

Wartość referencyjna

Wartość referencyjna

>= 1200 px

>= 992 px

>= 768 px

< 768 px

A w WebAcappella Grid?

  • Siatka jest zdefiniowana w WAGRID za pomocą przycisku ” BOX „, który będzie zawierał dowolną liczbę wierszy, przy czym maksymalna szerokość każdego z nich wynosi 12 kolumn.

  • Wiersz (wiersz w Bootstrap) będzie zawierał elementy (tekst, obrazek, itp.).

Dwa główne komponenty to „BOX” i „LINE”.

Informacja

POLE: Jest to podstawowy (a zatem niezbędny) komponent, jedyny, w którym można dodawać linie.

Informacja

LINIA: Komponent, który pozwala na dołączenie obrazów, tekstu, galerii, itp.

Wiersz jest podzielony na 12 kolumn (patrz pasek startowy), komponent taki jak obraz może mieć szerokość co najmniej 1 kolumny i co najwyżej 12 kolumn.

W sumie możemy więc mieć 12 elementów o szerokości 1 jednostki.

Jeśli chodzi o wysokość wiersza, to zależy ona od wielkości szerokości wstawionego składnika (składników) (pojęcie proporcji dla obrazu, pojęcie treści dla tekstu w szczególności).

Pojęcie proporcji odnosi się do pojęcia proporcjonalności (szerokość* wysokość), a zatem „zmiany wielkości” obrazu.

Zawartość ma pojęcie „płynności”, tzn. zawartość musi w każdym przypadku pojawić się, a zatem jeśli zmniejszysz szerokość (utrata zawartości), zostanie to nieuchronnie zrekompensowane przez wzrost wysokości.

Element dystansowy jest oddzielnym elementem w tym sensie, że ma stały rozmiar, co pozwala na wygenerowanie marginesu.