Latest web development tutorials
×

Foundation курс

Foundation курс Foundation Начало работы Foundation текст Foundation таблица Foundation кнопка Foundation Группа кнопок Foundation иконка Foundation этикетка Foundation Напоминание окно Foundation Шкала прогресса Foundation панель Foundation изображение Foundation Выпадающее меню Foundation Складной Список Foundation список Foundation таб Foundation пейджинг Foundation Прайс-лист Foundation Верхней панели навигации Foundation Боковая панель Foundation Авто-навигация(Off-Canvas) Foundation Magellan Foundation форма Foundation Размер входного кадра Foundation переключатель Foundation ползунок Foundation воздушный шар Foundation режимное окно Foundation Joyride Foundation балансир

Foundation меш

Foundation Grid System Foundation меш - Горизонтально сложены Foundation меш - Малое оборудование Foundation меш - Среднего размера оборудование Foundation меш - Большое оборудование Foundation Блок сетки Foundation Сетка Примеры

Foundation справочное руководство

Foundation Значок Справочное руководство Foundation CSS справочное руководство Foundation CSS видимость

Фонд Сетки - большое оборудование

В последней главе мы ввели доля среднего и малого оборудования компоновки оборудования сетки, небольшого оборудования для 25% / 75% (.small-3 и .Small-9), но доля среднего оборудования для 50% / 50% (.medium-6 и .medium-6):

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

На крупногабаритного оборудования, мы рекомендуем соотношение 33% / 66%.

Совет: Размер экрана больше , чем определение большого 64.0625em оборудования.

Использование крупного оборудования .large-* категории.

Теперь мы добавим два на крупногабаритного оборудования:

<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>

решение

  • Доля небольших устройств с двумя колонками% 25/75% ( .small-3 и .small-9 )
  • Доля среднего устройства с двумя колонками% 50/50% ( .medium-6 и .medium-6 )
  • Удельный вес крупного оборудования с двумя колонками% 33/66% ( .large-4 и .large-8 )

примеров

<Div класс = "строка">
<Div класс = "малого 3 среднего 6 больших-4 колонки" стиль = "цвет фона: желтый;">
<P> В этом учебнике </ p>
</ Div>
<Div класс = "малого 9 среднего 6 больших-8 колонок" стиль = "цвет фона: розовый;">
<P> В этом учебнике </ p>
</ Div>
</ Div>

Попробуйте »
примечание Примечание: Для того, чтобы убедиться , что число столбцов добавить до 12!

Tight использование на большом оборудовании

В следующем примере мы указываем .large-6 класс (а не .medium- * .small-* ). Это указывает на то, что большая часть оборудования составляет 50% / 50%. Но в средних или небольшого прибора горизонтально уложены (ширина 100%):

примеров

<Div класс = "строка">
<Div класс = "большой-6 столбцов" стиль = "цвет фона: желтый;">
<P> В этом учебнике </ p>
</ Div>
<Div класс = "большой-6 столбцов" стиль = "цвет фона: розовый;">
<P> В этом учебнике </ p>
</ Div>
</ Div>

Попробуйте »