前端开发技术复习题库附有答案

前端开发技术复习题库1、bootstrap中，以下哪个类名无法设置文本的粗细（）[单选题]*A、font-weight-lightB、font-weight-boldC、font-weight-bolderD、text-wrap(正确答案)2、添加比常规尺寸更大的输入框时，添加的类名为（），添加别常规尺寸更小的输入框时，添加的类名为（C）[单选题]*A、form-sm，form-lgB、form-control-lg，form-control-smC、form-control-lg，form-control-sm(正确答案)D、form-lg，form-sm3、以下哪个是bootstrap的优点（）[单选题]*A、响应式布局B、移动设备优先C、简单易上手D、以上都对(正确答案)4、如果要实现手风琴效果的折叠面板，那么需要为多个.collpase添加（）属性。[单选题]*A、hrefB、targetC、data-parent(正确答案)D、parent5、使用卡片组排列卡片组件的类名是（），使用卡片阵列排列卡片组件的类名是（）[单选题]*A、card-group，.card-deck(正确答案)B、.card-deck，.card-deckC、card-group，card-groupD、.card-deck，card-group6、下面类名中，可以添加比常规加载动画尺寸更小的加载动画的是（）[单选题]*A、spinner-grow-smB、spinner-border-smC、AB都是(正确答案)D、AB都不是7、如果要为每个选项卡添加渐入渐出式效果，则应该为每一个tab-pane添加类名（）。[单选题]*A、shadowB、animateC、fade(正确答案)D、fadeIn8、下列说法错误的是（）[单选题]*A、设置项目垂直对齐需要为每个项目添加类名justify-content-*(正确答案)B、设置项目垂直对齐需要为项目的容器.row添加类名align-items-*C、设置项目水平对齐需要为项目的父元素.row添加类名justify-content-*D、如果要将项目进行换行时，可以新添加div.row实现9、在引用了bootstrap的前提下，下面代码中所实现的项目的顺序是（）

<divstyle=""class="d-flex">

<divclass="order-2">项目1</div>

<divclass="order-1">项目2</div>

<div>项目3</div>

</div>[单选题]*A、项目1、项目2、项目3B、项目1、项目3、项目2C、项目3、项目1、项目2D、项目3、项目2、项目1(正确答案)10、以下类名中，为弹性项目添加正向包裹的类名为（）。[单选题]*A、flex-wrap(正确答案)B、flex-nowrapC、flex-wrap-reverseD、都不是1、使网格布局时，如果要设置某个项目在超小屏幕中（屏幕宽度<576px）占据整行，而中等屏幕中（屏幕宽度≥768px）占据4列，则应该为项目添加类名为____col-12col-md-4_____。[填空题]*空1答案：请设置答案空2答案：请设置答案2、添加选项卡时，通过为菜单项a标签的___href_____属性实现菜单项与选项卡面板一一对应。[填空题]*空1答案：请设置答案空2答案：请设置答案3、使用列表组时，列表组的容器类名为_____list-group_______，列表组中的项目的类名为_____list-group-item____。[填空题]*空1答案：请设置答案空2答案：请设置答案空3答案：请设置答案空4答案：请设置答案4、如果要添加旋转的加载动画，那么使用_____spinner-border_____类名即可[填空题]*空1答案：请设置答案空2答案：请设置答案5、bootstrap预设了小、常规尺寸、大三个尺寸的分页组件，分别实用类名_pagination-sm___、___pagination__、__pagination-lg_来定义着三种尺寸的分页组件。[填空题]*空1答案：请设置答案空2答案：请设置答案1、在引用了bootstrap的前提下，下面代码中所实现的项目的顺序是（）

<divstyle=""class="d-flex">

<divclass="order-2">项目1</div>

<divclass="order-1">项目2</div>

<div>项目3</div>

