Bootstrap và Masonry

Tích hợp Masonry với hệ thống lưới Bootstrap và thành phần thẻ.

Masonry không có trong Bootstrap. Thêm nó bằng cách bao gồm plugin JavaScript theo cách thủ công hoặc sử dụng CDN như vậy:


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
  

Bằng cách thêm data-masonry='{"percentPosition": true }'vào .rowwrapper, chúng ta có thể kết hợp sức mạnh của lưới đáp ứng của Bootstrap và định vị của Masonry.


Placeholder Image cap
Tiêu đề thẻ chuyển sang một dòng mới

Đây là một thẻ dài hơn với văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung. Nội dung này dài hơn một chút.

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

Placeholder Image cap
Tiêu đề thẻ

Thẻ này có văn bản hỗ trợ bên dưới như một sự dẫn dắt tự nhiên cho nội dung bổ sung.

Cập nhật lần cuối cách đây 3 phút

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

Tiêu đề thẻ

Thẻ này có tiêu đề thông thường và đoạn văn bản ngắn bên dưới thẻ.

Cập nhật lần cuối cách đây 3 phút

Placeholder Card image

Một câu trích dẫn nổi tiếng, được chứa trong một phần tử blockquote.

Tiêu đề thẻ

Đây là một thẻ khác có tiêu đề và văn bản hỗ trợ bên dưới. Thẻ này có một số nội dung bổ sung để làm cho nó cao hơn một chút về tổng thể.

Cập nhật lần cuối cách đây 3 phút