Знакомство с 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
Мы уверены, что вам понадобится где-то форма:
Попробуйте одну из этих кнопок:
Simple Button
Success Btn
Alert Btn
Secondary Btn
Так много компонентов!
Весь набор инструментов поставляется с Foundation. Посмотрите документацию, чтобы увидеть их все, а также подробную информацию о том, как применить их к своим собственным проектам.
https://get.foundation/sites/docs/
Go to Foundation DocsПроверка условий
Сброс кодаАккордеон вкладки
- Accordion 1
Panel 1. Lorem ipsum dolor
Nowhere to Go - Accordion 2
- Accordion 3
Type your name!
Аккордеон меню
Значки
Кнопки
Призыв к действию
Это призыв.
Он имеет легко переопределяемый визуальный стиль и соответствующим образом приглушен.
Опасно идти одному, Вот возьми это.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Плавающие классы
Формы
Toggle CodeЭтикетки
Медиа объеты

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.
Menu
Off-canvas
Карусель Orbit
Toggle CodeПостраничная разметка
Прогресс бар
25%
50%
75%
100%
Отзывчивый Тумблер
Вкладки
One
Посмотри на меня! Я очень крутая панель вкладок с текстовым контентом!
Two

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

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

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



Title Bar
Переключения
Классы видимости
<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>
Вы находитесь на маленьком экране или больше.
Вы находитесь на среднем экране или больше.
Вы находитесь на большом экране или больше
Вы определенно находитесь на маленьком экране.
Вы определенно находитесь на среднем экране.
Вы определенно находитесь на большом экране.
Невозможно к этому прикоснуться.
Можно вроде как прикоснуться к этому.
Вы находитесь в альбомной ориентации.
Вы находитесь в портретной ориентации.
Этот текст может быть прочитан только с помощью программы чтения с экрана.
Там есть строка текста над этим, вы просто не можете ее видеть.
Этот текст можно увидеть, но он не будет прочитан устройством чтения с экрана.