Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Masonry Demo

Giới thiệu về Bootstrap Masonry

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của Bootstrap Masonry. Là người thầy thân thiện trong lĩnh vực máy tính, tôi rất vui được dẫn dắt các bạn trong hành trình này. Ngay cả khi bạn chưa từng viết một dòng mã nào, đừng lo lắng - chúng ta sẽ cùng nhau bước từng bước, và sớm thôi bạn sẽ tạo ra những bố cục đẹp mắt, động như một chuyên gia!

Bootstrap-Masonry Demo

Bootstrap Masonry là gì?

Bootstrap Masonry là một kỹ thuật bố cục mạnh mẽ cho phép bạn tạo ra một lưới các yếu tố có độ cao khác nhau. Hãy tưởng tượng một bức tường với những viên gạch có kích thước khác nhau ghép lại với nhau hoàn hảo - đó chính là essence của Masonry! Nó đặc biệt hữu ích cho việc tạo ra các bộ sưu tập hình ảnh, hồ sơ hoặc bất kỳ nội dung nào bạn muốn có một的外观整洁, không gian không bị lãng phí.

Bắt đầu với Bootstrap Masonry

Thiết lập dự án của bạn

Trước khi chúng ta nhảy vào mã, hãy thiết lập dự án của mình. Chúng ta sẽ cần bao gồm Bootstrap và thư viện Masonry trong tệp HTML của mình. Đừng lo lắng nếu điều này có vẻ khó hiểu ban đầu - tôi sẽ giải thích từng phần khi chúng ta đi qua.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Masonry Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Nội dung của chúng ta sẽ ở đây -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>

Hãy phân tích này:

  1. Chúng ta bắt đầu với cấu trúc HTML cơ bản.
  2. Trong thẻ <head>, chúng ta liên kết đến tệp CSS của Bootstrap.
  3. Ở cuối thẻ <body>, chúng ta bao gồm các tệp JavaScript của Bootstrap và Masonry.

Những tệp này cung cấp cho chúng ta các công cụ cần thiết để tạo ra bố cục Masonry.

Tạo bố cục Masonry đầu tiên

Bây giờ, hãy tạo một bố cục Masonry đơn giản với một số hộp màu sắc. Chúng ta sẽ thêm mã này vào trong thẻ <body>:

<div class="container my-5">
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">Hộp 1</h5>
<p class="card-text">Đây là một hộp ngắn.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-success text-white">
<div class="card-body">
<h5 class="card-title">Hộp 2</h5>
<p class="card-text">Hộp này cao hơn một chút. Masonry sẽ điều chỉnh!</p>
<p class="card-text">Nhìn xem nó phù hợp như thế nào.</p>
</div>
</div>
</div>
<!-- Thêm nhiều hộp hơn ở đây -->
</div>
</div>

Hãy phân tích này:

  1. Chúng ta tạo một bình chứa với một hàng trong đó.
  2. Thuộc tính data-masonry='{"percentPosition": true }'告诉 Bootstrap sử dụng bố cục Masonry cho hàng này.
  3. Mỗi hộp là một cột (col-sm-6 col-lg-4) với một thẻ card trong đó.
  4. Chúng ta sử dụng các màu nền khác nhau (bg-primary, bg-success) để làm cho các hộp của chúng ta nhìnDistinct.

Tùy chỉnh bố cục Masonry

Bây giờ chúng ta đã có bố cục cơ bản, hãy khám phá một số cách để tùy chỉnh nó.

Thêm các yếu tố có kích thước khác nhau

Một trong những vẻ đẹp của Masonry là cách nó xử lý các yếu tố có kích thước khác nhau. Hãy thêm một số hộp với nội dung khác nhau:

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">Hộp 3</h5>
<p class="card-text">Đây là một hộp rất cao!</p>
<p class="card-text">Nó có rất nhiều nội dung.</p>
<p class="card-text">Masonry sẽ đảm bảo nó phù hợp hoàn hảo.</p>
<p class="card-text">Không matter how tall it gets.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title">Hộp 4</h5>
<p class="card-text">Trở lại với một hộp ngắn.</p>
</div>
</div>
</div>

Thêm hình ảnh vào bố cục Masonry

Masonry rất tuyệt vời cho các bộ sưu tập hình ảnh. Hãy thêm một số hình ảnh vào bố cục của chúng ta:

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Hình ảnh ngẫu nhiên">
<div class="card-body">
<h5 class="card-title">Thẻ hình ảnh</h5>
<p class="card-text">Thẻ này có một hình ảnh.</p>
</div>
</div>
</div>

Mã này thêm một thẻ card với một hình ảnh ngẫu nhiên từ Lorem Picsum. Hình ảnh sẽ tải với kích thước 300x200 pixel, nhưng bạn có thể điều chỉnh số này để có kích thước hình ảnh khác nhau.

Kỹ thuật cao cấp

Lọc các mục Masonry

Một tính năng thú vị mà chúng ta có thể thêm vào là khả năng lọc các mục Masonry. Hãy thêm một số nút lọc và cấp cho các mục của chúng tôi các danh mục:

<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">Tất cả</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">Danh mục 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">Danh mục 2</button>
</div>
<div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
<!-- Nội dung mục -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- Nội dung mục -->
</div>
<!-- Nhiều mục hơn... -->
</div>
</div>

Để làm cho điều này hoạt động, chúng ta cần thêm một chút JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function() {
var grid = document.querySelector('#masonry-grid');
var msnry = new Masonry(grid, {
percentPosition: true
});

var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
var items = grid.querySelectorAll('.masonry-item');

items.forEach(function(item) {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});

msnry.layout();
});
});
});
</script>

Mã này thực hiện các thao tác sau:

  1. Khởi tạo Masonry trên lưới của chúng ta.
  2. Thêm các sự kiện nhấp vào các nút lọc.
  3. Khi một nút được nhấp, nó hiển thị/ẩn các mục dựa trên danh mục của chúng.
  4. Sau khi lọc, nó gọi msnry.layout() để sắp xếp lại các mục hiển thị.

Kết luận

Chúc mừng! Bạn vừa tạo ra bố cục Masonry đầu tiên của mình. Từ các lưới cơ bản đến các kỹ thuật lọc nâng cao, bạn现在已经 có các công cụ để tạo ra các bố cục động, đáp ứng sẽ làm cho các trang web của bạn nổi bật.

Nhớ rằng, chìa khóa để thành thạo lập trình web là thực hành. Hãy thử nghiệm với các nội dung, bố cục và các tính năng khác nhau. Đừng害怕打破东西 - thường đó là cách chúng ta học được những bài học quý giá nhất trong lập trình.

Tiếp tục xây dựng, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó! Trước khi bạn nhận ra, bạn sẽ tạo ra các bố cục web làm cho ngay cả những người thợ xây dựng giỏi nhất cũng phải ghen tị. Chúc bạn may mắn với mã code của mình!

Phương thức Mô tả
Masonry(element[, options]) Khởi tạo Masonry trên một yếu tố
msnry.layout() Gọi lại bố cục sau khi thực hiện thay đổi
msnry.appended(elements) Thêm và bố trí các yếu tố mục mới
msnry.prepended(elements) Thêm và bố trí các yếu tố mục mới ở đầu
msnry.destroy() Loại bỏ hoàn toàn chức năng Masonry

Credits: Image by storyset

Hướng Dẫn Trước:
Bootstrap Demo Navbar Đính Dưới
Hướng Dẫn Tiếp Theo:
Demo mẫu khởi đầu Bootstrap