Hey there! Let's walk through how to build those Bootstrap-styled divs and the prize list you're needing. I'll keep this practical with code examples you can copy-paste and adjust easily.

第一步：先引入 Bootstrap #

First up, make sure you've got Bootstrap's CSS (and optional JS for interactive components) loaded in your project. The easiest way is using the CDN links:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Optional Bootstrap JS (for dropdowns, modals, etc.) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

第二步：实现自定义样式的 Div #

Assuming you want a flexible, styled container (like a highlighted box, card, or section), here's a versatile example using Bootstrap's utility classes. This div has rounded corners, soft shadow, padding, and a custom background:

<div class="container my-4 p-4 bg-light rounded-3 shadow-sm">
  <h3 class="text-primary">自定义样式容器</h3>
  <p>这是一个用 Bootstrap 工具类快速实现的带样式的 div，你可以根据需求调整类名：</p>
  <ul>
    <li>用 <code>bg-*</code> 类修改背景色（比如 <code>bg-primary</code>、<code>bg-warning</code>）</li>
    <li>用 <code>p-*</code> 调整内边距（<code>p-2</code> 到 <code>p-5</code>）</li>
    <li>用 <code>shadow-*</code> 控制阴影强度（<code>shadow</code>、<code>shadow-lg</code>）</li>
    <li>用 <code>rounded-*</code> 调整圆角大小（<code>rounded</code>、<code>rounded-pill</code>）</li>
  </ul>
</div>

第三步：实现奖品列表 Div #

I'll go with a common card-based grid layout that's responsive (adapts to mobile/desktop) since you mentioned referencing a prize list style. This includes prize images, titles, descriptions, and level badges:

<div class="container my-5">
  <h2 class="text-center mb-4">奖品列表</h2>
  <div class="row g-4">
    <!-- 奖品 1 -->
    <div class="col-md-4 col-sm-6">
      <div class="card h-100">
        <img src="prize-1.jpg" class="card-img-top" alt="一等奖：平板电脑">
        <div class="card-body">
          <span class="badge bg-danger mb-2">一等奖</span>
          <h5 class="card-title">平板电脑</h5>
          <p class="card-text">最新款10英寸平板，支持手写笔，办公娱乐两不误。</p>
        </div>
        <div class="card-footer text-center">
          <small class="text-muted">限量1份</small>
        </div>
      </div>
    </div>

    <!-- 奖品 2 -->
    <div class="col-md-4 col-sm-6">
      <div class="card h-100">
        <img src="prize-2.jpg" class="card-img-top" alt="二等奖：无线耳机">
        <div class="card-body">
          <span class="badge bg-warning mb-2">二等奖</span>
          <h5 class="card-title">无线降噪耳机</h5>
          <p class="card-text">主动降噪技术，续航24小时，舒适佩戴。</p>
        </div>
        <div class="card-footer text-center">
          <small class="text-muted">限量3份</small>
        </div>
      </div>
    </div>

    <!-- 奖品 3 -->
    <div class="col-md-4 col-sm-6">
      <div class="card h-100">
        <img src="prize-3.jpg" class="card-img-top" alt="三等奖：定制保温杯">
        <div class="card-body">
          <span class="badge bg-success mb-2">三等奖</span>
          <h5 class="card-title">定制保温杯</h5>
          <p class="card-text">316不锈钢材质，长效保温，可刻专属logo。</p>
        </div>
        <div class="card-footer text-center">
          <small class="text-muted">限量10份</small>
        </div>
      </div>
    </div>
  </div>
</div>

关键说明： #

• 响应式布局：row + col-md-4 col-sm-6 实现适配：桌面每行3个奖品，平板每行2个，手机每行1个。
• 统一卡片高度：h-100 类让所有卡片高度一致，避免布局错乱。
• 自定义调整：
  • 替换 src 属性里的图片路径为你的奖品图。
  • 修改 badge 的 bg-* 类来改变奖品等级的颜色。
  • 调整 my-*、mb-* 类来控制元素之间的间距。

额外个性化技巧 #

If you want to add unique effects, just add custom CSS after Bootstrap's stylesheet:

/* 自定义卡片 hover 动效 */
.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

内容的提问来源于stack exchange，提问作者LaraJack