Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Salvattore
Webdesign

Xây dựng Grid động với Salvattore và Bootstrap trong 10 phút

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Salvattore là một sự lựa chọn khác đối với jQuery Masonry với một sự khác biệt quan trọng: nó sử dụng cấu hình CSS thay cho JavaScript. Những kiểu Grid này có thể được nhìn thấy trên hầu hết các trang web, nổi tiếng nhất là trên Pinterest.

Hôm nay, chúng ta sẽ sử dụng Salvattore kết hợp với Twitter Bootstrap 3 để tạo ra một cấu trúc Grid tuyệt vời, có khả năng đáp ứng cao.

Bắt đầu: Những gì bạn sẽ cần

Trước tiên, bạn sẽ cần phải có thư viện JavaScript của Salvattore (minified hoặc nguồn). Tiếp theo, bạn sẽ cần liên kết với CSS của Twitter Bootstrap. Thay vì tải xuống và lưu trữ bản sao của riêng mình, chúng ta sẽ mượn nó trực tiếp từ NetDNA của BootstrapCDN.

Một khi điều này được hoàn tất, bạn đã sẵn sàng để bắt đầu với cấu hình Salvattore!

Tiếp theo, bạn sẽ cần một stylesheet bên ngoài hoặc một thẻ <style type='text/css'> trong phần header.  Hầu hết các công việc của chúng ta sẽ được thực hiện trong stylesheet.

Lưu ý: bạn phải bao gồm thuộc tính typerel để cho Salvattore hoạt động đúng.

Tạo nhanh một Bootstrap Grid

Twitter Bootstrap cung cấp một cấu trúc Grid mạnh mẽ, linh hoạt tập trung vào Media Queries từ dưới lên trên. Hãy nhìn vào một hàng chứa các cột thông thường.

Bạn sẽ nhận thấy trong các mã đánh dấu ở trên các mẫu của col-[size]-[column number]. Với size bao gồm xs, sm, mdlg, chúng ta có thể thiết lập kích thước cột khác nhau cho các breakpoint khác nhau mà không cần viết cụ thể Media Queries. Hãy xem ví dụ này để thấy cách các cột thay đổi tại các độ rộng màn hình khác nhau.

Panel của Bootstrap

Chúng ta sẽ tạo ra một Grid động bằng cách sử dụng thành phần Panel của Bootstrap. Mã đánh dấu để tạo ra Panel được xây dựng như sau:

Đặt nó cùng với Salvattore

Bây giờ thì chúng ta có các mảnh ghép Bootstrap mà chúng ta cần, chúng ta đặt tất cả chúng cùng với Salvattore. Bây giờ, chúng ta sẽ bắt đầu với sáu Panel rỗng; sau đó, chúng ta sẽ làm cho tất cả chúng động để cung cấp cho mỗi Panel một số nội dung.

Để cho Salvattore hoạt động đúng, Grid container của chúng ta cần một thuộc tính data-columns. Đây là mã đánh dấu hiện tại của chúng ta:

Tiếp theo, chúng ta sẽ đi đến stylesheet của chúng ta và thêm các nhãn sau thông qua các phần tử giả (pseudo-element):

Các breakpoint mà chúng ta đã chọn ánh xạ trực tiếp vào Media Queries của Bootstrap. Salvattore sử dụng phần tử giả ::before và thuộc tính content để định nghĩa các lớp của các cột được tạo ra, và sau đó cố gắng phân chia các phần tử thành những cột đều nhau.

Làm cho nó động

Đến lúc này, chúng ta đã giữ các thứ trong CSS một cách chặt chẽ, nhưng nếu bạn muốn bước thêm một bước nữa, thì JavaScript có thể cung cấp một số công cụ.

Salvattore nâng các thứ lên một bước cao hơn bằng cách cung cấp tính năng phụ trợ. Với các chức năng này và một kết nối đến một API (chúng ta đang sử dụng Book API của Google để kéo về các quyển sách của Ernest Hemingway), chúng ta có thể xây dụng một Grid động. Đây là JavaScript mà chúng ta sẽ sử dụng:

Lưu ý: Yêu cầu jQuery

Đầu tiên chúng ta tạo một chức năng append lấy tiêu đề và nội dung của chúng ta, và bao chúng trong mã cho Panel của chúng ta. Sau đó chúng ta sử dụng chức năng salvattore ['append_elements'] (grid, [item]) để thêm các phần tử vào Grid của chúng ta. Cuối cùng, chúng ta gọi AJAX để kéo dữ liệu động vào đó.

Để điều này hoạt động đúng, chúng ta sẽ loại bỏ tất cả các nội dung mà Grid nắm giữ.

Salvattore sẽ điền nội dung vào các cột cho chúng ta.

Mã đánh dấu cuối cùng của chúng ta trông như thế này:

Kết luận

Salvattore làm cho việc tạo ra các Grid kiểu Masonry động trở nên rất dễ dàng cho những ai không biết nhiều về JavaScript. Do đó, với một lượng nhỏ JavaScript, việc tạo Grid động cùng với nội dung động là một việc nhẹ nhàng. Cuối cùng, Bootstrap cung cấp các lớp linh hoạt đặt tên cấu trúc để dễ dàng xây dựng các Grid cho bất kỳ breakpoint nào.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.