响应式web开发技术期末试题

1、响应式web开发技术期末试题1. 在Bootstrap中，对于较长的文本内容，可以添加（ ）类，以省略号的形式表示超出容器的文本内容。 A、.text-truncate(正确答案)B、white-space:nowrap;C、text-overflow:ellipsis;D、overflow:hidden;2. Bootstrap网格系统在各种屏幕和设备上的约定，大型屏幕设备的断点范围是（ ） A、576pB、768pxC、992px(正确答案)D、1200px3. Bootstrap中用来设置文本居中的类是（ ） A、.text-leftB、.text-center(正确答案)C、.text

2、-rightD、.text-justify4. 在Bootstrap中可以使用（ ）类选择符，进行列偏移。 A、.deviation-B、.offset-(正确答案)C、.index-D、.order-5. 通常使用标签，添加（ ）类来设计徽章 A、.badge(正确答案)B、.alertC、.progressD、.media6. 在Bootstrap中，定位元素表示相对定位的是（ ） A、.position-staticB、.position-relative(正确答案)C、.position-absoluteD、.position-fixed7. Bootstrap中使用（ ）类来清除浮动

3、 A、.clearfix(正确答案)B、.clear-floatC、.clearD、.float-none8. 在Bootstrap中，给图片添加（ ）类，图片大小会随着父元素大小同步缩放，更加方便且不会轻易撑破其元素。 A、.img-fluid(正确答案)B、.img-thumbnailC、min-width:100%;D、width:auto;9. 卡片组件是Bootstrap新增的一组重要样式，卡片阵列是（ ） A、.card-columnsB、.card-groupC、.card-deck(正确答案)D、.card10. 改变flex项目在flex容器中的包裹方式（可以实现弹性布局）下

4、列表示包裹的是（ ） A、.flex-nowrapB、.flex-wrap(正确答案)C、.flex-wrap-reverseD、.flex-fill11. 下列用于设置垂直上下外边距为0.5rem的是（ ） A、我们生于红旗之下B、长于春风之中C、目光所至皆为华夏D、五星闪耀皆为信仰(正确答案)12. 下列“ 为什么要读书? 因为你要相信前方有一个更好的你在等着你！ ” 代码表示:（ ） A、在任何类型的设备上，列的宽度都是占50%(正确答案)B、在小型屏幕设备上，列的宽度都是占50%C、在中型屏幕设备上，列的宽度都是占50%D、在大型屏幕设备上，列的宽度都是占50%13. 下列关于宽度正确

5、写法的是（ ） A、盛年不再来B、一日难再晨C、及时当勉励D、岁月不待人(正确答案)14. 下面代码表示将来，社会迎接你的礼物，就是无数个打击，而你能做的准备，就是在校园里练就一颗坚强的心脏。 （ ） A、这段文本是灰色背景，白色文本B、这段文本是白色背景，灰色文本C、这段文本是蓝色背景，白色文本(正确答案)D、这段文本是蓝色背景，灰色文本15. 圆角边框显示正圆效果的是（ ） A、.roundedB、.rounded-circle(正确答案)C、.rounded-pillD、.rounded-016. Bootstrap中的下拉菜单组件中功能选项必须包含在（ ）类容器中。 A、.dropdo

6、wnB、.dropdown-menu(正确答案)C、.dropdown-toggleD、.dropdown-item17. Bootstrap导航组件一般以列表结构为基础进行设计，下列描述错误的是（ ） A、在上添加nav类B、在每个选项上添加nav-item类C、在每个链接上添加nav-link类D、.flex-column类可以设置导航的水平布局(正确答案)18. Bootstrap默认的网格和列间有边距，一般是左右15px的margin或padding处理，可以使用（ ）类来消除它 A、border-0B、m-0C、no-gutters(正确答案)D、p-019. 下列flexbox弹性

7、布局容器表示内容排列的是（ ） A、align-content-B、align-items-C、justify-content-(正确答案)D、align-self-20. Bootstrap中的下拉菜单组件必须包含在（ ）类容器中。 A、.dropdown(正确答案)B、.dropdown-menuC、.dropdown-toggleD、.dropdown-item21. Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个（ ）列的布局，有5种响应尺寸（对应不同的屏幕），用来创建各种形状和尺寸的布局。 A、12(正确答案)B、11C、10D、922. Bootstrap使用媒

8、体查询为布局和接口创建合理的断点，中型设备的媒体查询是（ ） A、media (min-width: 576像素) . B、media (min-width: 768像素) . (正确答案)C、media (min-width: 992像素) . D、media (min-width: 1200像素) . 23. 使用（ ）类选择符，可以对空间进行可视化排序，系统提供了12个级别的顺序，在主流浏览器和设备宽度上都能生效。 A、.sort-B、.index-C、.offset-D、.order-(正确答案)24. 通用样式类中，实现激活状态的类是（ ）。 A、.active(正确答案)B、.di

