Bootstrap 简明教程

Bootstrap - Masonry

Overview

  1. Masonry 是一个 JavaScript 第三方库，用于创建网页上的动态网格布局。

  2. 它通常用于排列元素，通常是图像或其他媒体。

  3. 媒体被排列在响应式网格布局中，其中每个元素通过紧密排列填充可用的垂直空间。

  4. 布局类似于砖墙。

Bootstrap 可以与 masonry 集成。Masonry 可以与 Bootstrap 网格系统和卡片组件一起使用。

由于 Masonry 不包含在 Bootstrap 中，因此你需要手动添加 JavaScript 插件或使用 CDN，如下所示：

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

你可以通过将 data-masonry='{"percentPosition": true }' 添加到 .row 包装器来结合 Bootstrap 的响应式网格和 Masonry 的定位优势。

下面给出的链接显示了 Masonry 和 Bootstrap 集成的示例：

Example

Description

Download link

此示例展示了如何集成 Masonry 和 Bootstrap。

Download