Bootstrap 简明教程

Bootstrap - Masonry

Overview

  1. Masonry is a JavaScript third-party library, which is used for creating dynamic grid layouts on web pages.

  2. It is often used to arrange elements, typically images or other media.

  3. The media is arranged in a responsive grid layout where each element fills the available vertical space by positioning them closely together.

  4. The layout looks like a masonry wall.

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

Bootstrap can be integrated with masonry. Masonry can be used along with Bootstrap grid system and cards component.

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

As masonry is not included with Bootstrap, you need to add it by including the JavaScript plugin manually, or using a CDN, like:

<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 的定位优势。

You can combine the benefits of Bootstrap’s responsive grid and Masonry’s positioning, by adding data-masonry='{"percentPosition": true }' to the .row wrapper.

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

The link given below shows the example of integration of masonry and bootstrap:

Example

Description

Download link

This example shows how to integrate masonry and bootstrap.

Download