</div>[单选题]*A、项目1、项目2、项目3B、项目1、项目3、项目2C、项目3、项目1、项目2D、项目3、项目2、项目1(正确答案)2、如果要添加内联式表单，则添加的类名为（）[单选题]*A、d-inlineB、input-inlineC、form-inline(正确答案)D、form-control3、如果为轮播组件添加图片指示器，实现图片与指示器的一一对应，那么该指示器的容器的类名为（）[单选题]*A、carouselB、carousel-innerC、carousel-itemD、carousel-indicators(正确答案)4、要为警告框添加关闭按钮，那么需要为该按钮添加（）属性，才可以做到关闭按钮能正确的响应事件。[单选题]*A、close()B、closeC、alert(“close”)(正确答案)D、ABC都不对5、如果要添加白绿相间条纹状的进度条动画，那么为.progress-bar添加类名为（）[单选题]*A、progress-bar-stripedB、bg-successC、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-danger(正确答案)8、如果要为徽章添加链接效果，那么可以使用（）标签来添加徽章。[单选题]*A、buttonB、a(正确答案)C、inputD、span9、定义模态框时，模态框的主体内容应放置在（）中[单选题]*A、modalB、modal-body(正确答案)C、modal-titleD、modal-head10、切换模态框的状态，使用的方法是（）[单选题]*A、modal(“show”)B、modal(“hide”)C、modal(“toggle”)(正确答案)D、modal(“dispose”)1、定义popover工具时，使用_____title______属性可以定义它的页眉。[填空题]*空1答案：请设置答案空2答案：请设置答案2、要设置元素在小型浏览器的屏幕上向左浮动，而中等或中等以上屏幕中向右浮动，那么使用的类名为___float-sm-leftfloat-md-right__。[填空题]*3、如果要禁用某个按钮，则应该为该按钮添加属性________。[填空题]*4、使用列表组时，列表组的容器类名为__list-group，列表组中的项目的类名为_list-group-item_。[填空题]*_________________________________5、使用网格布局时，如果在一行中，添加了6个项目，且为每个项目添加了类名col，则每个项目的宽度占据___2____列。[填空题]*空1答案：请设置答案空2答案：请设置答案1.使用bootstrap4中的网格布局时，一行中的项目不可以是（）个。[单选题]*A、7B、12C、15(正确答案)D、12、设置导航菜单的居中对齐，使用的类名是（）[单选题]*A、nav-centerB、align-content-centerC、justify-content-center(正确答案)D、align-items-center3、定义tooitlp工具时，（）属性用于定义该工具的弹出方向。[单选题]*A、toopitle-direationB、data-titleC、data-placement(正确答案)D、data-offset4、设置元素显示为块级元素的类名为（）[单选题]*A、d-block(正确答案)B、d-flexC、d-inlineD、d-none5、添加列表组里的项目时，可以使用（）类名实现。[单选题]*A、listB、list-groupC、input-groupD、list-group-item(正确答案)6、如果要添加内联式表单，则添加的类名为（）[单选题]*A、d-inlineB、input-inlineC、form-inline(正确答案)D、form-control7、清除元素的浮动使用的类名有（）[单选题]*A、float-leftB、float-rightC、float-noneD、clearfix(正确答案)8、如果要添加旋转加载动画，那么使用的类名为（）[单选题]*A、spinner-border(正确答案)B、spinner-animationC、spinner-growD、ABC都不对9、使用折叠面板时，如果使用超链接来定义折叠面板的“开关”那么通过（）属性实现“开关”与面板的对应。[单选题]*A、href(正确答案)B、targetC、data-hrefD、data-target10、popover工具中的主体内容应该使用（）属性来定义。[单选题]*A、popover-bodyB、data-content(正确答案)C、data-bodyD、data-popover1、使用bootstrap将按钮组垂直排列，则使用的类名为_btn-group-vertical_。[填空题]*_________________________________2、实现切换折叠面板的状态，使用的方法是__collapse(“toggle”)_。[填空题]*_________________________________3、定义卡片组件时，卡片组件的主体内容设置类名为__Card-body__。[填空题]*_________________________________4、设置元素的定位方式为绝对定位时类名为_position-absolute_，相对定位时的类名为_position-relative_。[填空题]*_________________________________5、折叠面板的容器所使用的类名为__collapse__。[填空题]*_________________________________1、如果要为按钮填充颜色为蓝色，则使用的类名为（）,如果要将按钮的轮廓设置为蓝色，则使用的类名为（）。[单选题]*A、btn-blue,border-blueB、btn-primary,btn-outline-primary(正确答案)C、btn-outline-primary,btn-primaryD、border-blue,btn-blue2、下面代码要在一行中添加三个项目，项目宽度分别占据3列、4列、3列，且第二个项目与第三个项目分别向右偏移一列，空白处的代码应该是（）

