《Bootstrap响应式Web前端开发》期末考试就及答案自测试卷套

《《Bootstrap响应式Web前端开发》期末考试就及答案自测试卷套》由会员分享，可在线阅读，更多相关《《Bootstrap响应式Web前端开发》期末考试就及答案自测试卷套（12页珍藏版）》请在装配图网上搜索。

1、Bootstrap 响应式 Web 前端开发期末考试就及答案自测试卷 1一、选择题1、bootstrap 中，以下哪个类名无法设置文本的粗细A、font-weight-lightB、font-weight-boldC、font-weight-bolderD、text-wrap2、添加比常规尺寸更大的输入框时，添加的类名为，添加别常规尺寸更小的输入框时，添加的类名为A、form-sm，form-lgB、form-control-lg，form-control-sm C、form-control-lg，form-control-smD、form-lg，form- sm 3、以下哪个是 bootst

2、rap 的优点A、响应式布局B、移动设备优先C、简洁易上手D、以上都对4、假设要实现手风琴效果的折叠面板，那么需要为多个.collpase 添加属性。A、hrefB、targetC、data-parentD、parent5、使用卡片组排列卡片组件的类名是，使用卡片阵列排列卡片组件的类名是 A、card-group，.card-deckB、.card-deck，.card-deckC、card-group，card-groupD、.card-deck，card-group6、下面类名中，可以添加比常规加载动画尺寸更小的加载动画的是 A、spinner-grow-smB、spinner-borde

3、r-smC、AB 都是D、AB 都不是7、假设要为每个选项卡添加渐入渐出式效果，则应当为每一个 tab-pane 添加类名。 A、shadowB、animateC、fadeD、fadeIn8、以下说法错误的选项是A、设置工程垂直对齐需要为每个工程添加类名justify-content-*B、设置工程垂直对齐需要为工程的容器.row 添加类名 align-items-*C、设置工程水平对齐需要为工程的父元素.row 添加类名 justify-content-* D、假设要将工程进展换行时，可以添加div.row 实现9、在引用了 bootstrap 的前提下，下面代码中所实现的工程的挨次是d工程

4、1 d工程2 d工程3A、工程 1、工程 2、工程 3B、工程 1、工程 3、工程 2C、工程 3、工程 1、工程 2D、工程 3、工程 2、工程 1 10、以下类名中，为弹性工程添加正向包裹的类名为。A、flex-wrapB、flex-nowrapC、flex-wrap-reverseD、都不是二、填空题1、使网格布局时，假设要设置某个工程在超小屏幕中屏幕宽度576px占据整行， 而中等屏幕中屏幕宽度768px占据 4 列，则应当为工程添加类名为。2、添加选项卡时，通过为菜单项 a 标签的属性实现菜单项与选项卡面板一一对应。3、使用列表组时，列表组的容器类名为，列表组中的工程的类名为 。4、

5、假设要添加旋转的加载动画，那么使用类名即可5、bootstrap 预设了小、常规尺寸、大三个尺寸的分页组件，分别有用类名、 、来定义着三种尺寸的分页组件。三、简答题1、如何将文字中的英文转换为大写？如何转换为小写？2、如何设置元素向左浮动或者向右浮动，如何去除浮动？自测试卷 2一、选择题1、在引用了 bootstrap 的前提下，下面代码中所实现的工程的挨次是d工程1 d工程2 d工程3A、工程 1、工程 2、工程 3B、工程 1、工程 3、工程 2C、工程 3、工程 1、工程 2D、工程 3、工程 2、工程 1 2、假设要添加内联式表单，则添加的类名为A、d-inlineB、input-in

6、lineC、form-inlineD、form-control3、假设为轮播组件添加图片指示器，实现图片与指示器的一一对应，那么该指示器的容器的类名为A、carouselB、carousel-innerC、carousel-itemD、carousel-indicators4、要为警告框添加关闭按钮，那么需要为该按钮添加属性，才可以做到关闭按钮能正确的响应大事。A、closeB、closeC、alert(“close”)D、ABC 都不对5、假设要添加白绿相间条纹状的进度条动画，那么为. progress-bar 添加类名为 A、progress-bar-stripedB、bg-success

