Bootstrap网站开发实战全套电子课件完整版ppt整本书电子教案最全教学教程.pptx

《Bootstrap网站开发实战全套电子课件完整版ppt整本书电子教案最全教学教程.pptx》由会员分享，可在线阅读，更多相关《Bootstrap网站开发实战全套电子课件完整版ppt整本书电子教案最全教学教程.pptx（122页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Bootstrap网站开发实战教学内容博客网站使用纯的bootstrap框架建站专题网站基于bootstrap框架定制前台网站后台管理网站基于bootstrap框架高级定制网站(含javascript插件)教学内容内容分析全局CSS样式组件JS插件个性化定制网站实例 学习文档： http:/ 结构！结构！Bootstrap起步-结构搭建02 目前常用的版本-Bootstrap3Bootstrap 是最受欢迎的是最受欢迎的 HTML、CSS 和和 JS 框架，用于框架，用于开发响应式布局、移动设备开发响应式布局、移动设备优先的优先的 WEB 项目。项目。下载 Bootstrap01 什么是boo

2、tstrap框架Bootstrap简洁、直观、强悍的前端简洁、直观、强悍的前端开发框架，让开发框架，让web开发更开发更迅速、简单。迅速、简单。03 可以做什么样的网站网站实例第一次课Bootstrap起步第一次课bootstrap起步结构第一次课bootstrap起步基本模板注意：三个文件的引入地址：1、bootstrap.min.css2、jquery.min.js3、bootstrap.min.js第一课bootstrap起步下载-jquery.min.js下载地址：https:/ 第一课bootstrap起步-框架安装成功第一课bootstrap起步-Bootstrap 框架的基本用法

3、https:/ 解。首页的分析结构如下图所示。首先需要建立bootstrap环境，搭建好bootstrap环境。1. 导航条的实现步骤1：新建index.html页面，登录到bootstrap官方网站https：/，选择组件-导航条，或者直接在浏览器中输入：https：/ 中。步骤2：根据效果图的文字内容，修改代码中的文字内 容。步骤3：登录到bootstrap官方网站https：/，选择组件-导航条-反色导航条，或者直接在浏览器中输入https：/ 果。步骤4：登录到bootstrap官方网站https：/，选择组件-导航条-固定在顶部。或者直接在浏览器中输入https：/ 果。请大家自己实

4、现-导航条2. 中间内容区域的实现 中间内容页面实现分栏栅格系统 步骤1：从项目效果图可以看出内容部分需要分成3栏。登录到bootstrap官方网站https：/，选择全局CSS样式-栅格系统，选择3栏的样式代码。如 图所示的标识部分。注意：一定要把row包在container这个类的div中。示例代码如 下： . 步骤2：修改代码中每一栏的宽度，具体代码如 下： 左侧 中间 右侧 步骤3：将最外面的布局元素.container修改为.container-fluid，就可以将固定宽度的栅格布局转换为100%宽度的布局。请大家登录官方网站https：/ 示。代码如下 左侧 中间 右侧 请大家自己

5、实现-分3栏3. 左侧列表的实现步骤1：登录到bootstrap官方网站https：/，选择组件-列表组，或者直接在浏览器中输入https：/ 域。代码如下 Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 中间 右侧 步骤2：根据效果图，修改代码内容，去掉第一项的active类。 热门博文 资源下载 文档翻译 请大家自己实现-左侧栏 4. 中间日志列表的实现步骤1：登录到bootstrap官方网站https：/，选择组件-面版，或者直接在浏览器中

6、输入https：/ Basic panel example 步骤2：登录到bootstrap官方网站https：/，选择组件-媒体对象，或者直接在浏览器中输入https：/ 容。代码如下： Python数据挖掘与分析 在实际应用中，待分析数据的来源类型可能是非常繁杂的 步骤3：登录到bootstrap官方网站https：/，选择全局CSS样式-栅格系统，或者直接在浏览器中输入https：/ 容。具体代码如 下： shineyu- 1天前 0步骤4：登录到bootstrap官方网站https：/，选择组件-Glyphicons字体图标，或者直接在浏览器中输入https：/ 中。代码如下： shi

