Лучшее руководство по Фонд сетки Примеры в 2024 году. В этом руководстве вы можете изучить
Три равных столбцов,Три неравны колонки,Две равные колонки,Две неравные колонны,Изменение порядка столбцов,Уплотненный Колонка,Смешанный: мобильный, рабочий стол,,Смешанный: мобильный, таблетки и настольных устройств,Средняя колонка,Колонка смещение,Неполное колонка,Широкоэкранный,
Фонд сетки Примеры
Ниже мы собрали некоторые примеры общей сетки.
Три равных столбцов
Этот пример демонстрирует, как создать три равные колонки (33,3% / 33,3% / 33,3%), показывая три колонки на средней и крупногабаритного оборудования, автоматического штабелирования на небольших устройствах:
примеров
<Div класс = "строка">
<Класс Div = "средний-4 колонки" стиль = "цвет фона: желтый;">
<P> .medium-4 </ p>
</ Div>
<Класс Div = "средний-4 колонки" стиль = "цвет фона: розовый;">
<P> .medium-4 </ p>
</ Div>
<Класс Div = "средний-4 колонки" стиль = "цвет фона: желтый;">
<P> .medium-4 </ p>
</ Div>
</ Div>
Попробуйте »
Три неравны колонки
Этот пример демонстрирует, как создать три неравные колонки (25% / 50% / 25%), показывая три колонки на средней и крупногабаритного оборудования, автоматического штабелирования на небольших устройствах:
примеров
<Div класс = "строка">
<Класс = Див "среднего 3 колонки" стиль = "цвет фона: желтый;">
<P> .medium-3 </ p>
</ Div>
<Класс = Див "среднего 6 столбцов" стиль = "цвет фона: розовый;">
<P> .medium-6 </ p>
</ Div>
<Класс = Див "среднего 3 колонки" стиль = "цвет фона: желтый;">
<P> .medium-3 </ p>
</ Div>
</ Div>
Попробуйте »
Две равные колонки
Этот пример демонстрирует, как создать два одинаковых столбца (50% / 50%), доля малого, среднего и крупного оборудования всегда выше 50% / 50%:
примеров
<Div класс = "строка">
<Div класс = "маленькие-6 столбцов" стиль = "цвет фона: желтый;">
<P> .small-6 </ p>
</ Div>
<Div класс = "маленькие-6 столбцов" стиль = "цвет фона: розовый;">
<P> .small-6 </ p>
</ Div>
</ Div>
Попробуйте »
Две неравные колонны
Этот пример демонстрирует, как создать две неравные столбцы (33,3% / 66,6%), доля малого, среднего и крупного оборудования всегда выше 33,3% / 66,6%:
примеров
<Div класс = "строка">
<Div класс = "маленькие-8 столбцов" стиль = "цвет фона: желтый;">
<P> .small-8 </ p>
</ Div>
<Div класс = "маленькие-4 колонки" стиль = "цвет фона: розовый;">
<P> .small-4 </ p>
</ Div>
</ Div>
Попробуйте »
Изменение порядка столбцов
С помощью .small|medium|large-push-* и .small|medium|large-pull-* - .small|medium|large-pull-* класс , чтобы изменить порядок столбцов:
примеров
<Div класс = "строка">
<Div класс = "малых-4 малых 8-нажимные колонны" стиль = "цвет фона: желтый;">
<P> .small-4 .small- 8-кнопка </ p>
</ Div>
<Div класс = "малых-8 небольших 4-выдвижные колонки" стиль = "цвет фона: розовый;">
<P> .small-8 .small- 4-вытяжная </ p>
</ Div>
</ Div>
Попробуйте »
Уплотненный Колонка
Вы можете использовать вложенные сетки (колонка вставки столбцов):
примеров
<Div класс = "строка">
<Div класс = "ружейно-8 колонн"> .small-8
<Div класс = "строка">
<Div класс = "ружейно-8 колонн"> .small-8 Уплотненный
<Div класс = "строка">
<Div класс = "ружейно-8 колонн"> .small-8 Уплотненный Опять </ DIV>
<Div класс = "маленькие-4 колонки"> .small-4 </ DIV>
</ Div>
</ Div>
<Div класс = "маленькие-4 колонки"> .small-4 </ DIV>
</ Div>
</ Div>
<Div класс = "маленькие-4 колонки"> .small-4 </ DIV>
</ Div>
Попробуйте »
Смешанный: мобильный, рабочий стол,
подвесная система Foundation имеет три колонки: .small-* (сотовый телефон), .medium-* (плоский) и .large-* (рабочий стол). Эти классы могут быть динамически использовать в комбинации, сделать макет более гибким:
Совет: Каждый класс может быть увеличен, если вы хотите , ширина малого и большого экрана устройства может быть установлен как указано .small-* .
примеров
<Div класс = "строка">
<Div класс = "малые-6 больших-8 колонн"> .small-6 .large-8 </ DIV>
<Div класс = "малые-6 больших-4 колонки"> .small-6 .large-4 </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "маленькие-2 большие-4 колонки"> .small-2 .large-2 </ DIV>
<Div класс = "малых-4 больших-4 колонки"> .small-4 .large-2 </ DIV>
<Div класс = "малые-6 больших-4 колонки"> .small-6 .large-2 </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "малого 3 большие-5 колонок"> .small-3 .large-5 </ DIV>
<Div класс = "малые-9 больших-7 колонн"> .small-9 .large-7 </ DIV>
</ Div>
Попробуйте »
Смешанный: мобильный, таблетки и настольных устройств
примеров
<Div класс = "строка">
<Div класс = "средний-6 больших-8 колонн"> .medium-6 .large-8 </ DIV>
<Div класс = "средний-6 больших-4 колонки"> .medium-6 .large-4 </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "маленький-4 средне-3 больших-7 столбцов"> .small-4 .medium-3 .large-7 </ DIV>
<Div класс = "малого 4 средне-6 больших-3 колонки"> .small-4 .medium-6 .large-3 </ DIV>
<Div класс = "маленький-4 средне-3 больших 2 колонки"> .small-4 .medium-3 .large-2 </ DIV>
</ Div>
Попробуйте »
Средняя колонка
Вы можете использовать центр столбца .small-centered в .small-centered класса. Среднего и крупного оборудования может быть унаследован по центру небольшие устройства, но вам необходимо установить класс сосредоточено на большое оборудование .large-centered .
примеров
<Div класс = "строка">
<Div класс = "маленькие-4 маленьких в центре колонны"> малого 4 небольших по центру </ div>
</ Div>
<Div класс = "строка">
<Div класс = "малые-6 маленьких в центре колонны"> малого 6 небольших по центру </ div>
</ Div>
<Div класс = "строка">
<Div класс = "малые-6 больших в центре колонны"> малого 6 больших по центру </ div>
</ Div>
<Div класс = "строка">
<Div класс = "малых-8 маленьких в центре крупно-центрированный колонны"> маленький-8 маленький в центре большого центрированный </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "малые-10 маленьких в центре колонны"> малого 10 небольших по центру </ div>
</ Div>
Попробуйте »
Колонка смещение
Вы можете использовать .large-offset-* (или .small-offset-* ) класс, установите столбец справа. Количество столбцов по левому краю управления с помощью звездочки:
примеров
<Div класс = "строка">
<Div класс = "большие-1 столбцы"> 1 </ DIV>
<Класс = "Див большие-11 колонн"> 11 </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "большие-1 столбцы"> 1 </ DIV>
<Div класс = "большой-10 крупных выносом-1 столбцов"> 10, смещение 1 </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "большие-1 столбцы"> 1 </ DIV>
<Div класс = "большой-9 больших выносом-2 колонки"> 9, смещение 2 </ DIV>
</ Div>
<Div класс = "строка">
<Div класс = "большие-1 столбцы"> 1 </ DIV>
<Div класс = "большие-8 больших выносом-3 колонки"> 8, смещение 3 </ DIV>
</ Div>
Попробуйте »
Неполное колонка
Если номер столбца строки, а не 12, Фонд автоматически будет последним на правый поплавок, и пробел, чтобы заполнить в остальных столбцах.
Options .end элемент категории за один последний в левое положение поплавка:
примеров
<Div класс = "строка">
<Div класс = "средний-3 колонки"> .medium-3 </ div>
<Div класс = "средний-3 колонки"> .medium-3 </ div>
<Div класс = "средний-3 колонки"> .medium-3 </ div>
</ Div>
<Div класс = "строка">
<Div класс = "средний-3 колонки"> .medium-3 </ div>
<Div класс = "средний-3 колонки"> .medium-3 </ div>
<Класс = "Див среднего 3 колонки конец"> .medium-3 .end </ DIV>
</ Div>
Попробуйте »
Широкоэкранный
Сетка ( .row ) Максимальный размер (макс-ширина) составляет 62.5rem. На Широкоформатный размер может быть больше, чем 62.5rem, эта колонка не будет полной заполнения страницы, даже если ширина устанавливается на 100%. Но мы можем установить новую максимальную ширину с помощью CSS:
примеров
<Style>
.row {
макс-ширина: 100%;
}
</ Style>
Попробуйте » Если вы хотите использовать максимальную ширину по умолчанию, но цвет фона среди всей страницы, то вы используете на элемента контейнера .row класса, и вам необходимо указать цвет фона:
примеров
<Div стиль = "цвет фона : коралловые; обивка: 25px;">
<Div класс = "строка">
<Div класс = "маленькие-6 столбцов" стиль = "цвет фона: желтый;"> .small-6 </ DIV>
<Div класс = "маленькие-6 столбцов" стиль = "цвет фона: розовый;"> .small-6 </ DIV>
</ Div>
</ Div>
Попробуйте »