Начало работы с Foundation
Что такое Foundation?
- Foundation — это бесплатный фронтенд-фреймворк для быстрой разработки.
- Foundation включает шаблоны дизайна HTML и CSS, предоставляя множество UI-компонентов для веба, таких как формы, кнопки, вкладки и многое другое. Он также предоставляет множество плагинов JavaScript.
- Foundation придерживается принципа mobile-first и позволяет создавать адаптивные веб-страницы.
- Foundation подходит как начинающим, так и профессионалам.
- Foundation используется в Facebook, eBay, Samsung, Amazon, Disney и т. д.
 |
Что такое адаптивный веб-дизайн? Концепция адаптивного веб-дизайна (Responsive Web design) заключается в следующем: Дизайн и разработка страницы должны реагировать и соответствующим образом адаптироваться в зависимости от поведения пользователя и окружения устройства (системной платформы, размера экрана, ориентации экрана и т. д.). |
|---|
Где скачать Foundation?
Вы можете получить Foundation следующими двумя способами:
1. Скачайте последнюю версию с официального сайта:http://foundation.zurb.com/。
2. Используйте CDN, предоставленный Staticfile (рекомендуется):
<!-- css 文件 --> <link rel="stylesheet" href="https://cdn.staticfile.net/foundation/5.5.3/css/foundation.min.css"> <!-- jQuery 库 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/jquery.js"></script> <!-- JavaScript 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/foundation.min.js"></script> <!-- modernizr.js 文件 --> <script src="https://cdn.staticfile.net/foundation/5.5.3/js/vendor/modernizr.js"></script>
Статический CDN этого сайта основан на облачных сервисах Alibaba Cloud.
|
Преимущества использования CDN для Foundation: Использование CDN в Foundation повышает скорость доступа к корпоративным сайтам (особенно сайтам, содержащим большое количество изображений и статических страниц), а также значительно повышает стабильность сайтов с указанными характеристиками. Зачем использовать modernizr? Некоторые компоненты Foundation используют относительно передовые возможности HTML5 и CSS3, но не все браузеры их поддерживают. Modernizr — это библиотека JavaScript, используемая для определения возможностей HTML5 и CSS3 в браузере пользователя, что позволяет компонентам корректно работать во всех браузерах. |
|---|
Создание страниц с Foundation
1. Добавьте doctype HTML5
Foundation использует HTML-элементы и CSS-свойства, поэтому необходимо добавить объявление doctype HTML5.
Одновременно можно задать атрибут языка документа lang и кодировку символов:
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
</html>
2. Foundation 5 — mobile-first
Foundation 5 предназначен для адаптивного дизайна на мобильных устройствах. Ядро фреймворка — mobile-first.
Чтобы страница могла свободно масштабироваться, можно<head>добавить следующее в элемент<meta>Метки:
- width: управляет размером области просмотра; можно задать конкретное значение, например 600, или специальное значение, например device-width, которое представляет ширину устройства (в CSS-пикселях при масштабе 100%).
- initial-scale: начальный коэффициент масштабирования, то есть коэффициент масштабирования при первой загрузке страницы.
3. Инициализация компонентов
Некоторые компоненты Foundation разработаны на основе jQuery, такие как: модальные окна, выпадающие меню и т. д. Вы можете использовать следующий скрипт для инициализации компонентов:
$(document).ready(function() {
$(document).foundation();
})
</script>
Базовая страница Foundation
Как создать базовую страницу Foundation:
Примеры Foundation
Попробуйте сами »