7、neyu- 1天前 5 0用到的字体图标类名glyphicon-userglyphicon-eye-openglyphicon-pencil分页的实现步骤6：登录到bootstrap官方网站https：/，选择组件-分页，或者直接在浏览器中输入https：/ 1 (current) 2 3 4 5 5. 右侧内容步骤1：公告的实现。登录到bootstrap官方网站https：/，选择组件 -面版，带有标题的面版，或者直接在浏览器中输入https：/ Panel title Panel content 步骤2：登录到bootstrap官方网站https：/，选择组件-列表组，带有标题的面版，或者

8、直接在浏览器中输入https：/ 下： 公告 Panel content 发表文章现金奖励 步骤3：去掉.panel-body，面版标题会和表格连接起来，没有空隙。具体代码如 下： 公告 发表文章现金奖励 步骤4：名片和友情链接的实现步骤，与公告类似。这里就不详细介绍。分析如图所 示6. 尾部采用定制样式步骤1：尾部的HTML结构代码如 下： Copyright SHINE博客 | ICP备111号-2 步骤2：新建一个index.css样式，引入样 式。步骤3：自定义的index.css样式。代码如 下：.footer background: #111; font-size: 13px; t

9、ext-align: center; color: #555555; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #303030;7. 响应式的实现步骤1：登录到bootstrap官方网站https：/，选择全局CSS样式-响应式工具，或者直接在浏览器中输入https：/ 下：注意观察手机端和桌面端运行效果博文列表页面实现注意观察手机端和桌面端博文列表页面的导航条、尾部、响应式制作与首页一样。这里就不再详细介绍。复制相同的功能代码部分即可。只讲解内容部分的实现步骤。具体分析如图所 示。步骤1：新建document

10、.html页面。内容部分，分2栏。登录到bootstrap官方网站https：/，选择全局CSS样式-栅格系统，或者直接在浏览器中输入https：/ 下： 步骤2：内容部分左侧的效果如图所示。登录到bootstrap官方网站https：/，选择javascript插件-标签页，或者直接在浏览器中输入https：/ 码。具体代码片断如下：请大家按照所给出的代码片断，根据效果图完成“最新推荐”、“本周热门”、“本月热门”、“所有热门”完整的代码编 写。 如何建立个人博客 想必很多人都想建立一个 SHINE发布于 2017年3月18 19时24分 阅读 1980 对网站域名的选择 SHINE发布于

11、2017年3月18 19时24分 阅读 1980 策划和设计网站效果图 SHINE发布于 2017年3月18 19时24分 阅读 1980 步骤3：内容右侧效果如图所示。登录到bootstrap官方网站https：/，选择组件-列表组-徽章，或者直接在浏览器中输入https：/ 示。代码如下 博客模板分类 个人博客14 企业网站14 门户咨询14 商城网站14 品牌设计14 微信小程序14 分销系统14 微店小站14 下载中心页面的实现注意观察手机端和桌面端下载中心页面的导航条、尾部、右侧的列表、标签页、响应式制作与其它页面一样。1. 本站热门下载资源步骤1：新建download.html页面

12、。下载中心页面的整体结构如图所示。本站热门下载资源的整体结构如图所示。标题“本站热门下载资源”的内容结构如图所示。图文内容的结构如图所 示。步骤2：登录到bootstrap官方网站https：/，选择javascript组件-缩略图，或者直接在浏览器中输入https：/ 容。步骤3：根据效果图的文字内容，添加和修改对应的代码内容。2. 右侧搜索资源的表单步骤1：登录到bootstrap官方网站https：/，选择javascript全局CSS样式-表单，或者直接在浏览器中输入https：/ 示。 搜索资源步骤2：根据效果图的内容，修改代码样式。具体代码如 下：谢谢聆听！敬请批评指正项目二专题网

13、站页面效果展示请打开项目二的源代码，演示。请同学们注意观察超小屏幕端、手机端、平板端和桌面端导航条的实现步骤1：进入官方网站文档，选择组件导航条，复制导航条代码内容。请大家观察我们需要制作的导航条效果。这里我们不需要下拉菜单和右边的部分，如图的标识部分，所以需要去掉这部分代码 。. Link Dropdown Action Another action Something else here Separated link 步骤2：根据导航条效果图修改代码中导航条内容。这里需要修改的导航条代码部分使用粗体标记标出。将粗体标记的地方修改为效果图中对应的内容。需要修改的代码需要修改的代码效果图中对应

