Fundacja - instalacja

W tym rozdziale omówimy, jak zainstalować i używać Foundation na stronie internetowej.

Pobierz Fundację

Po otwarciu linku Foundation.zurb.com zobaczysz ekran, jak pokazano poniżej -

Kliknij Download Foundation 6 przycisk, zostaniesz przekierowany na inną stronę.

Tutaj możesz zobaczyć cztery przyciski -

Download Everything - Możesz pobrać tę wersję Foundation, jeśli chcesz mieć wszystko we frameworku, tj. Waniliowe CSS i JS.
Download Essentials - Pobierze prostą wersję, która zawiera siatkę, przyciski, typografię itp.
Custom Download - Spowoduje to pobranie niestandardowej biblioteki dla Foundation, zawiera elementy i zdefiniuje rozmiar kolumn, rozmiar czcionki, kolor itp.
Install via SCSS - Spowoduje to przekierowanie do strony dokumentacji umożliwiającej zainstalowanie programu Foundation dla witryn.

Możesz kliknąć Download Everythingprzycisk, aby uzyskać wszystko we frameworku, czyli CSS i JS. Ponieważ pliki składają się ze wszystkich elementów we frameworku, za każdym razem nie trzeba dołączać oddzielnych plików dla poszczególnych funkcji. W momencie pisania tego samouczka została pobrana najnowsza wersja (Foundation 6).

Struktura plików

Po pobraniu Foundation wypakuj plik ZIP, a zobaczysz następującą strukturę plików / katalogów -

Jak widać, są skompilowane CSS i JS (Foundation. *), A także skompilowane i zminimalizowane CSS i JS (Foundation.min. *).

W tym samouczku używamy wersji biblioteki CDN.

Szablon HTML

Podstawowy szablon HTML używający Foundation jest pokazany poniżej -

<!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>

Poniższe sekcje szczegółowo opisują powyższy kod.

Typ dokumentu HTML5

Foundation składa się z pewnych elementów HTML i właściwości CSS, które wymagają użycia typu dokumentu HTML5. Dlatego poniższy kod dla doctype HTML5 powinien znajdować się na początku wszystkich projektów wykorzystujących Foundation.

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

Mobile First

Pomaga reagować na urządzenia mobilne. Musisz dołączyć rozszerzenieviewport meta tag do elementu <head>, aby zapewnić prawidłowe renderowanie i powiększanie dotykiem na urządzeniach mobilnych.

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

Właściwość width steruje szerokością urządzenia. Ustawienie jej na szerokość urządzenia zapewni, że będzie prawidłowo renderowany na różnych urządzeniach (telefonach komórkowych, komputerach stacjonarnych, tabletach ...).
initial-scale = 1.0 zapewnia, że po załadowaniu strona internetowa zostanie wyrenderowana w skali 1: 1 i żadne powiększanie nie zostanie zastosowane po wyjęciu z pudełka.

Inicjalizacja komponentów

Skrypt jQuery jest wymagany w Foundation dla komponentów takich jak modały i lista rozwijana.

<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>

Wynik

Wykonajmy następujące kroki, aby zobaczyć, jak działa powyższy kod -

Zapisz powyższy kod HTML firstexample.html plik.
Otwórz ten plik HTML w przeglądarce, a wynik zostanie wyświetlony, jak pokazano poniżej.