Фонд начал
Что такое фонд?
- Фонд представляет собой бесплатный передний конец рамки для быстрого развития.
- Фонд содержит HTML и CSS шаблоны дизайна, предлагает широкий выбор компонентов пользовательского интерфейса в Интернете, таких как формы, кнопки, вкладки и так далее. JavaScript также предоставляет множество плагинов.
- Фонд мобильного во-первых, вы можете создать адаптивный веб-страниц.
- Фонд для начинающих и профессионалов.
- Фонд был использован в Facebook, eBay, Samsung, Amazon, Disney и так далее.
 | Что такое реагировать веб - дизайн? Адаптивный веб-дизайн (адаптивный веб-дизайн) философия: проектирование и разработка страницы должны быть надлежащим ответом и скорректировать на основе поведения пользователей и окружающей среды устройств (платформы, размер экрана, ориентации экрана и т.д.). |
|---|
Скачать Фонд Где?
Вы можете быть два способа получить Фонд:
1. Загрузите последнюю версию с официального сайта: http://foundation.zurb.com/~~HEAD=dobj .
2, использовать этот учебник Официальный веб-сайт предоставляет CDN (рекомендуется):
<!-- css 文件 --> <link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
Али облако на основе CDN статический сайт службы.
| Фонд использует преимущества CDN: Фонд использует CDN улучшить корпоративный сайт (в частности, содержит много картинок и статических страниц сайта) скорости доступа, а также значительно улучшить стабильность выше природы сайта Почему Modernizr? Некоторые из компонентов Фонд использует передовые HTML5 и CSS3 возможности по сравнению раньше, но поддерживают не все браузеры. Modernizr используется для обнаружения браузера пользователя HTML5 и CSS3 функции библиотек JavaScript - позволяет компонентам корректно работать во всех браузерах. |
|---|
Создание страниц с помощью Foundation
1. Добавьте доктайп HTML5
элементы Foundation с использованием HTML и CSS атрибутов, поэтому вам нужно добавить HTML5 декларацию DOCTYPE типа документа.
В то же время, мы можем установить язык и кодировка символов атрибутов языки документа:
<HTML LANG = "ZH-сп ">
<Head>
<Meta Charset = "UTF-8 ">
</ Head>
</ HTML>
2. Фонд 5 мобильный первый
Фонд 5 для мобильных устройств, адаптивный дизайн. Приоритет заключается в перемещении основной рамки.
Для того, чтобы обеспечить страницы бесплатно , чтобы увеличить масштаб <head> добавьте следующие элементы в <meta> тег:
- ширина: контролировать размер окна просмотра, значение может быть задано, если 600, или специальное значение, такие как устройства ширины ширины устройства (в пикселях CSS масштабируется до 100% времени).
- Первоначальный масштаб: начальный масштаб, то есть, когда в первый раз масштаб загрузки страницы.
3. Компоненты Инициализировать
Некоторые компоненты основаны на Jquery открытого фонда, такие как: модальных коробки, выпадающие меню. Вы можете использовать следующий скрипт для инициализации компонентов:
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Страница Basic Foundation
Как создать основную страницу фундамента:
<!DOCTYPE html>
<html>
<head>
<title>Foundation Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- css 文件 -->
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">
<!-- jQuery 库 -->
<script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>
<!-- JavaScript 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>
<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<div class="panel">
<h1>Foundation 页面</h1>
<p>重置窗口大小，查看效果！</p>
<button type="button" class="button small">I Like It!</button>
</div>
</div>
</div>
<div class="row">
<div class="medium-4 columns">
<h3>Column 1</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
</div>
<div class="medium-4 columns">
<h3>Column 2</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
</div>
<div class="medium-4 columns">
<h3>Column 3</h3>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
</div>
</div>
</body>
</html>