7、C、progress-bar-animatedD、ABC 都需要6、 假设要为按钮填充颜色为蓝色，则使用的类名为,假设要将按钮的轮廓设置为蓝色，则使用的类名为。A、btn-blue,border-blueB、btn-primary,btn-outline-primary C、btn-outline-primary, btn-primaryD、border-blue, btn-blue7、以下哪个类名用于设置文本的颜色A、border-dangerB、table-dangerC、bg-dangerD、text-danger8、假设要为徽章添加链接效果，那么可以使用标签来添加徽章。 A、butto

8、nB、aC、inputD、span9、定义模态框时，模态框的主体内容应放置在中A、modalB、modal-bodyC、modal-titleD、modal-head10、切换模态框的状态，使用的方法是A、modal(“show”)B、modal(“hide”)C、modal(“toggle”)D、modal(“dispose”)二、填空题1、定义 popover 工具时，使用属性可以定义它的页眉。2、要设置元素在小型扫瞄器的屏幕上向左浮动，而中等或中等以上屏幕中向右浮动， 那么使用的类名为。3、假设要禁用某个按钮，则应当为该按钮添加属性。4、使用列表组时，列表组的容器类名为，列表组中的工程的

9、类名为 。5、使用网格布局时，假设在一行中，添加了 6 个工程，且为每个工程添加了类名 col， 则每个工程的宽度占据列。三、简答题1、网格系统中设置列的宽度有哪几种方法？2、bootstrap 设置元素位置的方式有哪几种，对应的类名是什么？ 设置元素方式有五种，分别是：无特别定位，类名为.position-static；相对定位，类名为.position-relative； 确定定位，类名为 position-absolute； 固定定位，类名为 position-fixed；粘性定位，类名为 position-stikey。自测试卷 3一、选择题1.使用 bootstrap4 中的网格布局

10、时，一行中的工程不行以是个。A、7B、12C、15D、12、设置导航菜单的居中对齐，使用的类名是A、nav-centerB、align-content-centerC、justify-content-centerD、align-items-center3、定义 tooitlp 工具时，属性用于定义该工具的弹出方向。A、toopitle-direationB、data-titleC、data-placementD、data-offset4、设置元素显示为块级元素的类名为A、d-blockB、d-flexC、d-inlineD、d-none5、添加列表组里的工程时，可以使用类名实现。A、listB

11、、list-groupC、input-groupD、list-group-item6、假设要添加内联式表单，则添加的类名为 A、d-inlineB、input-inlineC、form-inlineD、form-control 7、去除元素的浮动使用的类名有A、float-leftB、float-rightC、float-noneD、clearfix8、假设要添加旋转加载动画，那么使用的类名为A、spinner-borderB、spinner-animationC、spinner-growD、ABC 都不对9、使用折叠面板时，假设使用超链接来定义折叠面板的“开关”那么通过属性实现“开关”与面板

12、的对应。A、hrefB、targetC、data-hrefD、data-target10、popover 工具中的主体内容应当使用属性来定义。A、popover-bodyB、data-contentC、data-bodyD、data-popover二、填空题1、使用 bootstrap 将按钮组垂直排列，则使用的类名为。2、实现切换折叠面板的状态，使用的方法是。3、定义卡片组件时，卡片组件的主体内容设置类名为。4、设置元素的定位方式为确定定位时类名为，相对定位时的类名为 。5、折叠面板的容器所使用的类名为。三、简答题1、bootstrap 中如何自定义某个弹性工程在纵轴上的对齐方式？Boots

