Знакомство с Foundation 6

Спасибо команде Foundation за работу!
Thank you to the Foundation team for their work!

Мы очень рады, что вы хотите попробовать Foundation!

Чтобы начать работу, здесь представлены некоторые основные стили, которые вы можете изменить, поиграть с ними или полностью заменить.

Чтобы помочь вам получить максимальную отдачу от Foundation и создавать адаптивные веб-сайты, я предлагаю уникальный онлайн - тренинг. Изучите сетку Foundation, как использовать и изменять компоненты пользовательского интерфейса Foundation, параметры и функции JavaScript Foundation, а также множество советов и трюков, которые я узнал из клиентских проектов.

После того, как вы получите первое удовольствие на этой странице, вы должны знать:

Мы постараемся показать вам все, что нужно знать об использовании фреймворка.

Курс дистанционного обучения Foundation.

Навыки Работы С Базовым Кодом.
Этот онлайн курс даст вам возможность лучше понять как работает Foundation и как вы можете овладеть им для создания потрясающих проектов.

Семантический

Все имеет смысловое значение. Вы можете иметь самую чистую разметку без ущерба для полезности и скорости с Foundation.

Мобильный

Первоначально вы ориентируетесь на мобильные устройства, затем все больше и больше.

Настраиваемый

Вы можете настроить свою сборку для включения или удаления определенных элементов, а также менять размеры, цвета, шрифты и многое другое.

Делаю на заказ

Сайты на заказ любой сложности, чистый код, поддержка. От 10 т. ₽, быстро.
Вот ваша основная сетка:

Это секция из двенадцати ячеек в сетке-x, каждая из них включает в себя div.элемент callout, чтобы вы могли видеть, где находится ячейка - он вообще не требуется для сетки.

Six cell

Six cell

Four cell

Four cell

Four cell

Мы уверены, что вам понадобится где-то форма:
.com
Попробуйте одну из этих кнопок:

Simple Button
Success Btn
Alert Btn
Secondary Btn

Так много компонентов!

Весь набор инструментов поставляется с Foundation. Посмотрите документацию, чтобы увидеть их все, а также подробную информацию о том, как применить их к своим собственным проектам.

https://get.foundation/sites/docs/​
 Go to Foundation Docs
Тренер по Foundation
Александр

Тренер дистанционного обучения

 Записаться в разделе "Обучение"

Проверка условий

Сброс кода

Here's how you use this input field!

This input is ignored by Abide using `data-abide-ignore`

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Choose Your Favorite, and this is required, so you have to pick one.
Choose Your Favorite - not required, you can leave this one blank.
Check these out

Аккордеон вкладки

Аккордеон меню

Значки

Кнопки

Learn More View All Features So Tiny So Small So Large Such Expand
One Two Three

Призыв к действию

Это призыв.

Он имеет легко переопределяемый визуальный стиль и соответствующим образом приглушен.

Опасно идти одному, Вот возьми это.
This is a primary callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Кнопка закрытия

This is a close button example.

Детализированное Меню

Toggle Code

Плавающие классы

Left Right

Формы

Toggle Code

Here's how you use this input field!

Choose Your Favorite
Check these out
$

Этикетки

Primary Label Secondary Label Success Label Alert Label Warning Label

Медиа объеты

Знакомство с Foundation

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Off-canvas

Карусель Orbit

Toggle Code

  • This is lightseagreen. 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.

Постраничная разметка

Прогресс бар

25%

50%

75%

100%

Отзывчивый Тумблер

Вкладки

One

Посмотри на меня! Я очень крутая панель вкладок с текстовым контентом!

Two

Знакомство с Foundation

Three

Посмотри на меня! Я очень крутая панель вкладок с текстовым контентом!

Four

Знакомство с Foundation

Five

Посмотри на меня! Я очень крутая панель вкладок с текстовым контентом!

Six

Знакомство с Foundation

Уменьшенные изображения - Thumbnail

Знакомство с Foundation
Знакомство с Foundation
Знакомство с Foundation

Title Bar

Foundation
 

Переключения

Expand!

Классы видимости

<p>You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>

<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>
<p class="hide">Can't touch this.</p>

<p class="invisible">Can sort of touch this.</p>

<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>

<p class="show-for-sr">This text can only be read by a screen reader.</p>
<p>There's a line of text above this one, you just can't see it.</p>

<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>

<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
<header id="header" role="banner">
</header>
<main id="mainContent" role="main" tabindex="0">
</main>

Вы находитесь на маленьком экране или больше.

Вы находитесь на среднем экране или больше.

Вы находитесь на большом экране или больше

Вы определенно находитесь на маленьком экране.

Вы определенно находитесь на среднем экране.

Вы определенно находитесь на большом экране.

Вы находитесь не на среднем экране или больше.

Вы находитесь не на большом экране или больше.

Вы определенно не находитесь на маленьком экране.

Вы определенно не находитесь на среднем экране.

Вы определенно не находитесь на большом экране

Невозможно к этому прикоснуться.

Вы находитесь в альбомной ориентации.

Вы находитесь в портретной ориентации.

Этот текст может быть прочитан только с помощью программы чтения с экрана.

Там есть строка текста над этим, вы просто не можете ее видеть.

Этот текст можно увидеть, но он не будет прочитан устройством чтения с экрана.

Skip to Content