Temel - Kurulum
Bu bölümde, web sitesinde Foundation'ı nasıl kurup kullanacağımızı tartışacağız.
Vakfı indirin
Foundation.zurb.com bağlantısını açtığınızda, aşağıda gösterildiği gibi bir ekran göreceksiniz -
Tıkla Download Foundation 6 düğmesi, başka bir sayfaya yönlendirileceksiniz.
Burada dört düğme görebilirsiniz -
Download Everything - Çerçevede bulunan her şeye, örneğin vanilya CSS ve JS'ye sahip olmak istiyorsanız, Foundation'ın bu sürümünü indirebilirsiniz.
Download Essentials - Izgara, düğmeler, tipografi vb. İçeren basit sürümü indirecektir.
Custom Download - Bu, Foundation için özel kitaplığı indirir, öğeleri içerir ve sütunların boyutunu, yazı tipi boyutunu, rengini vb. Tanımlar.
Install via SCSS - Bu sizi siteler için Foundation'ı kurmanız için dokümantasyon sayfasına yönlendirecektir.
Tıklayabilirsiniz Download EverythingFramework'teki her şeyi, yani CSS ve JS'yi almak için düğmesine basın. Dosyalar çerçevedeki her şeyi içerdiğinden, her seferinde bireysel işlevler için ayrı dosyalar eklemenize gerek kalmaz. Bu öğreticiyi yazarken, en son sürüm (Foundation 6) indirildi.
Dosya Yapısı
Foundation indirildikten sonra, ZIP dosyasını çıkartın ve aşağıdaki dosya / dizin yapısını göreceksiniz -
Gördüğünüz gibi, derlenmiş CSS ve JS (temel. *) Yanı sıra derlenmiş ve küçültülmüş CSS ve JS (temel.min. *) Var.
Bu eğitim boyunca kütüphanenin CDN versiyonlarını kullanıyoruz.
HTML Şablonu
Foundation'ı kullanan temel bir HTML şablonu aşağıda gösterildiği gibidir -
<!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>Aşağıdaki bölümler yukarıdaki kodu ayrıntılı olarak açıklamaktadır.
HTML5 belge türü
Temel, HTML5 belge türünün kullanılmasını gerektiren belirli HTML öğelerinden ve CSS özelliklerinden oluşur. Bu nedenle, aşağıdaki HTML5 doctype kodu, Foundation'ı kullanan tüm projelerinizin başlangıcına dahil edilmelidir.
<!DOCTYPE html>
<html>
....
</html>Önce Mobil
Mobil cihazlara duyarlı olmaya yardımcı olur. Eklemeniz gerekirviewport meta tag Mobil cihazlarda düzgün oluşturma ve dokunarak yakınlaştırmayı sağlamak için <head> öğesine ekleyin.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">width özelliği, aygıtın genişliğini kontrol eder. Cihaz genişliğine ayarlamak, çeşitli cihazlarda (cep telefonları, masaüstü bilgisayarlar, tabletler ...) doğru şekilde oluşturulmasını sağlar.
initial-scale = 1.0 , yüklendiğinde, web sayfanızın 1: 1 ölçekte görüntülenmesini ve kutudan herhangi bir yakınlaştırma uygulanmamasını sağlar.
Bileşenlerin ilklendirilmesi
JQuery betiği, modals ve dropdown gibi bileşenler için Foundation'da gereklidir.
<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>Çıktı
Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -
Yukarıda verilen html kodunu kaydedin firstexample.html dosya.
Bu HTML dosyasını bir tarayıcıda açın, aşağıda gösterildiği gibi bir çıktı görüntülenir.