14、的内容代码效果图中对应的内容代码BrandLink (current)Link 首页 (current) 公司简介 解决方案 成功案例 步骤3：需要设置的样式是导航条颜色和固定到顶部，导航条内容居中。这里需要修改的导航条代码部分使用粗体标记标出。将粗体标记的地方修改为效果图中对应的内容（修改之后的代码部分使用粗体标记标出）。需要修改的代码需要修改的代码效果图中对应的内容代码效果图中对应的内容代码 步骤4：定制样式index.css。解决显示效果出现的问题1：logo图片比较靠下。这里需要新建一个index.css文件。在样式文件中编写代码，具体代码如 下：.navbar-brandpaddin

15、g:10px 15px;步骤5：修改导航条搜索模块。这里需要修改的导航条代码部分使用粗体标记标出。将黄色标记的地方修改为效果图中对应的内容（修改之后的代码部分使用粗体标记标出） Submit 需要修改的代码需要修改的代码效果图中对应的内容代码效果图中对应的内容代码 Submit go go 公司介绍主要使用的bootstrap框架是巨幕。公司介绍的实现步骤1：登录到bootstrap官方网站https：/，选择组件-巨幕，或者直接在浏览器中输入：https：/ 下： . 步骤2：定制样式index.css。解决显示效果问题：去掉巨幕和导航条之间的边距。具体样式代码如 下：.navbarmarg

16、in-bottom:0px;步骤3：定制样式index.css。设置巨幕Banner背景图片。具体样式代码如 下：.jumbotronbackground:url(./images/bg.jpg) center center no-repeat;步骤4：制作巨幕的内容，使用全局CSS3样式-栅格系统。具体代码如 下： 公司简介 GEMINITECH有限公司，我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队，为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务，集策划，设计，开发，营销服务于一体的新型互联网企业。步骤5：解决显示效果问题：公

17、司简介内容需要靠右边一点，使用bootstrap框架中的偏移。这里需要修改的代码部分使用黄色标记标出。将粗体标记的地方修改为效果图中对应的内容（修改之后的代码部分使用粗体标记标出）。需要修改的代码需要修改的代码效果图中对应的内容代码效果图中对应的内容代码步骤6：定制样式index.css。解决效果显示问题：图片底部对齐。具体样式代码如 下：.jumbotronbackground:url(./images/bg.jpg) center center no-repeat;padding:10px 0 0 0;步骤7：定制样式index.css。定制标题和文字内容的样式。具体样式代码如 下：标题样

18、式代 码：.banner-titlefont-size:24px;color:#ddfa52;line-height:1;margin-top:90px;文字内容样式代 码：.banner-detailfont-size:14px;color:#fff;line-height:28px;margin-top:20px;步骤8：制作巨幕的响应式。大屏幕的巨幕效果已经完成。现在需要制作中等屏幕、平板、手机端的效 果。中等屏幕(要考虑：排版响应式+图片响应式)，这里需要修改的代码部分使用粗体标记标出。具体代码如 下： 公司简介 GEMINITECH有限公司，我们作为创新型科技企业，拥有一个充满朝气，

19、高素质、年轻化、专业化的开发团队，为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务，集策划，设计，开发，营销服务于一体的新型互联网企业。平板和手机(图片不显示)，这里需要修改的代码部分使用黄色标记标出。具体代码如 下： 公司简介 GEMINITECH有限公司，我们作为创新型科技企业，拥有一个充满朝气，高素质、年轻化、专业化的开发团队，为公司蓬勃发展提供源源不断的活力与动力。我们致力于为企业提供中高端专属定制开发服务，集策划，设计，开发，营销服务于一体的新型互联网企业。解决方案主要使用的bootstrap框架是栅格系统、响应式，大部分效果需要定制样式。解决方案的

20、实现步骤1：解决方案内容。使用栅格系统制作。具体代码如 下：解决方案 主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓IT技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。步骤2：定制样式index.css。解决效果显示问题：灰色背景。具体样式代码如 下：.gray-bgbackground-color: #f2f2f2;步骤3：定制样式index.css。解决效果显示问题：巨幕banner下边距。粗体标识的代码是按照效果图修改后的代码。具体样式代码如 下：.jumbotronbackground:url(./ima