13、trap 中自定义弹性工程在纵轴上的对齐方式时，需要为该弹性工程添加 align-self-*，具体可以是 align-self-start、align-self-center、align-self-end、align-self-baseline、align-self-stretch2、 添加选项卡时，如何将选项卡与选项卡的内容一一对应？为选项卡添加 href 属性，为选项卡的内容添加 id 属性，href 属性值对应 id 属性值。自测试卷 4一、选择题1、假设要为按钮填充颜色为蓝色，则使用的类名为,假设要将按钮的轮廓设置为蓝色，则使用的类名为。A、btn-blue,border-blueB

14、、btn-primary,btn-outline-primary C、btn-outline-primary, btn-primaryD、border-blue, btn-blue2、下面代码要在一行中添加三个工程，工程宽度分别占据3 列、4 列、3 列，且其次个工程与第三个工程分别向右偏移一列，空白处的代码应当是A、offset-1,col-3B、offset-2,col-4C、col-4,offset-1D、col-3,offset-33、添加 prompt 组件时，通过参数定义输入框的类型。A、inputOptionsB、valueD、localeD、inputType4、添加 prom

15、pt组件时，设置该组件的垂直居中对齐方式的属性为 A、VerticalB、centerVerticalD、horizontalD、centerhorizontal5、下面代码可以显示元素上、左、右边框的是A、B、 C、AB 都可以D、AB 都不行以6、使用媒体对象时，要实现媒体对象中，媒体内容与文字局部的对齐，可使用类名 A、justify-content-*B、align-items-*C、align-self-*D、align-content-*7、bootstrap 中，以下哪个类名无法设置文本的粗细A、font-weight-lightB、font-weight-boldC、font-

16、weight-bolderD、text-wrap8、以下哪个类名可以定义同一主轴上的工程的宽度相等 A、flex-fillB、justify-content-centerC、align-items-centerD、align-self-center 9、定义加载动画的位置时，可以使用以下哪种方式A、通过mr-auto 或者 ml-autoC、通过float-left 或 float-right 来设置位置B、通过 text-left、text-cnter、text-right 来设置位置D、ABC 都对10、浮动排列卡片组件时，使用的类名是A、card-floatB、floatC、card-c

17、olumnD、column二、填空题1、bootstrap 中设置弹性工程向左自动浮动使用的类名为，向右自动浮动设置的类名为。2、假设要将元素显示为圆形，可以使用类名。3、实现卡片内的内容水平排列的方法是。4、假设要将卡片顶部的图像设置为卡片的背景，那么需要为该图像添加类名为。5、使用日期选择器时，设置日期选择器的格式所使用的参数为。三、简答题1、 为进度条添加进度条动画需要添加的什么类名？2、 bootstrap 中下拉菜单的开放方向有哪几个，对应的类名是什么？自测试卷 5一、选择题1、使用 bootstrap4 中的网格布局时，为保证工程不发生换行，一行最多可分为列。A、6B、9C、12D

