.

Bootstrap课后题答案

第1章

一、填空题

1.Twitter

2.移动设备

3.JavaScript

.Blink

5.MobileSafari

二、判断题

1.错

2.对

3.对

.对

5.对

三、选择题

1.D

2.D

3.A

.C

四、简答题

1.简述Bootstrap的特点。

1.响应式设计:Bootstrap框架为用户提供了一套响应式的移动设备优先的流式栅格系统,拥有完备的框架结构,项目开发方便、快捷,提高了开发效率。

2.移动设备优先:随着移动设备的使用者越来越多,自Bootstrap3开始,框架设计理念发生了改变,转为以移动设备优先为目标,Bootstrap3默认样式对移动设备提供了友好的支持。

3.浏览器支持:目前主流浏览器都支持Bootstrap框架,包括IE、Firefox、Chrome、Safari等。Bootstrap兼容IE10+和iOS7+。

.低成本、易上手:学习Bootstrap框架的门槛不高,只需要读者具备HTML、CSS和JavaScript的基础知识即可。Bootstrap框架拥有完善的文档,在开发中便于查找,使用起来比较方便。Bootstrap还具有强大的扩展性,能够很好地与现实中的Web开发项目相结合。

5.CSS预编译:CSS预编译的工作原理是,提供便捷的语法和特性以便开发者编写源码,然后使用专门的编译工具将源码转化为CSS语法。Bootstrap中使用Sass(一种CSS扩展语言)进行CSS编写和预编译,减少了冗余代码,使CSS样式代码更容易维护和扩展。

6.框架成熟:Bootstrap框架发展比较成熟,它不断适应Web技术的发展,在原有的基础上进行更新迭代和完善,并在大量的项目中被广泛使用,并通过不断测试得以完善。

7.丰富的组件库:Bootstrap框架提供了功能强大的组件与插件,如小图标、按钮组、菜单导航、标签页等。丰富的组件和插件可以使开发人员快速搭建前端页面。开发人员还可以根据实际需要进行组件和插件的定制。

2.简述响应式Web开发的特点。

1.跨平台:响应式开发具有跨平台的优势,能够快捷地解决多终端设备的显示适配问题,只需开发一套网站就可以在多个平台使用,给用户带来风格一致的视觉体验。

2.便于搜索引擎收录:响应式网站制作完成之后,无论在移动端设备还是PC端设备上访问,访问的都是同一个链接地址,这样就不会分散网站的权重,提升网站对搜索引擎的友好度。

3.节约成本:响应式网站可以兼容多个终端,开发者不需要为各个终端编写不同的代码。并且响应式网站可以实现只用一个后台来进行管理,多个终端的数据保持同步,这样在制作的时候就可以减少专职程序开发人员的配备。对于开发者而言,减少了大量重复的工作,提高了工作效率;对于公司而言,节省了人员开支,降低了开发成本。

第2章

一、填空题

1.布局视口、视觉视口、理想视口

2.meta

3.Normalize.css

.cover

二、判断题

1.对

2.错

3.错

.错

5.对

三、选择题

1.A

2.A

3.B

.A

5.A

四、简答题

1.请简述什么是视口。

视口(Viewport)是移动前端开发中一个非常重要的概念,最早是由苹果公司为iOS系统的Safari浏览器引入的,其目的是让iPhone的小屏幕尽可能完整地显示整个网页。

2.请简述meta视口标签的属性以及含义。

1.width:设置视口宽度,可以设为正整数(像素)或特殊值device-width。

2.height:设置视口高度,可以设为正整数(像素)或特殊值device-height。

3.initial-scale:初始缩放比,取值范围为0.0~10.0。

.maximum-scale:最大缩放比,取值范围为0.0~10.0。

5.minimum-scale:最小缩放比,取值范围为0.0~10.0。

6.user-scalable:用户是否可以缩放,其值为yes或no。

五、编程题

1.请通过代码演示背景图片二倍图效果的实现过程。

(1)新建index.html文件,定义类名分别为img1和img2的div标签,HTML代码如下。

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

meta


转载请注明:http://www.abachildren.com/xgyy/3527.html