Bootstrap4 教程

<div class="container mt-5">
    <!-- 标题 -->
    <h1 class="text-center mb-4">Bootstrap 特色示例</h1>

    <!-- 网格系统 -->
    <div class="row">
        <!-- 左侧卡片 -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <img src="https://kaicz.com/uploads/20250304/20250304101901.jpeg" class="card-img-top" alt="示例图片">
                <div class="card-body">
                    <h5 class="card-title">卡片标题</h5>
                    <p class="card-text">这是一个使用 Bootstrap 卡片组件的示例。卡片可以包含图片、标题和文本。</p>
                    <a href="#" class="btn btn-primary">了解更多</a>
                </div>
            </div>
        </div>

        <!-- 右侧内容 -->
        <div class="col-md-6">
            <h2>响应式布局</h2>
            <p>Bootstrap 的网格系统可以轻松创建响应式布局。调整浏览器窗口大小，查看布局如何自动适应屏幕尺寸。</p>
            <button type="button" class="btn btn-success">成功按钮</button>
            <button type="button" class="btn btn-danger">危险按钮</button>
            <button type="button" class="btn btn-warning">警告按钮</button>
        </div>
    </div>

    <!-- 提示框 -->
    <div class="alert alert-info mt-4" role="alert">
        <strong>提示：</strong> 这是一个 Bootstrap 的提示框组件，用于显示重要信息。
    </div>
</div>