21、ges/bg.jpg) center center no-repeat;padding:10px 0 0 0;margin-bottom: 0px;步骤4：定制样式index.css。解决效果显示问题：定义标题和文字内容的样式。具体样式代码如 下：.common-title font-size:30px; color:#b5cd42; line-height:1; margin-top:45px;.common-detail font-size:14px; color:#7a7a7a; line-height:28px; margin-top:18px;步骤5：解决效果显示问题：文字居中，需要

22、在结构中使用栅格系统和偏移。粗体标识的代码是按照效果图修改后的代码。具体代码如 下：解决方案 主要从事互联网品牌建设与网络营销，专业领域包括网站建设，微信开发，网络营销，电子商务服务外包相关类别，并积极开拓IT技术在各个行业应用的咨询服务。致力于为用户提 供适合的解决方案。步骤6：网站建设这一区域效果如图所示。粗体标识的代码是按照效果图修改后的代 码。具体代码如 下： 网站建设 品牌展示网站、官方门户网站、营销网站建设、电商平台开发 为了方便定制样式，给每个div自定义一个类。粗体标识的代码是按照效果图修改后的代码。具体代码如 下： 网站建设 品牌展示网站、官方门户网站、营销网站建设、电商平台

23、开发 将上一步骤的内容复制6份，并按照效果图修改里面的文字内容。步骤7：定制样式index.css。解决效果显示问 题。解决效果显示问题1：定义上边距。具体样式代码如 下：.list-con margin-top:96px;解决效果显示问题2：定义图标。具体样式代码如下：.list-item height:112px; padding-left:138px; background:url(./images/icons.png) left top no-repeat; margin-bottom:39px;解决效果显示问题3：定义标题和文字内容。具体样式代码如 下：.list-item h3 f

24、ont-size:16px; color:#4e4e4e; font-weight:bold;.list-item p font-size:14px; color:#7a7a7a; line-height:28px;步骤8：解决大屏幕、中屏幕、平板、小屏幕效果显示问题：响应式。使用响应式工具。步骤9：修改图标，自定义样式。需要为每一个div定义一个类名。然后定制index.css。定制index.css。具体样式代码如 下：.list02 background-position: left -112px;.list03 background-position: left -224px;.lis

25、t04 background-position: left -336px;.list05 background-position: left -448px;.list06 background-position: left -560px;步骤1：成功案例的标题区域部分的效果与解决方案的效果样式一致。所以这部分代码可以复制解决方案的代码。只需要按照效果图修改代码的文字内容即可成功案例的实现步骤2：成功案例的图片列表部分，采用栅格系统制作。具体代码如 下： 步骤3：定制index.css。解决效果显示问 题。解决效果显示问题1：设置上边距。具体代码如 下：.case-listmargin-top:

26、75px;解决效果显示问题2：图片缩放。具体代码如 下：.case-list imgwidth:100%;步骤4：解决成功案例大屏幕、中屏幕、平板、小屏幕效果显示问题。使用全局CSS3样式-响应式工具。具体代码如 下： 步骤5：定制index.css。解决效果显示问 题。解决效果显示问题1：去掉图片的边距。具体样式代码如 下：.case-list .col-lg-3padding:0px;解决效果显示问题2：添加左右边距。粗体标识的代码是按照效果图修改后的代码。具体样式代码如 下：.case-listmargin-top:75px;padding-left:15px;padding-right

27、:15px;步骤6：定制index.css。自定义超小屏幕响应式样式。具体样式代码如 下：media(max-width:500px).case-list .col-xs-6 width:100%;步骤7：解决效果显示问题：制作遮罩文字。粗体标识的代码是按照效果图修改后的代码。具体代码如 下： 网站建设 品牌展示网站、官方门户网站、营销网站建设、电商平台开发 步骤8：定制index.css。使用定位，解决效果显示问题。粗体标识的代码是按照效果图修改后的代码。具体样式代码如 下：.case-list .col-lg-3padding:0px;position: relative;.case-li

