Web前端开发—jQuery-Bootstrap07-项目7-制作在线书城后台用户信息管理页面.pptxVIP

授课教师：时间：XX年XX月

全书目录项目1制作在线书城后台登录页面项目2制作在线书城后台首页导航菜单页面项目3制作在线书城后台图书类别管理页面项目4制作在线书城后台添加图书页面项目5制作在线书城后台图书列表页面项目6完善在线书城后台图书列表页面项目7制作在线书城后台用户信息管理页面项目8制作在线书城后台数据分析页面项目9制作在线书城前台页面

项目7制作在线书城后台用户信息管理页面

项目7制作在线书城后台用户信息管理页面7.1Bootstrap概述7.2Bootstrap网格系统7.3Bootstrap中的基本样式

1．养成良好的开发习惯，增强规范意识。2．提高审美素养，增强文化包容度。素养目标1．熟悉Bootstrap的概念和特点。2．掌握Bootstrap的获取和引入。3．掌握Bootstrap网格系统的概念、基本用法和列布局。4．掌握Bootstrap中的基本样式，包括标题、文本、列表、图片、图文框、表格和辅助样式。知识目标1．能够在网页中引入Bootstrap。2．能够利用Bootstrap的网格系统完成响应式页面布局。3．能够使用Bootstrap的基本样式制作美观的页面。技能目标

小王,在线书城后台的图书列表页面完善好了,接下来制作用户信息管理页面吧。点击跳过情境好的。Bootstrap是个开源的前端框架,能够快速构建网页界面,我们就用Bootstrap制作用户信息管理页面吧。可以。

接到任务后，小王着手进行分析，分析后得到，用户信息管理页面分为用户列表页面和添加用户页面，要制作用户信息管理页面，就需要先修改服务器，添加客户端获取用户信息和添加用户的接口；然后利用Bootstrap布局用户列表页面，利用jQuery实现从服务器获取用户信息并将其显示在表格中；最后利用Bootstrap布局添加用户页面，利用jQuery实现单击“提交”按钮后向服务器发送请求，提交新的用户信息并返回用户列表页面，单击“返回”按钮后返回用户列表页面。为了顺利完成用户信息管理页面的制作，小王决定先学习Bootstrap的相关知识，包括Bootstrap概述、Bootstrap网格系统和Bootstrap中的基本样式。

Bootstrap概述7.1

Bootstrap是由Twitter公司的设计师MarkOtto和JacobThornton合作开发的一款基于HTML、CSS和JavaScript的开源前端框架，旨在简化Web前端开发流程，使开发人员能够更高效地构建响应式和适配移动设备的网页。

（1）网格系统通过行和列来组织页面布局，且支持多种尺寸的视口，确保网页在不同设备上都能呈现良好的显示效果。（2）基本样式Bootstrap预定义了大量的CSS类，以帮助开发人员设置基本HTML元素（如标题、文本、列表、图片等）的样式。（3）UI组件预定义了丰富且可复用的UI组件，开发人员可以直接利用HTML元素和CSS类快速创建常见的网页元素，从而提高开发效率。（4）JavaScript插件提供一系列能够实现丰富交互功能的JavaScript插件，可为网页添加动态效果和交互功能，使用户能够更加便捷地操作网页。

响应式设计采用响应式布局，自动适配不同的设备，确保网页在各种屏幕尺寸下都能呈现良好的视觉效果。1移动设备优先能够确保网页在移动设备上呈现良好的效果，同时也有助于提升网页的加载速度和性能表现。2丰富的组件和CSS样式开发人员通过简单地引入这些组件和CSS样式，可以快速构建符合现代设计标准的网页。3详细易用的文档Bootstrap?拥有详细且易于理解的文档，文档包含了每个组件和?CSS?样式的详细说明和示例。4活跃的社区支持拥有庞大且活跃的社区支持，开发人员可以通过社区论坛、GitHub?等平台获取帮助、分享经验，加快自己的学习和成长速度。5

1．获取jQueryUI插件步骤1在浏览器的地址栏中输入“”并按“Enter”键，进入Bootstrap官方网站的首页，在右上角的版本下拉列表中选择“v4.6.x”选项，如图1所示。图1步骤2进入Bootstrap4的详情页面，在左侧列表中选择“Download”选项，然后在右侧单击“Download”按钮（见图2），下载Bootstrap。图2解压下载完成的压缩文件“bootstrap-4.6.2-dist.zi”。步骤3

2．引入Bootstrap使用Bootstrap进行Web前端开发时，需要在网页中引入Bootstrap，即在相应的HTML文档中使用link标签链接解压后“css”文件夹中的BootstrapCSS样式文件“bootstrap.min.css”，使用script标签引入解压后“js”文件夹中的Bootstrap文件“bo