使用 JavaScript 动态生成 Bootstrap 卡片-js教程-PHP中文网

使用 JavaScript 动态生成 Bootstrap 卡片

碧海醫心

发布： 2025-08-30 15:37:01

原创

778人浏览过

使用 javascript 动态生成 bootstrap 卡片

本文旨在指导开发者如何利用 JavaScript 动态生成 Bootstrap 卡片，从而更美观、结构化地展示从 API 获取的数据。通过本文，你将学会如何创建包含图片、标题、地址等信息的 Bootstrap 卡片，并将其动态添加到页面中。文章提供详细的代码示例，帮助你快速掌握这一技巧，并将其应用到实际项目中。

在前端开发中，经常需要从 API 获取数据，并将其动态地渲染到页面上。Bootstrap 框架提供了丰富的组件，其中卡片（Card）组件非常适合用来展示结构化的信息。本文将介绍如何使用 JavaScript 动态生成 Bootstrap 卡片，以更优雅地展示数据。

创建 Bootstrap 卡片结构

Bootstrap 卡片的基本结构如下：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

登录后复制

要使用 JavaScript 动态生成这样的结构，我们需要创建相应的 HTML 元素，并添加 Bootstrap 提供的 CSS 类。

立即学习“Java免费学习笔记（深入）”；

JavaScript 代码实现

假设我们从 API 获取到以下数据结构：

Cardify卡片工坊

使用Markdown一键生成精美的小红书知识卡片

查看详情

const restaurant = {
  name: "美味餐厅",
  imageUrl: "https://example.com/restaurant.jpg",
  address: "北京市朝阳区",
  distance: "1公里",
  rating: 4.5
};

登录后复制

以下代码演示了如何使用 JavaScript 将该数据渲染成 Bootstrap 卡片：

function createRestaurantCard(restaurant) {
  // 创建卡片容器
  const cardElement = document.createElement("div");
  cardElement.className = "card";
  cardElement.style.width = "18rem"; // 设置卡片宽度，可根据需要调整

  // 创建图片元素
  const imageElement = document.createElement("img");
  imageElement.src = restaurant.imageUrl;
  imageElement.className = "card-img-top";
  imageElement.alt = restaurant.name;

  // 创建卡片主体容器
  const cardBodyElement = document.createElement("div");
  cardBodyElement.className = "card-body";

  // 创建标题元素
  const titleElement = document.createElement("h5");
  titleElement.className = "card-title";
  titleElement.innerText = restaurant.name;

  // 创建地址元素
  const addressElement = document.createElement("p");
  addressElement.className = "card-text";
  addressElement.innerText = `地址：${restaurant.address}`;

  // 创建距离元素
  const distanceElement = document.createElement("p");
  distanceElement.className = "card-text";
  distanceElement.innerText = `距离：${restaurant.distance}`;

    // 创建评分元素
  const ratingElement = document.createElement("p");
  ratingElement.className = "card-text";
  ratingElement.innerText = `评分：${restaurant.rating} 星`;

  // 将元素添加到卡片主体
  cardBodyElement.appendChild(titleElement);
  cardBodyElement.appendChild(addressElement);
  cardBodyElement.appendChild(distanceElement);
  cardBodyElement.appendChild(ratingElement);

  // 将图片和卡片主体添加到卡片容器
  cardElement.appendChild(imageElement);
  cardElement.appendChild(cardBodyElement);

  return cardElement;
}

// 获取结果容器
const resultsContainer = document.getElementById("results-container");

// 创建卡片并添加到容器
const card = createRestaurantCard(restaurant);
resultsContainer.appendChild(card);

登录后复制

代码解释：

createRestaurantCard(restaurant) 函数： 接收餐厅数据作为参数，用于创建单个卡片。
document.createElement()： 用于创建 HTML 元素。
element.className： 用于设置元素的 CSS 类，使用 Bootstrap 提供的类名。
element.innerText： 用于设置元素的文本内容。
element.appendChild()： 用于将元素添加到另一个元素中。
获取结果容器： 通过 document.getElementById("results-container") 获取页面上用于显示结果的容器元素。
创建卡片并添加到容器： 调用 createRestaurantCard() 函数创建卡片，然后使用 appendChild() 将卡片添加到结果容器中。

动态生成多个卡片

如果需要动态生成多个卡片，可以遍历 API 返回的数据数组，为每个数据项调用 createRestaurantCard() 函数，并将生成的卡片添加到结果容器中。

const restaurants = [
  { name: "餐厅1", imageUrl: "...", address: "...", distance: "...", rating: 4.0 },
  { name: "餐厅2", imageUrl: "...", address: "...", distance: "...", rating: 4.5 },
  { name: "餐厅3", imageUrl: "...", address: "...", distance: "...", rating: 5.0 }
];

restaurants.forEach(restaurant => {
  const card = createRestaurantCard(restaurant);
  resultsContainer.appendChild(card);
});

登录后复制

注意事项

确保已经引入 Bootstrap 的 CSS 文件。
根据实际数据结构修改 createRestaurantCard() 函数中的代码。
可以根据需要自定义卡片的样式，例如设置背景颜色、字体颜色等。
如果图片加载失败，可以设置默认图片。
可以添加更多的信息到卡片中，例如电话号码、营业时间等。

总结

通过本文，你学会了如何使用 JavaScript 动态生成 Bootstrap 卡片，并将数据渲染到页面上。这种方法可以让你更灵活地控制页面的内容和样式，从而提升用户体验。在实际项目中，可以根据需要进行修改和扩展，以满足不同的需求。

以上就是使用 JavaScript 动态生成 Bootstrap 卡片的详细内容，更多请关注php中文网其它相关文章！