кодесурса

Создание макетов для нескольких устройств с помощью Zurb Foundation 3 Grid

script1adsense2code
script1adsense3code

Вступление

В этом руководстве вы узнаете, как создавать макеты для нескольких устройств с помощью 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 программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code