2.4使用Bootstrap和JS插件组件制作网页内容（课件）-高二《网页设计与制作》同步教学（劳动版）

使用Bootstrap开源框架快速搭建响应式网页 项目二 能够使用Bootstrap的缩略图、巨幕、表单、表格等相关组件，完成D清单页面元素的制作； 测试D清单页面响应式效果，完善页面细节。 任务目标 任务4 使用Bootstrap和JS插件组件制作网页内容 本次任务要求在完成导航条制作的基础上，继续完成网页内容的制作。完成后的效果图如图2-4所示。 任务描述 图2-4 完成后的移动端和电脑端页面测试效果图 任务4 使用Bootstrap和JS插件组件制作网页内容 在上一任务完成效果的基础上，完成D清单网页各个栏目内容的制作。需要： 学习Bootstrap的缩略图、巨幕、表单、表格等相关组件； 学习Bootstrap的轮播和模态框（弹出框）等相关JavaScript插件； 综合运用Bootstrap相关组件，完成D清单页面的制作并测试完成效果。 任务分析 任务4 使用Bootstrap和JS插件组件制作网页内容 知识与技能准备 如果你把我们要完成的网页与Bootstrap的组件效果进行对比，你会发现，为完成接下来的任务，我们需要学习如下Bootstrap知识： 知识与技能准备 1、缩略图组件 Bootstrap的缩略图是利用Bootstrap的删格系统的一个图片应用场景，仅需要最少的标签就能展示带链接的图片。 1.1图片 Bootstrap缩略图默认样式如下图： 要实现上图效果，可以参考代码如下： 图2-4-1 默认缩略图 1 2 3 4 5 6 7 8 <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="..." alt="..."> </a> </div> <!--此处重复4个col-xs-6 col-md-3类的div--> </div> 知识与技能准备 1、缩略图组件 通过分析上述代码，我们知道缩略图因为应用了Bootstrap的删格系统，所以是支持响应式的，能够在平板端只显示2栏图片，在手机端显示1栏图片，电脑及宽屏端显示4栏图片。 Bootstrap对thumbnail类定义了如下样式： 该样式代码设置了图片的边框和对齐方式等格式，并设置了响应式图片。 1 2 3 4 5 6 7 8 9 10 11 12 .thumbnail { display: block; padding: 4px; margin-bottom: 20px; line-height: 1.42857143; background-color: #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; } 知识与技能准备 1、缩略图组件 1.2自定义缩略图 通过组合图片、标题、段落和按钮，我们就可以实现比较常见的网页布局形式了，如下图： 图2-4-2 自定义缩略图 知识与技能准备 1、缩略图组件 要实现上图效果，可以参考代码如下： 图2-4-2 自定义缩略图 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </p> </div>