9、sabledC、.nvalidD、.effective25. Bootstrap网格系统在各种屏幕和设备上的约定，中屏的类（.class）前缀是（ ） A、col-smB、col-lgC、col-md(正确答案)D、col-xl26. Bootstrap中，导航栏组件子组件中，用于折叠插件和导航切换行为的是（ ) A、.navbar-brandB、.navbar-navC、.navbar-toggler(正确答案)D、.collapse .navbar-collapse27. 下列代码表示: 世界上好些最容易的事情中 拖延时间最不费力 A、在任何类型的设备上，一行水平排列二部分，左边占8列，右

10、边占4列B、在小型屏幕设备上，一行水平排列二部分，左边占8列，右边占4列C、在大型屏幕设备上，一行水平排列二部分，左边占8列，右边占4列D、在中型屏幕设备上，一行水平排列二部分，左边占8列，右边占4列(正确答案)28. 下列用于设置顶部内边距为1rem的是（ ） A、你所浪费的今天B、是许多人奢望的明天C、你所面对的现在D、是未来你回不去的曾经(正确答案)29. Bootstrap提供了一些有代表意义的文本颜色类，下列颜色是灰色的是（ ） A、.text-primaryB、.text-secondary(正确答案)C、.text-successD、.text-danger30. Bootstr

11、ap是美国（ ）公司开发的 A、Sun MicrosystemsB、GitHubC、NetscapeD、Twitter(正确答案)31. 下列属于Bootstrap特色的有（ ） A、支持响应式设计(正确答案)B、跨设备、跨浏览器(正确答案)C、可定制的jQuery插件(正确答案)D、提供开源代码(正确答案)32. 下列关于Flexbox的说法正确的是（ ） A、Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性(正确答案)B、不是所有容器都可以指定为Flex布局C、.d-inline-flex类设置对象为内联块级弹性伸缩盒子(正确答案)D、.d-flex类

12、设置对象为弹性伸缩盒子(正确答案)33. Bootstrap中定义了两个容器类，分别为（ ） A、.container(正确答案)B、.container-fluid(正确答案)C、divD、body34. 要使用Bootstrap前端开发框架开发响应式布局页面，至少应该加载哪些文件（ ） A、bootstrap.min.css(正确答案)B、jquery-3.3.1.slim.js(正确答案)C、popper.min.js(正确答案)D、bootstrap.min.js(正确答案)35. 下列关于div容器标签应用类样式的解释 ，正确的是（ ） A、该容器共应用了4种类样式(正确答案)B、在

13、中型以下设备屏幕上（768px）时，独占一整行12列网格系统(正确答案)C、在中型以上设备屏幕上（768px）时，占12列网格系统中的3列(正确答案)D、背景颜色为浅蓝色，左浮动(正确答案)36. 下列不走心的努力,都是在敷衍自己. 代码的显示效果（ ） A、在sm设备上显示（红色背景，白色文本）B、在md设备上显示（红色背景，白色文本）(正确答案)C、在lg设备上显示（红色背景，白色文本）D、在xl设备上显示（红色背景，白色文本）37. 下列关于div容器标签应用类样式的解释 ，正确的是（ ） A、独占一行12列网格系统(正确答案)B、固定在顶部C、除了小屏幕设备显示，其它情况都不显示(正确

14、答案)D、仅设置了顶部边框 垂直内边距为0.5rem 背景为亮灰色(正确答案)38. 下列关于图像标签应用类样式的解释 ，正确的是（ ） A、图像设置响应式布局，图片大小随着父元素大小同步缩放(正确答案)B、该图像设置为边框(正确答案)C、图像边框设置为灰色(正确答案)D、内边距为0.5rem，顶外边距为1rem(正确答案)39. 引用.card-body样式，可以建立卡片的内容主体，下列属于卡片主体.card-body内容的类有（ ） A、.card-title(正确答案)B、.card-text(正确答案)C、.card-link(正确答案)D、.card-footer40. 下列属于轮播组件类样式的有（ ） A、.carousel slide(正确答案)B、.carousel-indicators(正确答案)C、.carousel-inner(正确答案)D、.carousel-item(正确答案)41. container容器根据屏幕宽度的不同，会利用媒体查询设定固定的宽度，当改变浏览器的大小时，页面会呈现阶段性变化。但Container容器的最大宽度在每个断点并不发生变化。（ ） A、对B、错(正确答案)42. 虽然Bootstrap使用em或rem来定义大多数尺寸，但网格断点和容器宽度使用的是px，这是因为视口宽度以像素为单位。（ ）