<divclass="container">

<divclass="col-3"><imgsrc="images/img1.jpg"class="img-fluid"></div>

<divclass="________offset-1"><imgsrc="images/img2.jpg"class="img-fluid"></div>

<divclass="col-3________"><imgsrc="images/img3.jpg"class="img-fluid"></div>

</div>[单选题]*A、offset-1,col-3B、offset-2,col-4C、col-4,offset-1(正确答案)D、col-3,offset-33、添加prompt组件时，通过（）参数定义输入框的类型。[单选题]*A、inputOptionsB、valueC、localeD、inputType(正确答案)4、添加prompt()组件时，设置该组件的垂直居中对齐方式的属性为（）[单选题]*A、VerticalB、centerVertical(正确答案)D、horizontalD、centerhorizontal5、下面代码可以显示元素上、左、右边框的是（）[单选题]*A、<divclass="borderborder-bottom-0border-info"></div>B、<divclass="border-topborder-leftborder-rightborder-info"></div>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-weight-bolderD、text-wrap(正确答案)8、以下哪个类名可以定义同一主轴上的项目的宽度相等（）[单选题]*A、flex-fill(正确答案)B、justify-content-centerC、align-items-centerD、align-self-center9、定义加载动画的位置时，可以使用以下哪种方式（）[单选题]*A、通过mr-auto或者ml-autoC、通过float-left或float-right来设置位置B、通过text-left、text-cnter、text-right来设置位置D、ABC都对(正确答案)10、浮动排列卡片组件时，使用的类名是（）[单选题]*A、card-floatB、floatC、card-column(正确答案)D、column1、bootstrap中设置弹性项目向左自动浮动使用的类名为__ml-auto___，向右自动浮动设置的类名为__mr-auto___。[填空题]*空1答案：请设置答案空2答案：请设置答案2、如果要将元素显示为圆形，可以使用类名______rounded-circle______。[填空题]*空1答案：请设置答案空2答案：请设置答案3、实现卡片内的内容水平排列的方法是_弹性布局或网格布局_。[填空题]*_________________________________4、如果要将卡片顶部的图像设置为卡片的背景，那么需要为该图像添加类名为_card-img-overlay__。[填空题]*_________________________________5、使用日期选择器时，设置日期选择器的格式所使用的参数为_____format____。[填空题]*空1答案：请设置答案空2答案：请设置答案一、选择题1、使用bootstrap4中的网格布局时，为保证项目不发生换行，一行最多可分为（）列。[单选题]*A、6B、9C、12(正确答案)D、152、使用bootstrap将文本框禁用，则使用的类名为（）。[单选题]*A、activeB、activedC、disableD、disabled(正确答案)3、如果要为每个选项卡添加渐入渐出式效果，则应该为每一个tab-pane添加类名（）。[单选题]*A、shadowB、animateC、fade(正确答案)D、fadeIn4、下面代码所实现的功能，说法正确的是（）

bootbox.confirm("确定要关机吗?",function(result){

if(result){

bootbox.alert("即将关机")

}

else{

bootbox.alert("已取消")

}

})[单选题]*A、单击确认按钮显示即将关机会话框，单击取消按钮显示已取消会话框。(正确答案)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、添加分页时，需要为分页内的每一项添加类名（）。[单选题]*A、pageB、pagination(正确答案)C、itemD、breadcrumb7、下面代码要在一行中添加三个项目，项目宽度分别占据3列、4列、3列，且第二个项目与第三个项目分别向右偏移一列，空白处的代码应该是（）

<divclass="container">

<divclass="row">

<divclass="col-3"><imgsrc="images/img1.jpg"class="img-fluid"></div>

<divclass="______offset-1"><imgsrc="images/img2.jpg"class=