28、st .col-lg-3 .maskposition:absolute;left:0px;top:0px;width:100%;height:100%;background-color:#b5cd42;color:#fff;padding:10px;display:none;.case-list .col-lg-3:hover .maskdisplay:block;步骤1：合作伙伴标题这部分效果和成功案例效果的基本结构一样。只需要按照效果图修改代码的文字内容即可。注意这部分的背景是蓝色，所以需要定制样式合作伙伴的实现步骤2：定制index.css。解决效果显示问 题。解决效果显示问题1：定义背

29、景。具体样式代码如 下：.blue-bgbackground-color:#2c8fba;解决效果显示问题2：定义文字。具体样式代码如下：.blue-bg .common-titlecolor:#fff;.blue-bg .common-detailcolor:#fff;步骤3：解决效果显示问题：图片排列。采用栅格系统。具体代码如 下： 步骤4：定制index.css。使用定位，解决效果显示问 题。解决效果显示问题1：引入图片样式。具体样式代码如 下：.logo-list adisplay:block;width:200px;height:180px;background:url(./imag

30、es/logos.png) left top no-repeat;margin:0 auto;解决效果显示问题2：图片排列居中。具体样式代码如 下：.logo-list .col-lg-2width:20%;解决效果显示问题3：图片定位。具体样式代码如 下：.logo-list .logo02background-position: left -180px;.logo-list .logo03background-position: left -360px;.logo-list .logo04background-position: left -540px;.logo-list .logo05

31、background-position: left -720px;步骤5：定制index.css。解决大屏幕、中屏幕、平板、小屏幕效果显示问题。采用全局CSS3样式-响应式工具。具体样式代码如 下：media(max-width:1200px).logo-list .col-lg-2width:33%;float:left;media(max-width:992px).logo-list .col-lg-2width:50%;float:left;media(max-width:768px).logo-list .col-lg-2width:100%;步骤6：定制index.css。使用定位，

32、解决效果显示问题：下边距。粗体标识的代码是按照效果图修改后的代码。具体样式代码如 下：.logo-listmargin-bottom: 40px;步骤1：内容结构的搭建，主要采用栅格系统。从项目效果图可以看出这部分内容分为4栏，每一栏的内容和结构完全一样，此处省略号处省去的是第2、3、4栏的内容和结构，因为此3部分的结构与粗体标识的结构一样，所以请大家自行复制三份，修改文字内容即可。具体代码结构如 下： 公司 关于我们 公司招聘 公司团队 版权 使用条款 隐私政策 联系我们 友情链接的实现步骤2：定制index.css。解决效果显示问 题。解决效果显示问题1：内容的上下边距离。具体样式代码如

33、下：.links-listmargin-top:72px;margin-bottom:72px;解决效果显示问题2：定义文字样式。具体样式代码如 下：.links-list dtfont-size:20px;color:#191919;line-height:1;margin-bottom: 10px;.links-list ddline-height: 30px;.links-list dd acolor:#a0a0a0;步骤3：解决大屏幕、中等屏幕、平板、小屏幕效果显示问题。从项目效果图可以看出大屏幕分为4栏，中等屏幕、平板和小屏幕分为2栏。技术实现采用栅格系统col-lg-3col-md

34、-6col-sm-6col-xs-6来实现结构 尾部版权部分，主要采用定制index.css样式。结构采用栅格系统。尾部版权的实现步骤1：采用栅格系统和全局CSS3样式中的响应式工具，来布局结构。具体代码如 下： 2017 Comlogo.All Rights Reserved. HOME ABOUT US FAP CONTACT US /步骤2：定制index.css。解决显示效果问题。具体样式代码如 下：.dark-bgbackground-color: #2e2e2e;border-top:5px solid #2994bf;.footermin-height:82px;.footer

35、.text-leftcolor:#fff;line-height:82px;.footer .text-rightline-height: 82px;.footer .text-right acolor:#fff;padding-left:10px;步骤3：定制index.css。解决小屏幕显示效果问题。具体样式代码如 下：media(max-width: 768px).footer .text-leftline-height:60px;.footer .text-right text-align:left; line-height:20px; margin-bottom:15px;.foot

