Bootstrap项目实训干货：设计带修改和删除的图书表格
# 一、实验目标
写一个带修改和删除的表格。页面如下:
# 二、环境依赖
采用bootstrap框架来实现，依赖的版本为3.3.7。
我们可以直接引用cdn的资源，资源地址如下：
修改和删除按钮会弹出模态框，需要依赖下列两个js:
**环境准备**
平台已经提供了实验的html、css文件。
# 三、实验知识
点击按钮弹出模态框，需要用到data-toggle和data-target。
data-target表示要弹出的模态框的id，每个模态框都有自己的id。
# 四、实验步骤：
打开src/main/webapp/index.html
1.编写容器，使table左右留出一些间距
2.编写table标签,
table-striped带条纹的表格。
3.编写表头和表体
4.编写修改模态框
代码如下:
div的class为"modal",表示是模态框，fade表示模态框显示的动画。id必须分配，用于标识模态框，按钮也需要用此id来绑定。
5.编写修改模态框头
代码如下:
模态框的头主要是标题和关闭按钮。
6.编写修改模态框的体
代码如下:
7.编写修改模态框的底部
代码如下:
8.编写删除模态框
代码如下:
**运行项目**
点击项目运行按钮，一直等到项目成功启动，点击项目网站，将显示网站的首页。如果未显示首页，可点击网址右边的刷新按钮。点击修改或删除，将弹出模态框。
完整代码链接：https://www.itbegin.com/apps/mooc/8d5e9f3e9a334c0d97dc71a3b1d7f92d?inviter=tx
- 发表于:
- 原文链接：http://kuaibao.qq.com/s/20180118A0MXSQ00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
