基于bootstrap，vue，jquery的前端列表、表格＜tr＞＜td＞展示

本文链接：https://blog.csdn.net/Who_Talk_To/article/details/126515154

本文介绍了如何结合bootstrap、vue.js和jquery来实现一个前端列表和表格的展示。通过引入vue和jquery支持，实现了数据驱动的列表刷新，并利用bootstrap实现了多终端自适应布局。内容包括html、css和js代码示例，以及不同设备的界面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录：html部分：

css部分：

js部分：

前几天帮朋友开发一个基于javaweb的图书管理系统，由于没有很好用的列表、表格<tr><td>，因此自己动手写了一个满足自己使用，基于bootstrap，vue，jquery的前端列表展示，bootstrap可以多终端自适应，vue是基于数据端刷新js，jquery在主要运用Ajax，jquery在此功能中未使用。

html代码:

1.效果图：如下展示：调试界面展示。

PC端界面展示。

手机端展示。

2.代码：

2.1 html头文件引入：

1>.添加vue支持： <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>；

2>.添加JQuery支持： <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>；

3>.添加Bootstrap 支持： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" crossorigin="anonymous">；

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">；