Фундамент - Установка

В этой главе мы обсудим, как установить и использовать Foundation на веб-сайте.

Скачать фонд

Когда вы откроете ссылку foundation.zurb.com , вы увидите экран, как показано ниже -

Щелкните значок Download Foundation 6 кнопку, вы будете перенаправлены на другую страницу.

Здесь вы можете увидеть четыре кнопки -

Download Everything - Вы можете скачать эту версию Foundation, если хотите, чтобы все было во фреймворке, т.е. ванильный CSS и JS.
Download Essentials - Он загрузит простую версию, которая включает в себя сетку, кнопки, типографику и т. Д.
Custom Download - Это загрузит пользовательскую библиотеку для Foundation, она включает элементы и определяет размер столбцов, размер шрифта, цвет и т. Д.
Install via SCSS - Это перенаправит вас на страницу документации для установки Foundation для сайтов.

Вы можете нажать на Download Everythingкнопка, чтобы получить все, что есть в структуре, т.е. CSS и JS. Поскольку файлы состоят из всего, что связано с фреймворком, вам не нужно каждый раз включать отдельные файлы для отдельных функций. На момент написания этого руководства была загружена последняя версия (Foundation 6).

Файловая структура

После загрузки Foundation извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов:

Как видите, есть скомпилированные CSS и JS (foundation. *), А также скомпилированные и минифицированные CSS и JS (foundation.min. *).

В этом руководстве мы используем версии библиотеки CDN.

HTML-шаблон

Базовый шаблон HTML с использованием Foundation показан ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

В следующих разделах подробно описывается приведенный выше код.

Тип документа HTML5

Foundation состоит из определенных элементов HTML и свойств CSS, которые требуют использования типа документа HTML5. Поэтому следующий код для документа HTML5 должен быть включен в начало всех ваших проектов, использующих Foundation.

<!DOCTYPE html>
<html>
   ....
</html>

Сначала мобильные

Это помогает быстро реагировать на мобильные устройства. Вам нужно включитьviewport meta tag к элементу <head>, чтобы обеспечить правильный рендеринг и масштабирование касанием на мобильных устройствах.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

Свойство width контролирует ширину устройства. Установка ширины устройства гарантирует, что он будет правильно отображаться на различных устройствах (мобильные телефоны, настольные компьютеры, планшеты ...).
initial-scale = 1.0 гарантирует, что при загрузке ваша веб-страница будет отображаться в масштабе 1: 1, а масштабирование не будет применяться сразу после установки.

Инициализация компонентов

Сценарий jQuery требуется в Foundation для таких компонентов, как модальные окна и раскрывающийся список.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

Вывод

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код -

Сохраните указанный выше html-код firstexample.html файл.
Откройте этот HTML-файл в браузере, результат будет показан, как показано ниже.