18、、152、使用 bootstrap 将文本框禁用，则使用的类名为。 A、activeB、activedC、disableD、disabled3、假设要为每个选项卡添加渐入渐出式效果，则应当为每一个 tab-pane 添加类名。 A、shadowB、animateC、fadeD、fadeIn4、下面代码所实现的功能，说法正确的选项是bootbox.confirm(“确定要关机吗？“, function (result)if(result) bootbox.alert(“马上关机“)elsebootbox.alert(“已取消“)A、单击确认按钮显示马上关时机话框，单击取消按钮显示已取消会话框。

19、B、单击确认和取消按钮都显示马上关时机话框C、单击关机和取消按钮都显示已取消会话框D、单击取消按钮显示马上关时机话框，单击确认按钮显示已取消会话框。 5、下面哪行代码，可以不能实现设置颜色选择器的默认颜色为红色。 A、$(“#color“).colorpicker(“color“:“#ff0000“)B、$(“#color“).colorpicker(“color“:“red“)C、$(“#color“).colorpicker(“color“:“rgb(255,0,0)“) D、$(“#color“).colorpicker(“#168130“)6、添加分页时，需要为分页内的每一项添加类名。

20、 A、B、paginationC、-itemD、breadcrumb7、下面代码要在一行中添加三个工程，工程宽度分别占据3 列、4 列、3 列，且其次个工程与第三个工程分别向右偏移一列，空白处的代码应当是A、offset-1,col-3B、offset-2,col-4C、col-4,offset-1D、col-3,offset-38、以下那个类名是 bootstrap 中设置工程在纵轴上居中排列A、justify-content-centerB、align-content-centerC、align-items-centerD、align-self-center9、想要添加进度条，可以使用组件

21、A、progressB、badgeC、navbarD、button10、以下那个类名可用于对列进展排序A、offset-1B、col-1C、order-1D、都可以二、填空题1、下面代码中，工程的挨次依次为。工程一工程二工程三2、添加 alert 警告框时，定义警告框的内容所使用的的参数为。3、bootstrap 中设置弹性盒的主轴方向的类名有、。4、假设要添加一个渐变缩放的加载动画，则类名为。5、设置元素在中等或以上屏幕中显示为块级元素，超小型或以上屏幕中隐蔽，那么使用类名为。三、简答题1、简述网格系统的作用原理。简洁的说，网格系统就是将网页的总宽度分为 12 等份，开发人员可以自由的安排工

22、程中的列所占的份数。2、使用 JavaScript 脚本调用模态框时，需要使用什么方法？ 调用模态框的方法.modal。自测试卷 1一、选择题答案1D2C3D4C5A6C7C8A9D10A二、填空题答案1、col-12 col-md-4 2、href3、list-group，list-group-item 4、spinner-border5、pagination-sm、pagination、pagination-lg。三、简答题答案1、将英文转换为大写，所添加的类名为：text-uppercase，转换为小写，所添加的类名为：text-lowercase2、设置向左浮动的类名：.float-l

23、eft；设置向右浮动的类名：.float-right；去除浮动的类名：.clearfix。自测试卷 2一、选择题答案1D2C3D4C5D6B7D8B9B10C二、填空题答案1、title2、float-sm-left float-md-right 3、disabled4、list-group，list-group-item 5、2三、简答题答案1、一共有三种。第一种：col-数字 112，表示该工程占据该行的多少格；其次种，直接添加类名 col，表示该行的.col 平分剩余的空间；第三种:添加类名 col-auto，表示其宽度正好能适应内容。2、设置元素方式有五种，分别是：无特别定位，类名为.

24、position-static； 相对定位，类名为.position-relative； 确定定位，类名为 position-absolute； 固定定位，类名为 position-fixed；粘性定位，类名为 position-stikey。自测试卷 3一、选择题答案1C2C3C4A5D6C7D8A9A10B二、填空题答案1、btn-group-vertical 2、collapse(“toggle”) 3、Card-body4、position-absolute ，position-relative 5、collapse三、简答题答案1、Bootstrap 中自定义弹性工程在纵轴上的对齐方

25、式时，需要为该弹性工程添加 align-self-*， 具体可以是 align-self-start、align-self-center、align-self-end、align-self-baseline、align-self-stretch 2、为选项卡添加 href 属性，为选项卡的内容添加 id 属性，href 属性值对应 id 属性值。自测试卷 4一、选择题答案1B2C3D4B5C6C7B8A9D10C二、填空题答案1、ml-auto、mr-auto 2、rounded-circle3、弹性布局或网格布局4、card-img-overlay5、format三、简答题答案1、为进度条添

26、加进度条动画需要在progress-bar 上添加.progress-bar-animated。2、有四个，分别是向上开放类名为.dropup、向下开放类名为.dropdown、向左开放.dropleft和向右开放.dropright自测试卷 5一、选择题答案1 C2D3C4A5D6B7C8C9A10C二、填空题答案1、工程二、工程一、工程三2、message3、flex-row、flex-row-reverse、flex-column、flex-column-reverse 4、spinner-grow5、d-none d-md-block三、简答题答案1、简洁的说，网格系统就是将网页的总宽度分为12 等份，开发人员可以自由的安排工程中的列所占的份数。2、调用模态框的方法.modal。