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

本文来自企鹅号 - ITBegin媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏debugeeker的专栏

《coredump问题原理探究》windows版7.2节list

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

9320
来自专栏Android开发指南

Android如何缩减APK包大小

31250
来自专栏DeveWork

解决WordPress文章密码保护在首页(摘要)不起作用

如果你碰到这个问题,就说明你的主题还不够完善。是的,之前Devework主题也是这样,但现在已经修复了。这类问题都是,首页的文章上如果是摘要显示的或者截断输出的...

29980
来自专栏深度学习思考者

机器学习特征提取 | 自动特征工程featuretools

1、什么是Featuretools? 为了能使框架普适,就像pandas用于数据准备或scikit-learn用于机器学习。 链接:https://www.fe...

40150
来自专栏林德熙的博客

C# 使用转换语义版本号

本文告诉大家如何转换语义版本号,那么什么是语义版本号,语义版本号(semantic version)就是版本号带 alpha 等的版本号

13110
来自专栏目标检测和深度学习

tesseract-ocr识别英文和中文图片文字以及扫描图片实例讲解

41320
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版3.4节coredump例子

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

10210
来自专栏AI研习社

Github 项目推荐 | TensorFlow 项目模板架构最佳实践

一个简单且设计良好的架构对于任何深度学习项目来讲非常有必要,这里的 Tensorflow 项目模板经过了大量的实践,拥有简单性、良好的文件结构以及 OOP 设计...

53770
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版6.4节单继承

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

8510
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版7.4节set

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

7410

扫码关注云+社区

领取腾讯云代金券