Najlepszy samouczek Fundacja rozpoczęła W 2024 r. W tym samouczku możesz dowiedzieć się Czym jest Fundacja?,Pobierz Foundation Gdzie?,Tworzenie stron przy użyciu Foundation,Strona Podstawowe założenia,
Co reaguje projektowanie stron internetowych? Responsive Web Design (Responsive Web design) filozofia jest: projektowanie i rozwój strony powinna być właściwa reakcja i dostosować na podstawie zachowań użytkowników i środowiska urządzenia (platformy, rozmiar ekranu, orientacji ekranu, etc.). |
Możesz być dwa sposoby uzyskania Fundacji:
1. Pobierz najnowszą wersję z oficjalnej strony: http://foundation.zurb.com/~~HEAD=dobj .
2, należy ten poradnik Oficjalna strona zapewnia CDN (zalecane):
<!-- css 文件 --> <link rel="stylesheet" href="http://static.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
Ali chmurze CDN statycznej portalu.
Fundacja wykorzystuje zalety CDN: Fundacja używa CDN poprawić Strona firmowa (w szczególności, zawiera wiele zdjęć i stron statycznych witryn) szybkość dostępu, a także znacznie poprawić stabilność powyższego charakteru serwisu Dlaczego modernizr? Część składowa Fundacja używa najnowocześniejszych HTML5 i CSS3 możliwości niż wcześniej, ale nie wszystkie przeglądarki obsługują. Modernizr służy do wykrywania przeglądarki użytkownika HTML5 i CSS3 funkcje bibliotek JavaScript - umożliwia składniki działał poprawnie we wszystkich przeglądarkach. |
1. Dodaj doctype HTML5
Elementy fundamentów za pomocą atrybutów HTML i CSS, więc trzeba dodać HTML5 deklaracji DOCTYPE typ dokumentu.
Tymczasem możemy ustawić język i kodowanie znaków atrybutów dokumentu lang:
2. Fundacja 5 pierwsza mobilna
Fundacja 5 dla urządzeń mobilnych reaguje projektowych. Priorytetem jest, aby przenieść ramy bazowej.
Aby zapewnić darmowe strony, aby powiększyć <head>
dodaj następujące elementy w <meta>
tag:
3. Składniki Inicjowanie
Niektóre elementy są oparte na jQuery Foundation Open, takich jak: modalnych okien, menu rozwijanego. Można użyć następującego skryptu, aby zainicjować elementów:
Jak stworzyć prostą stronę fundacji:
<!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.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.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 ipsumpl</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 ipsumpl</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 ipsumpl</p> </div> </div> </body> </html>