Bootstrap 4.5 产品网格 - HTML

Bootstrap是一种流行的前端框架，让开发者可以快速构建各种网页设计和应用程序。其中产品网格布局是非常常用的一个组件，让开发者能够快速构建出产品列表或产品展示页面。

基本用法

下面是一份基本的Bootstrap 4.5产品网格的HTML代码片段：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 1</h4>
                    <p class="card-text">This is a great product.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 2</h4>
                    <p class="card-text">This is another great product.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 3</h4>
                    <p class="card-text">Yet another great product.</p>
                </div>
            </div>
        </div>
    </div>
</div>

这段代码可以快速构建出一个三列的产品网格。

功能和示例

布局

产品网格组件是基于Bootstrap的栅格系统，它可以轻松地创建出不同列数的布局，比如：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Product list</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 1</h4>
                    <p class="card-text">This is a great product.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 2</h4>
                    <p class="card-text">This is another great product.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 3</h4>
                    <p class="card-text">Yet another great product.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 4</h4>
                    <p class="card-text">Another great product.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 5</h4>
                    <p class="card-text">The best product.</p>
                </div>
            </div>
        </div>
    </div>
</div>

这个例子展示了如何按列数排列不同的产品。

处理卡片

在产品网格中，每个产品通常是一个卡片。 在Bootstrap中，卡片由card类定义，内部又包含了card-header, card-body, 和 card-footer 类。下面是一个简单的卡片示例：

<div class="card mb-4 shadow-sm">
    <div class="card-header">
        <h4 class="my-0 font-weight-normal">Product</h4>
    </div>
    <div class="card-body">
        <h1 class="card-title pricing-card-title">$50
            <small class="text-muted">/ mo</small>
        </h1>
        <ul class="list-unstyled mt-3 mb-4">
            <li>Feature 1</li>
            <li>Feature 2</li>
            <li>Feature 3</li>
            <li>Feature 4</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Buy Now</button>
    </div>
</div>

动画

Bootstrap中的产品网格可以使用动画效果，如淡入(fade in)和zoom in：

<div class="col-md-4 animate__animated animate__fadeIn">
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h4 class="card-title">Product 1</h4>
            <p class="card-text">This is a great product.</p>
        </div>
    </div>
</div>
<div class="col-md-4 animate__animated animate__zoomIn">
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <h4 class="card-title">Product 2</h4>
            <p class="card-text">This is another great product.</p>
        </div>
    </div>
</div>

响应式

Bootstrap的网格布局具有响应式设计，可以适应各种设备和屏幕尺寸。

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 1</h4>
                    <p class="card-text">This is a great product.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="card mb-4 shadow-sm">
                <div class="card-body">
                    <h4 class="card-title">Product 2</h4>
                    <p class="card-text">This is another great product.</p>
                </div>
            </div>
        </div>
    </div>
</div>

这种布局允许您在小屏幕上呈现内容，并在大屏幕上使用更大的布局空间。