подвесная система Foundation
Основание для системы 12 сетки.
Если у вас нет 12, вы можете объединить несколько столбцов, создать ряд большей ширины.
Основание системы сетки реагирует. Колонка автоматически изменяется в зависимости от размера экрана. На большом экране, может быть три, малый размер экрана, то это может быть три отдельных, последовательно.
Сетка колонн
подвесная система Foundation имеет три колонки:
-
.small(мобильный терминал) -
.medium(таблетка) -
.large(компьютерное оборудование: ноутбук, настольный компьютер)
Выше классы могут быть объединены, чтобы создать более гибкую компоновку
Базовая структура сетки
Ниже приведены основные сетчатая структура фонда экземпляра:
примеров
<Div класс = "маленький | средний | крупно- NUM столбцы"> </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "маленький | средний | крупно- NUM столбцы"> </ DIV>
<Div класс = "маленький | средний | крупно- NUM столбцы"> </ DIV>
<Div класс = "маленький | средний | крупно- NUM столбцы"> </ DIV>
</ Div>
<Div класс = "строка">
...
</ Div>
Во- первых, создать строку ( <div class="row"> ). Это уровень вертикальных колонн. Затем добавьте количество столбцов описано small- num , medium- num и large- num класс. Примечание: Количество столбцов num должен добавить до 12:
примеров
<Div класс = "ружейно-12 колонн"> .small-12 желтый </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "ружейно-8 колонн"> .small-8 бежевый </ DIV>
<Div класс = "маленькие-4 колонки"> .small-4 серый </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "большой-9 маленьких-8 колонок"> .small-8 .large-9 розовый </ DIV>
<Div класс = "большие-3 маленькие-4 колонки"> .small-4 .large-3 оранжевый </ DIV>
</ Div>
Попробуйте »
Например, первая строка <div> класса .small-12 , который создает 12 (ширина 100%).
Вторая строка создает две колонки, .small-4 ширина составляет 33,3%, .small-8 ширина 66,6%.
В третьей строке мы добавили две дополнительные колонки ( .large-3 и .large-9 ). Это означает , что если большой размер экрана, столбец будет% 25 ( .large-3 ) и 75% ( .large-9 соотношение) из. Мы также указать долю малого экрана выше 33% ( .small-4 ) и 66% ( .small-8 ). Такие комбинации для различных дисплея экрана очень полезно.
параметры сетки
В следующей таблице приведены Фонд объяснил подвесную систему на нескольких устройствах:
| Малое оборудование Телефоны (<40.0625em (640px)) | Умеренный оборудование Таблетки (> = 40.0625em (640px)) | Большое оборудование Ноутбуки и рабочие столы (> = 64.0625em (1025px)) | |
|---|---|---|---|
| Сетка Поведение | Это был уровень | Начал разрушаться, прорыв выше горизонтали | Начал разрушаться, прорыв выше горизонтали |
| приставка Класс | .small- * | .medium- * | .large- * |
| Количество классов | 12 | 12 | 12 |
| Может быть встроен | да | да | да |
| офсет | да | да | да |
| Колонка сортировки | да | да | да |
Широкоэкранный
Сетка максимум ( .row ) ширина 62.5rem. На широком экране, когда ширина больше, чем 62.5rem, столбец не перекрывают ширину страницы, даже если ширина устанавливается на 100%. Но вы можете сбросить с помощью CSS-макс ширина:
Если вы используете максимальную ширину по умолчанию, но хотите цвет фона по всей ширине страницы, вы можете использовать .row обернуть весь контейнер, и вам необходимо указать цвет фона:
примеров
<Div класс = "строка">
<Div класс = "маленькие-6 колонок" стиль = "цвет фона: желтый;"> маленький-6 </ DIV>.
<Div класс = "маленькие-6 колонок" стиль = "цвет фона: розовый;"> маленький-6 </ DIV>.
</ Div>
</ Div>
Попробуйте »