36、er .text-right apadding-left:0px;padding-right:10px;谢谢聆听！敬请批评指正项目三后台管理页面页面效果展示请打开项目三的源代码，演示。请同学们注意观察手机端和桌面端后台首页的实现后台首页主要分为导航条、警告框、网站统计、网站热贴、今日访客统计、服务器状态、团队留言板、发表留言、团队联系方式以及尾部1. 导航条步骤1：建立后台首页index.html。导航条基本内容搭建。选择官方文档-组件-导航条，复制导航条代码，并根据效果图修改相关代码内容。这里只列出修要修改的代码部分。如表所 示。序号序号根据效果图修改好的代码部分根据效果图修改好的代码部分1

37、COMO Admin2 后台首页 (current) 用户管理 内容管理 标签管理 3 admin 前台首页 个人主页 个人设置 账户中心 我的收藏 退出 步骤2：导航条图标样式的设置。选择官方文档-组件-Glyphicons字体图标（查找对应字体图标）。根据效果图修改相关代码内容。这里只列出修要修改的代码部分。序号序号根据效果图修改好的代码部分根据效果图修改好的代码部分1   后台首页 (current)  用户管理   内容管理   标签管理 2  前台首页   个人主页

38、    个人设置    账户中心   我的收藏 3  退出步骤3：搭建其他页面。在导航条中设置其它三个页面的超链接。新建三个页面，分别为：用户管理页面user_list.html，内容管理页面content.html，标签管理页面tag.html。根据效果图修改相关代码内容。这里只列出修要修改的代码部分。序号序号根据效果图修改好的代码部分根据效果图修改好的代码部分1   后台首页 2  用户管理3   内容管理4  标签管理 2. 后台

39、界面警告框制作步骤1：利用栅格系统制作一个一行一列的容器。具体代码如 下：步骤2：登录到bootstrap官方网站https：/，选择javascript插件-警告框，或者直接在浏览器中输入https：/ 下： Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit

40、amet fermentum. Take this action Or do this 步骤3：根据效果图修改代码的文字内容。具体代码如 下： 网站存在漏洞，急需修复！ 当前版本程序版本太低,存在严重安全问题，容易造成攻击，请即可修复！ 立即修复 稍后处理 步骤4：制作事件处理动作，鼠标点击“稍后处理”，关闭警告 框。为关闭按钮添加data-dismiss=alert属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从DOM中删除。具体代码如 下：稍后处理3. 后台界面网站统计数据和热帖制作步骤1：网站统计数据和网站热帖这两部分内容，需要采用栅格系统分2栏。具体代码结构如 下：步骤2

41、：为网站统计数据和网站热帖这两部分内容，添加面版。选择官方文档-组件-面版，选取带标题面版，复制代码。代码结构如 下： Panel heading without title Panel content 步骤3：根据网站统计数据和网站热帖这两部分内容的效果图，修改代码内容。需要修改的代码如 下： Panel heading without title Panel content Panel heading without title Panel content 步骤4：后台界面网站统计数据。登录到bootstrap官方网站https：/，选择全局CSS样式表格，或者直接在浏览器中输入https

42、：/ 码。步骤5：根据后台界面网站统计数据效果图的内容，修改代码内容。修改后的代码如 下： 统计项目今日 昨日 注册会员200 400 登录会员41005112 今日发帖15404511 转载次数150110 步骤6：网站热帖制作。选择官方文档组件列表组。复制代码。具体代码如 下： Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 步骤7：根据网站热帖的效果样式，修改样式。如果没有.panel-body，面版标题会和表格连接起来，没有空隙。去掉代

43、码： Panel content 步骤8：根据网站热帖效果图的内容，修改代码内容。省略部分的代码和粗体标识代码一样，复制代码即可。修改后的部分代码结构如 下： 网站热帖   发挥特长 迅速反应 多语种输出助力国际战“疫”2015/08/08 4. 后台界面今日访客统计图表制作今日访客统计图表制作需要用到图标插件chart.js。图表插件的使用方法如 下：请登陆到网站：http：/ s。在index.html文件中引入chart.j s。引入画布。代码如下：粗体标识部分为要引入的画 布。 今日访客统计 引入写好的js文件。代码如 下：5. 后台界面服务器状态进度条制作步骤1：

