正文

从零开始：Bootstrap 实战增删改查完整源码教程与实例分析

/0 浏览量
0404

在Web开发中，Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动设备优先的网站。本文将带您从零开始，学习如何使用 Bootstrap 实现一个简单的增删改查（CRUD）功能，并提供完整的源码和实例分析。

一、准备工作

在开始之前，请确保您的开发环境中已经安装了以下工具：

  • HTML: 用于构建网页结构。
  • CSS: 用于美化网页样式。
  • JavaScript: 用于实现动态交互。
  • Bootstrap: 用于快速搭建页面布局。

您可以从 Bootstrap 官网 下载最新版本的 Bootstrap。

二、创建项目结构

创建一个新文件夹作为项目根目录，并在其中创建以下文件：

  • index.html: 网页入口文件。
  • style.css: 网页样式文件。
  • script.js: 网页脚本文件。

三、编写HTML结构

在 index.html 文件中，首先引入 Bootstrap 样式和 JavaScript 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap CRUD 实例</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

  <!-- CRUD 表格 -->
  <div class="container">
    <h2>Bootstrap CRUD 实例</h2>
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="data-table">
        <!-- 数据行将在此处动态插入 -->
      </tbody>
    </table>
    <!-- 添加按钮 -->
    <button type="button" class="btn btn-primary" onclick="addData()">添加数据</button>
  </div>

  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

四、编写CSS样式

在 style.css 文件中，添加以下样式：

/* 自定义样式 */
.container {
  margin-top: 50px;
}

五、编写JavaScript脚本

在 script.js 文件中，编写以下脚本：

// 数据数组
var dataList = [];

// 初始化数据
function initData() {
  // 这里可以添加一些示例数据
  dataList.push({ id: 1, name: '张三', age: 20 });
  dataList.push({ id: 2, name: '李四', age: 22 });
  renderTable();
}

// 渲染表格
function renderTable() {
  var tbody = document.getElementById('data-table');
  tbody.innerHTML = '';
  for (var i = 0; i < dataList.length; i++) {
    var tr = document.createElement('tr');
    tr.innerHTML = `
      <td>${dataList[i].id}</td>
      <td>${dataList[i].name}</td>
      <td>${dataList[i].age}</td>
      <td>
        <button type="button" class="btn btn-danger btn-sm" onclick="deleteData(${dataList[i].id})">删除</button>
      </td>
    `;
    tbody.appendChild(tr);
  }
}

// 添加数据
function addData() {
  var id = dataList.length + 1;
  var name = prompt('请输入姓名：');
  var age = prompt('请输入年龄：');
  dataList.push({ id: id, name: name, age: age });
  renderTable();
}

// 删除数据
function deleteData(id) {
  for (var i = 0; i < dataList.length; i++) {
    if (dataList[i].id === id) {
      dataList.splice(i, 1);
      break;
    }
  }
  renderTable();
}

// 页面加载完成后初始化数据
window.onload = function() {
  initData();
};

六、实例分析

  1. HTML 结构: 使用 Bootstrap 的表格组件构建了一个 CRUD 表格，包括编号、姓名、年龄和操作列。
  2. CSS 样式: 对容器进行了简单的样式设置，使其具有顶部边距。
  3. JavaScript 脚本:
    • dataList 数组用于存储数据。
    • initData 函数用于初始化数据，这里添加了两个示例数据。
    • renderTable 函数用于渲染表格，将 dataList 中的数据动态插入到表格中。
    • addData 函数用于添加数据，通过弹窗获取用户输入，并将数据添加到 dataList 数组中。
    • deleteData 函数用于删除数据，通过遍历 dataList 数组找到要删除的数据，并将其从数组中移除。
    • window.onload 函数用于页面加载完成后初始化数据。

七、总结

本文从零开始，介绍了如何使用 Bootstrap 实现一个简单的增删改查功能。通过本文的学习，您可以了解到：

  • Bootstrap 框架的基本用法。
  • HTML、CSS 和 JavaScript 的基本知识。
  • 如何使用 JavaScript 实现增删改查功能。

希望本文能对您有所帮助！

-- 展开阅读全文 --