Bootstrap响应式网站开发任务式教程微课版刘万辉课后答案

拓展训练-答案1.选择题（1）代码<linkrel=”stylesheet”type=”text/css”media=”screen”href=”xxx.css”/>中media指定的属性就是设备，其中screen指的是（A）。A.显示器B.打印机C.电视D.投影仪（2）overflow的默认选项是（C）。A.autoB.hiddenC.visibleD.scroll（3）一个div元素设置宽度为30rem，高度为6rem，边框为红色。添加(B)代码能实现div元素居中对齐。A.text-align:center; B.margin:0auto;C.vertical-align:middle; D.left:50%;right:50%;（4）代码<linkrel="stylesheet"media="(min-width:960px)"href="styl1.css"/>正确的含义是（D）。A.当浏览器窗口小于960px时，运行“style.css”样式文件。B.当浏览器窗口等于960px时，运行“style.css”样式文件。C.当浏览器窗口大于960px时，运行“style.css”样式文件。D.当浏览器窗口大于等于960px时，运行“style.css”样式文件。2.实践项目：使用媒体查询。一个页面布局为分布为上中下结构，顶部栏与底部栏宽度为100%，高度为4rem，中部部栏内部又分为4部分，宽度在小于48rem时，页面呈现上下流式布局，页面效果如图的a图所示；宽度在大于等于48rem而小于75rem时，中部4个子元素各占50%，分2行布局，页面效果如图1-10的b图所示；当宽度大于等于75rem时，中部4个子元素各占25%，页面效果如图1-10的c图所示，请写出具体的HTML和CSS代码。（a）分辨率小于48rem时的页面效果（b）分辨率大于等于48rem而小于75rem的页面效果（c）分辨率大于等于75rem时的页面效果

拓展训练-答案1.选择题（1）Bootstrap中.rounded-circle类的功能是（B）。A.为图片添加圆角B.将图片变为圆形C.缩略图功能D.图片响应式（2）针对Bootstrap框架的特性描述错误的是（A）。A.Bootstrap是以PC优先的设计框架。B.Edge、Firefox、Google等主流的浏览器都支持Bootstrap。C.Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备。D.Bootstrap提供了大量的CSS和JavaScript组件。2.实践项目：体验响应式网页效果。（1）分别使用PC与手机访问腾讯网，体验响应式的页面效果，如图所示。（a）手机访问页面效果（b）PC访问页面效果图体验PC与手机访问腾讯网的效果（2）使用“GoogleChrome”浏览器访问华为官网，按快捷键<F12>进入“检查”模式，体验响应式的页面效果。（a）手机访问页面效果（b）PC访问页面效果图体验PC与手机访问华为官网的效果

拓展训练-答案1.选择题（1）Bootstrap5中.container类在小型设备平板电脑的最大容器宽度是（B）。A.540pxB.720pxC.960pxD.1140px（2）Bootstrap5中列之间隙宽度是（D）。A.autoB.0.5remC.1remD.1.5rem（3）Bootstrap5中，网格系统标准用法（C）是错误的。A.<divclass="col-md-3"><divclass="row"></div></div>B.<divclass="container"><divclass="row"></div></div>C.<divclass="row"><divclass="container"></div></div>D.<divclass="row"><divclass="col-md-3"></div></div>2.实践项目：使用bootstrap网格系统布局页面。（1）使用Bootstrap网格时，可以对网页方便的进行模块分割。请参照图某电商平台图所示的效果运用网格布局进行实现。（a）分辨率小于576像素的效果（b）分辨率大于等于576而小于768像素的效果（c）分辨率大于等于768像素的效果（2）使用Bootstrap网格系统参照图所示的效果布局七等分的页面效果。图均匀分布七等分的页面效果

拓展训练-答案1.选择题（1）Bootstrap中将大写转换为小写的类是（A）。A..text-lowercaseB..text-uppercaseC..text-capitalizeD..lead（2）Bootstrap中设置仅在中等屏幕上显示元素的代码是（A）。A..d-none.d-md-block.d-lg-noneB..d-none.d-md-blockC..d-sm-none.d-md-blockD..d-md-block2.实践项目：使用bootstrap实现基本页面布局。（1）使用Bootstrap定位来实现注册进度条，效果如图所示。图页面布局效果（2）依据素材图片与文字介绍，制作博物馆文物展示页面效果，如图所示。图“妇好鸮尊”介绍页面效果

拓展训练-答案1.选择题（1）Bootstrap中将

.table-striped类表示（A）。A.在<tbody>内添加斑马线形式的条纹B.为所有表格的单元格添加边框C.在<tbody>内的任一行启用鼠标悬停状态D.让表格更加紧凑（2）Bootstrap中（B）类实现将悬停的颜色应用在行或者单元格上。A..table-infoB..table-hoverC.table-activeD.table-warning2.实践项目：根据表格数据美化表格。根据国家统计局中的“年度数据”中关于“运动员获世界冠军情况”的基本数据，如图5-20所示，结合所学的内容，美化表格，效果如图所示。图基础数据图美化后的数据页面效果

拓展训练1.选择题（1）Bootstrap5中使用（C）类来向表单输入框中添加更多的样式，如图标、文本或者按钮。A.

.formB.

.form-inlineC..input-groupD..form-group（2）在（B）类中包装一对<inputclass="form-control">和<label>元素，以使用Bootstrap的文本表单字段启用浮动标签。A..has-warningB..form-floatingC..has-successD..has-error

2.实践项目：使用bootstrap实现表格页面布局。（1）登陆某网站的会员注册页面，实现注册页面布局，如图所示，然后实现登录页面，如图所示。图注册页面布局效果图登录页面布局效果（2）登陆某网站的会员注册页面，实现注册页面布局，如图所示。图网站登录页面布局效果

拓展训练-答案1.选择题（1）Bootstrap中.btn-group类表示（A）。A.用于形成基本的按钮组，在其中放置一系列带有

.btn

类的按钮。B.让一组按钮水平堆叠显示。C.让一组按钮垂直堆叠显示。D.实现许多个按钮被堆叠在同一行上。（2）大多数站点都需要在网格中布局图像、视频、文本等实现缩略图效果，

Bootstrap中使用（C）类来实现缩略图效果。A.