44、根据服务器状态进度条效果图，需要用栅格系统和面版。具体代码如 下： 服务器状态 步骤2：进度条制作。登录到bootstrap官方网站https：/，选择组件 -进度条，或者直接在浏览器中输入https：/ 码。步骤3：根据后台界面服务器状态进度条效果图的内容，修改代码内容。修改后的代码如 下： 内存使用率：40% 数据库使用率：20% 磁盘使用率：60% CPU使用率：80%6. 团队留言板步骤1：根据团队留言板这部分内容的比例，使用栅格系统。具体代码如 下： 团队留言板 步骤2：根据团队留言板效果图，使用组件媒体对象。选择合适的媒体对象效果样式，复制代 码。步骤3：根据团队留言板效果图的内容

45、，修改代码内容，并将相同的内容代码复制3份。具体代码如 下： 李哥阿文，今晚需要加班，升级网站程序，网站发现漏 洞！ 步骤4：把Well用在元素上，就能有嵌入（inset）的简单效果。需要给类media，再加上一个well类。代码如 下：步骤5：新建一个index.css样式，定制index.css样式。解决效果显示问题：图标变小。样式代码如 下：.whwidth: 64px;height: 64px;border-radius:50% ;步骤6：在媒体对象中，使用well类，设置对齐方式，使用.wh类。具体代码如 下： 李哥阿文，今晚需要加班,升级网站程序，网站发现漏洞！7. 留言表单的制作

46、步骤1：选择官网-全局CSS样式-表单。选取一种合适的表单效果样式。复制代码，并根据留言表单效果修改内容。具体代码如 下：输入留言内容留言步骤2：定制index.css。定义样式mar，解决效果显示问题：上边距。样式代码如 下：.marmargin-top: 15px;8. 团队联系方式的制作步骤1：根据团队联系方式的效果图和文字内容，采用组件-面版和列表组。这里还需要组件-图标。具体代码如 下：团队联系方式 站长(李大哥)：   13435797092技术(阿文哥)：   13435797092推广(阿强哥)：   13435797

47、092客服(阿敏姐)：   13435797092    0760-888888 9. 尾部的制作步骤尾部效果和样式制作比较简单。具体代码如 下： C o p y r i g h t & n b s p ; & n b s p ; 2 0 1 9 -2020     ICP备1300号-4 定制index.css。自定义样式代码如下：footerfont-weight: 400;text-align: center;padding:20px ;步骤1：新建user_list.html页面。根据用

48、户列表页面效果图，采用栅格系统分2栏。具体代码如 下： 用户列表页的实现步骤2：根据左侧导航效果图，采用组件-列表链接效果样式。复制链接效果样式代码，并根据左侧导航效果图文字内容，修改代码。具体代码如 下：用户管理用户搜索添加用户步骤3：右侧内容部分标题“用户管理”的实现。根据效果图，标题使用bootstrap组件页头来实现。页头的代码可以参看bootstrap官方网站登陆地址：https：/ 下： 用户管理 定制标题样式代码如下：.page-headermargin-top: 0;.page-header h1margin: 0;font-size: 16px;步骤5：用户列表项的实现。从项

49、目效果图可以看出，用户列表内容是标签页的内容，标签页的内容为表格。登录到bootstrap官方网站https：/，选择全局CSS3样式-表格，或者直接在浏览器中输入https：/ 下： Optional table caption. ID 用户名邮箱 操作 1 张 三操作 步骤6：用户列表项操作功能的实现。从项目效果图可以看出，采用组件-下拉菜单来实现。登录到bootstrap官方网站https：/，选择组件-下拉菜单，或者直接在浏览器中输入https：/ 下： ID用户名邮箱 操作 1 张三 操作编辑删除锁定修改密码 步骤6：用户列表项操作功能的实现。从项目效果图可以看出，采用组件-下拉菜单

50、来实现。登录到bootstrap官方网站https：/，选择组件-下拉菜单，或者直接在浏览器中输入https：/ 下： ID用户名邮箱 操作 1 张三 操作编辑删除锁定修改密码 步骤8：左侧导航页面链接修改。具体代码如 下： 用户列表 用户搜索 添加用户 步骤1：新建user-search.html页面。登录到bootstrap官方网站https：/，选择局CSS样式表单，或者直接在浏览器中输入https：/ 下：用户名UID选择用户组限制会员 新手上路注册会员 中级会员高级会员 提交用户搜索的实现步骤2：添加提示内容：“技巧提示”。登录到bootstrap官方网站https：/，选择组件警告