《项目4任务4ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目4任务4ppt课件.pptx（19页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、项目4任务4项目4 使用Bootstrap开源框架快速搭建响应式网页任务4.4 使用Bootstrap组件和JS插件制作网页内容和交互HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS0102学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾任务拓展01 1、能够学习Bootstrap的缩略图、巨幕、表单、表格等相关组件，完成网页页面元素的制作； 2、能够学习Bootstrap的JavaScript插件相关内容，完成网页滚动监听等交互的制作。02 本次任务要求在完成导航条制作的基础上，继续完成接下来的网页内容。学习 1、Bootstrap的缩略图、巨
2、幕、表单、表格等相关组件； 2、Bootstrap的滚动监听、轮播和模态框（弹出框）等相关JavaScript插件；完成 1、网页Banner广告、招生计划、专业介绍、实训环境、优秀毕业生、联系我们和版权几个栏目内容的制作； 2、菜单栏滚动监听的制作。04知识学习与课堂练习 如果你把我们要完成的网页与Bootstrap的组件效果进行对比，你会发现，为完成接下来的任务，我们需要学习如下Bootstrap知识： 1、缩略图组件 Bootstrap的缩略图组件是利用Bootstrap删格系统制作的一个图片应用场景，仅需要少量的标签就能展示带链接的图片排列。 1.1 图片1、缩略图组件12345678
3、 04知识学习与课堂练习 通过分析上述代码，我们知道缩略图因为应用了Bootstrap的删格系统，所以是支持响应式的，能够在平板端只显示2栏图片，在手机端显示1栏图片，电脑及宽屏端显示4栏图片。 Bootstrap对thumbnail类定义了如右样式。 该样式代码设置了图片的边框和对齐方式等格式，并设置了响应式图片。1、缩略图组件1234567891011121314151617181920.thumbnail display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color
4、: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: border .2s ease-in-out; -o-transition: border .2s ease-in-out; transition: border .2s ease-in-out;.thumbnail img,.thumbnail a img display: block; max-width: 100%; height: auto; margin-right: auto; margin-left: auto;04知识学习与课堂练习 1
5、.2自定义缩略图 通过组合图片、标题、段落和按钮，我们就可以实现比较常见的网页布局形式了，如下图：1、缩略图组件123456789101112131415161718 Thumbnail label . Button Button 04知识学习与课堂练习 使用Bootstrap缩略图，完成某卡车网站缩略图的效果图制作 （1）分析： 通过效果图，我们可以做到，可以利用Bootstrap的自定义缩略图来实现。 在任务2的学习中，我们知道，row类是要与布局容器.container或. container-fluid结合使用才可以避免不对称边界的产生。 另外，为了缩略图图片的排版美观和适应响应式图片
6、宽度的变化，图片应该是等高和等宽的。 （2）参考代码见课本课堂练习4.4-104知识学习与课堂练习 Bootstrap的巨幕是一个轻量的灵活组件，可以利用这个组件实现以布满整个浏览器横向视口的方式来展现重要关键内容。 如果不需要圆角，宽度与浏览器宽度一致，则可以把此组件放在所有 .container 元素（.container 类用于固定宽度并支持响应式布局的容器，详见任务4.2）的外面，并在组件内部添加一个 .container 元素。2、巨幕组件123456 Hello, world! . Learn more04知识学习与课堂练习 课堂练习4.4-2 使用Bootstrap巨幕组件，完成
7、某卡车网站巨幕效果图的制作 （1）分析： 效果图与Bootstrap默认巨幕组件的区别在于添加了背景图片，文本是居中的，文字的颜色也有变化，所以我们只需要使用不需要圆角的巨幕组件，并对样式稍作修改即可。 （2）参考代码见课本课堂练习4.4-2 04知识学习与课堂练习 Bootstrap的表格内容属于全局CSS样式，Bootstrap表格基础式样只是为表格增加了少量的内补（padding）和水平方向的分割线，效果如下图： 要实现上述效果，是需要在标签中添加.table类。 在.table类的基础上，添加.table-bordered 类可为表格和其中的每个单元格增加边框；添加.table-str
8、iped类可以给之内的每一行增加斑马条纹样式；添加.table-hover类可以让中的每一行对鼠标悬停状态作出响应；添加.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。 Bootstrap还定义了一些状态类来设置行或单元格的颜色，也设置了响应式表格类.table-responsive，具体内容可以参考http:/ Bootstrap对所用的表单控件都编写了全局样式。所有设置了.form-control类的 、 和 元素都将被默认设置宽度属性为width: 100%；将 label 元素和前面提到的控件包裹在.form-group中可以获得最好的排
9、列。 效果如下图：4、表单12345678910 Email address Submit04知识学习与课堂练习 Bootstrap还设置了水平排列的表单，通过为添加.form-horizontal类，并结合Bootstrap删格系统，就可以实现label与表单控件水平排列的布局。添加了.form-horizontal后会对.form-group类进行了修改，使其拥有.row类的格式，使用在使用时就可以实现独立行显示即.row的效果。 效果如下：4、表单1234567891011121314151617 Email Sign in 05任务实施 在任务2中，我们已经对整个页面进行了布局，在任务
10、3中，我们已经完成了导航条的制作，接下来我们将完成剩下的内容。 通过观察页面效果图，我们可以做如下分析： （1）banner广告区可以使用巨幕组件完成； （2）“关于我们”区域是左右布局，用到了表格； （3）“本科专业介绍”、“实训环境”、“优秀本科毕业生”和“联系我们”模块如果我们把图标看做图片的话，其都应用了Bootstrap的缩略图组件；另外其标题和说明文字除了颜色不一样外，其它样式都是也一样的； （4）在“联系我们”模块用到了表单组件。05任务实施 另外，我们可以加入滚动监听效果，方便用户浏览。 通过对比Glyphicons字体图标、Font Awesome字体图标和页面效果图，为了达
11、到比较好的效果，我们引入Font Awesome字体图标来完成本次任务。 为此，我们可以按照如下顺序来完成此任务： 1、使用巨幕组件完成Banner广告区 2、关于我们和招生计划 3、本科专业介绍和优秀毕业生 4、实训环境和联系我们 5、版权 6、使用Font Awesome字体图标06任务回顾学习 1、Bootstrap的缩略图组件 2、Bootstrap的巨幕组件 3、Bootstrap表格和表单完成 我们将这些知识运用到了我们的项目中，完成了整个页面的制作。07任务拓展 1、滚动监听 拓展练习4.4-1 在练习4.3-2的基础上，为导航条制作滚动监听效果感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：