Создание макетов для нескольких устройств с помощью Zurb Foundation 3 Grid
Вступление
В этом руководстве вы узнаете, как создавать макеты для нескольких устройств с помощью Zurb Foundation 3 Grid. Сетка 12 столбцов. Вы также можете вкладывать сетки с помощью этой системы.
Как и другие грид-системы, эта Грид также имеет строки и столбцы. CSS, стоящий за этой Grid, спроектирован так, что столбцы могут варьироваться в зависимости от разрешения экрана и размера окна.
использование
<div class="row">
<div class="X columns">
Main content...
</div>
<div class="Y columns">
Sidebar...
</div>
</div>
Где X и Y обозначают количество столбцов. Поскольку эта грид-система поддерживает 12 столбцов, они могут быть один, два, три, четыре, пять, шесть, семь, восемь, девять, десять, одиннадцать и двенадцать. Сумма X и Y может быть 12, но не должна превышать 12. Если сумма меньше 12, вы можете добавить class = "end" в последнем столбце.
объяснение
Сетка Foundation 3 использует CSS-свойство box-sizing: border-box . Это свойство не добавляет границы и отступы к связанному объекту. Скорее, его границы и отступы становятся частью объекта, что значительно упрощает создание макета.
Как и сейчас, желоба добавляют промежутки между столбцами сетки. Здесь желоба создаются простым добавлением отступов к столбцам. Вы можете изменять желоба с помощью переменных SCSS, настройщика загрузки или самого CSS.
Если это не становится практически абсурдным, вы можете вложить в любое количество уровней с этой системой сетки. Это очень мощная функция, особенно когда вы создаете сложный макет.
Пример двухколонной сетки
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of two column Grid</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of two column grid with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="eight columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="four columns">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
Пример смещений
Если вы хотите добавить дополнительное пространство между столбцами в строке, вы можете использовать Смещение. Смещения начинаются с единицы и доходят до одиннадцати. Смещения также могут быть вложенными.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of grid offsets with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of grid offsets with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="six columns offset-by-six">
.six.columns.offset-by-six
</div>
</div>
</body>
Пример центрированных столбцов
При использовании это делает сам столбец центрированным, а не содержимое внутри столбца. Даже если вы измените количество столбцов, эффект имеет смысл.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of centered columns with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of centered columns with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="six columns centered">
.six.columns.centered
</div>
</div>
</body>
Пример заказа источника
Если вы хотите установить порядок отображения разметки не так, как написано, вы можете использовать классы упорядочения исходного кода Zurb Foundation 3. Это хорошо работает с рабочим столом и планшетами. Для телефонов это неосуществимо.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of source ordering with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of source ordering with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="six columns push-six">
.six.columns
</div>
<div class="six columns pull-six">
.six.columns (last)
</div>
</div>
</body>
Примечание: push и pull поддерживаются от двух до десяти.
Пример мобильной сетки
В Zurb Foundation 3 Grid есть два режима работы с небольшими дисплеями, такими как мобильные телефоны. Первый не требует добавления каких-либо дополнительных стилей. Это подходит, если вы хотите, чтобы ваша сетка, созданная для рабочего стола, отображалась также и в Mobile. Другой вариант - «Четырехколонная мобильная сетка», которая требует добавления дополнительных классов CSS.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of mobile grid with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of mobile grid with Zurb Foundation 3." />
</head>
<body>
<div class="row display">
<div class="eight mobile-one columns">
.eight.mobile-one.columns
</div>
<div class="four mobile-three columns">
.four.mobile-three.columns
</div>
</div>
</body>
Примечание. Вы также можете заказать исходный код для Mobile Grid. Вы можете добавить .pull-one-mobile, .pull-two-mobile, .pull-three-mobile, а также .push-one-mobile, .push-two-mobile, .push-three-mobile. классы для упорядочения источников.
Пример блочных сеток
Для заблокированного содержимого, созданного приложением, где вы не хотите, чтобы строки или даже количество элементов отображались правильно. Блочные сетки являются ul с двумя, тремя, четырьмя и пятью стилями.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of block grid with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of block grid with Zurb Foundation 3." />
</head>
<body>
<h3>Two up block grid</h3>
<ul class="block-grid two-up">
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
</ul>
<h3>Three up block grid</h3>
<ul class="block-grid two-up">
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
<li>Two-up element</li>
</ul>
<h3>Four up block grid (Mobile)</h3>
<ul class="block-grid three-up">
<li>Three-up element</li>
<li>Three-up element</li>
<li>Three-up element</li>
<li>Three-up element</li>
<li>Three-up element</li>
</ul>
<h3>Five up block grid</h3>
<ul class="block-grid mobile four-up">
<li>Four-up element</li>
<li>Four-up element</li>
<li>Four-up element</li>
<li>Four-up element</li>
<li>Four-up element</li>
<li>Four-up element</li>
</ul>
<ul class="block-grid five-up">
<li>Five-up element</li>
<li>Five-up element</li>
<li>Five-up element</li>
<li>Five-up element</li>
<li>Five-up element</li>
<li>Five-up element</li>
<li>Five-up element</li>
</ul>
</body>
Итак, теперь вы знаете, как создать макет для нескольких устройств с помощью Zurb Foundation 3 Grid для вашего следующего проекта. Twitter Bootstrap также имеет грид-систему. Вы знакомы с этим? Тогда попробуйте оба и дайте нам знать, какой из них подходит для какого типа проекта.
Предыдущая: Введение в Zurb Foundation 3
Далее: Zurb Foundation 3 Типография
Новый контент: Composer: менеджер зависимостей для PHP , R программирования