Fundacja - The Grid

Opis

System siatki fundamentów skaluje do 12 kolumn na stronie. Systemy siatki służą do tworzenia układów stron za pomocą szeregu wierszy i kolumn, w których znajdują się treści.

Opcje siatki

Poniższa tabela zawiera krótkie omówienie sposobu działania systemu siatki Foundation w wielu urządzeniach.

Małe urządzenia Telefony (<640 pikseli) Średnie urządzenia Tablety (> = 640 pikseli) Duże urządzenia Laptopy i komputery stacjonarne (> = 1200 pikseli)
Zachowanie siatki Poziomy przez cały czas Początek zwinięty, poziomo nad punktami przerwania Początek zwinięty, poziomo nad punktami przerwania
Prefiks klasy .mały-* .średni-* .duży-*
Liczba kolumn 12 12 12
Gniazdo tak tak tak
Przesunięcia tak tak tak
Kolejność kolumn tak tak tak

Podstawowa struktura siatki fundamentowej

Poniżej przedstawiono podstawową strukturę siatki fundamentowej -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>
  • Najpierw utwórz klasę wierszy, aby utworzyć poziome grupy kolumn.

  • Treść powinna być umieszczona w kolumnach, a tylko kolumny mogą być bezpośrednimi elementami podrzędnymi wierszy.

  • Kolumny siatki tworzy się, określając liczbę dwunastu dostępnych kolumn, które chcesz rozciągnąć. Na przykład dla czterech równych kolumn użylibyśmy .large-3

Poniżej przedstawiono trzy klasy używane w systemie siatki Fundacji -

Sr.No. Podstawowe klasy i opis siatki
1 Duży

W wielkokwiatowych * Klasy służy do dużych urządzeń.

2 Średni

Średnio- * klasa służy do urządzeń średnich.

3 Mały

klasa small- * jest używana dla małych urządzeń.

Advanced Grid

Poniżej przedstawiono zaawansowane formaty siatki używane w programie Foundation.

Sr.No. Zaawansowane siatki i opis
1 Połączona kolumna / wiersz

Do kolumn i wierszy klasy są używane na tym samym elemencie, aby uzyskać pełną szerokość kolumny do użycia jako pojemnik.

2 Zagnieżdżanie

Możemy zagnieżdżać kolumny siatki wewnątrz innych kolumn.

3 Przesunięcia

Używając klasy large-offset- * lub small-offset- * , możesz przesuwać kolumny w prawo.

4 Niekompletne wiersze

Fundament automatycznie przesuwa ostatni element w prawo, gdy wiersze nie zawierają kolumn do 12.

5 Zwiń / Rozwiń wiersze

Przy użyciu rozmiaru zapytania o media klasy collapse i uncollapse są dołączane do elementu row, aby pokazać dopełnienia.

6 Wyśrodkowane kolumny

Włączając klasę do małej wyśrodkowanej kolumny, możesz ustawić kolumnę w środku.

7 Zamawianie źródła

Klasa porządkowania źródła służy do przesuwania kolumn między punktem przerwania.

8 Siatki blokowe

Siatka bloków służy do podziału zawartości.

Budowanie semantycznie

Korzystając z zestawu mikserów SASS, generowany jest CSS siatki, który jest używany do budowania własnej siatki semantycznej. Aby uzyskać więcej informacji, kliknij tutaj

SASS Reference

Poniżej przedstawiono odniesienie SASS dla siatki używanej w programie Foundation.

Sr.No. Podstawowe siatki i opis
1 Zmienne

Używając zmiennych sass możemy modyfikować domyślne style tego komponentu.

2 Mieszanki

Końcowe wyjście CSS jest budowane przy użyciu miksera.