Nền móng - Cài đặt

Trong chương này, chúng ta sẽ thảo luận về cách cài đặt và sử dụng Foundation trên trang web.

Tải xuống Foundation

Khi bạn mở liên kết foundation.zurb.com , bạn sẽ thấy một màn hình như hình dưới đây:

Nhấn vào Download Foundation 6 , bạn sẽ được chuyển hướng đến một trang khác.

Ở đây bạn có thể thấy bốn nút -

  • Download Everything - Bạn có thể tải xuống phiên bản Foundation này, nếu bạn muốn có tất cả mọi thứ trong khuôn khổ, tức là vanilla CSS và JS.

  • Download Essentials - Nó sẽ tải xuống phiên bản đơn giản bao gồm lưới, nút, kiểu chữ, v.v.

  • Custom Download - Điều này sẽ tải xuống thư viện tùy chỉnh cho Foundation, nó bao gồm các phần tử và xác định kích thước của cột, cỡ chữ, màu sắc, v.v.

  • Install via SCSS - Thao tác này sẽ chuyển hướng bạn đến trang tài liệu để cài đặt Foundation cho các trang web.

Bạn có thể nhấp vào Download Everythingđể lấy mọi thứ trong khuôn khổ, tức là CSS và JS. Vì các tệp bao gồm tất cả mọi thứ trong khuôn khổ nên mọi lúc bạn không cần phải bao gồm các tệp riêng biệt cho chức năng riêng lẻ. Tại thời điểm viết hướng dẫn này, phiên bản mới nhất (Foundation 6) đã được tải xuống.

Cấu trúc tệp

Sau khi Foundation được tải xuống, hãy giải nén tệp ZIP và bạn sẽ thấy cấu trúc tệp / thư mục sau:

Như bạn có thể thấy, có CSS ​​và JS đã biên dịch (foundation. *), Cũng như CSS và JS được biên dịch và rút gọn (foundation.min. *).

Chúng tôi đang sử dụng các phiên bản CDN của thư viện trong suốt hướng dẫn này.

Mẫu HTML

Một mẫu HTML cơ bản sử dụng Foundation như được hiển thị bên dưới:

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

Các phần sau đây mô tả chi tiết đoạn mã trên.

Loại tài liệu HTML5

Foundation bao gồm một số phần tử HTML và thuộc tính CSS yêu cầu sử dụng loại tài liệu HTML5. Do đó, mã sau cho loại tài liệu HTML5 nên được bao gồm ở đầu tất cả các dự án của bạn bằng Foundation.

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

Di động đầu tiên

Nó giúp đáp ứng các thiết bị di động. Bạn cần bao gồmviewport meta tag vào phần tử <head>, để đảm bảo kết xuất phù hợp và phóng to chạm trên thiết bị di động.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">
  • thuộc tính width kiểm soát chiều rộng của thiết bị. Đặt nó thành chiều rộng thiết bị sẽ đảm bảo rằng nó được hiển thị trên các thiết bị khác nhau (điện thoại di động, máy tính để bàn, máy tính bảng ...) đúng cách.

  • ban đầu-scale = 1.0 đảm bảo rằng khi được tải, trang web của bạn sẽ được hiển thị ở tỷ lệ 1: 1 và không áp dụng tính năng phóng to ra khỏi hộp.

Khởi tạo các thành phần

Tập lệnh jQuery là bắt buộc trong Foundation cho các thành phần như modals và dropdown.

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

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

  • Lưu mã html đã cho ở trên firstexample.html tập tin.

  • Mở tệp HTML này trên trình duyệt, kết quả hiển thị như hình dưới đây.