admin 管理员组

文章数量: 887032


2023年12月17日发(作者:uniqueidentify)

Bootstrap响应式Web前端开发自测试卷及答案

自测试卷1

一、选择题

1、bootstrap中,以下哪个类名无法设置文本的粗细()

A、font-weight-lightB、font-weight-bold

C、font-weight-bolder D、text-wrap

2、添加比常规尺寸更大的输入框时,添加的类名为(),添加别常规尺寸更小的输入框时,添加的类名为()

A、form-sm,form-lg B、form-control-lg,form-control-sm

C、form-control-lg,form-control-sm D、form-lg,form- sm

3、以下哪个是bootstrap的优点()

A、响应式布局B、移动设备优先

C、简单易上手D、以上都对

4、如果要实现手风琴效果的折叠面板,那么需要为多个.collpase添加()属性。

A、href B、target

C、data-parent D、parent

5、使用卡片组排列卡片组件的类名是(),使用卡片阵列排列卡片组件的类名是()

A、card-group,.card-deck B、.card-deck,.card-deck

C、card-group,card-groupD、.card-deck,card-group

6、下面类名中,可以添加比常规加载动画尺寸更小的加载动画的是()

A、spinner-grow-sm B、spinner-border-sm

C、AB都是 D、AB都不是

7、如果要为每个选项卡添加渐入渐出式效果,则应该为每一个tab-pane添加类名()。

A、shadow B、animate

C、fade D、fadeIn

8、下列说法错误的是()

A、设置项目垂直对齐需要为每个项目添加类名justify-content-*

B、设置项目垂直对齐需要为项目的容器.row添加类名align-items-*

C、设置项目水平对齐需要为项目的父元素.row添加类名justify-content-*

D、如果要将项目进行换行时,可以新添加实现

9、在引用了bootstrap的前提下,下面代码中所实现的项目的顺序是()

项目1

项目2

项目3

A、项目1、项目2、项目3 B、项目1、项目3、项目2

C、项目3、项目1、项目2 D、项目3、项目2、项目1

10、以下类名中,为弹性项目添加正向包裹的类名为()。

A、flex-wrap B、flex-nowrap

C、flex-wrap-reverse D、都不是

二、填空题

1、使网格布局时,如果要设置某个项目在超小屏幕中(屏幕宽度<576px)占据整行,而中等屏幕中(屏幕宽度≥768px)占据4列,则应该为项目添加类名为_________。

2、添加选项卡时,通过为菜单项a标签的________属性实现菜单项与选项卡面板一一对应。

3、使用列表组时,列表组的容器类名为____________,列表组中的项目的类名为_________。

4、如果要添加旋转的加载动画,那么使用__________类名即可

5、bootstrap预设了小、常规尺寸、大三个尺寸的分页组件,分别实用类名_________、_________、___________来定义着三种尺寸的分页组件。

三、简答题

1、如何将文字中的英文转换为大写?如何转换为小写?

2、如何设置元素向左浮动或者向右浮动,如何清除浮动?

自测试卷2

一、选择题

1、在引用了bootstrap的前提下,下面代码中所实现的项目的顺序是()

项目1

项目2

项目3

A、项目1、项目2、项目3 B、项目1、项目3、项目2

C、项目3、项目1、项目2 D、项目3、项目2、项目1

2、如果要添加内联式表单,则添加的类名为()

A、d-inlineB、input-inline

C、form-inline D、form-control

3、如果为轮播组件添加图片指示器,实现图片与指示器的一一对应,那么该指示器的容器的类名为()

A、carousel B、carousel-inner

C、carousel-item D、carousel-indicators

4、要为警告框添加关闭按钮,那么需要为该按钮添加()属性,才可以做到关闭按钮能正确的响应事件。

A、close() B、close

C、alert(“close”) D、ABC都不对

5、如果要添加白绿相间条纹状的进度条动画,那么为. progress-bar添加类名为()

A、progress-bar-striped B、bg-success

C、progress-bar-animated D、ABC都需要

6、、如果要为按钮填充颜色为蓝色,则使用的类名为(),如果要将按钮的轮廓设置为蓝色,则使用的类名为()。

A、btn-blue,border-blue B、btn-primary,btn-outline-primary

C、btn-outline-primary, btn-primary D、border-blue, btn-blue

7、以下哪个类名用于设置文本的颜色()

A、border-danger B、table-danger

C、bg-danger D、text-danger

8、如果要为徽章添加链接效果,那么可以使用()标签来添加徽章。

A、buttonB、a

C、input D、span

9、定义模态框时,模态框的主体内容应放置在()中

A、modal B、modal-body

C、modal-title D、modal-head

10、切换模态框的状态,使用的方法是()

A、modal(“show”) B、modal(“hide”)

C、modal(“toggle”) D、modal(“dispose”)

二、填空题

1、定义popover工具时,使用___________属性可以定义它的页眉。

2、要设置元素在小型浏览器的屏幕上向左浮动,而中等或中等以上屏幕中向右浮动,那么使用的类名为_____________________。

3、如果要禁用某个按钮,则应该为该按钮添加属性________。

4、使用列表组时,列表组的容器类名为____________,列表组中的项目的类名为_________。

5、使用网格布局时,如果在一行中,添加了6个项目,且为每个项目添加了类名col,则每个项目的宽度占据_______列。

三、简答题

1、网格系统中设置列的宽度有哪几种方法?

2、bootstrap设置元素位置的方式有哪几种,对应的类名是什么?

设置元素方式有五种,分别是:

无特殊定位,类名为.position-static;

相对定位,类名为.position-relative;

绝对定位,类名为position-absolute;

固定定位,类名为position-fixed;

粘性定位,类名为position-stikey。

自测试卷3

一、选择题

1.使用bootstrap4中的网格布局时,一行中的项目不可以是()个。

A、7 B、12

C、15 D、1

2、设置导航菜单的居中对齐,使用的类名是()

A、nav-centerB、align-content-center

C、justify-content-center D、align-items-center

3、定义tooitlp工具时,()属性用于定义该工具的弹出方向。

A、toopitle-direation B、data-title

C、data-placement D、data-offset

4、设置元素显示为块级元素的类名为()

A、d-block B、d-flex

C、d-inline D、d-none

5、添加列表组里的项目时,可以使用()类名实现。

A、list B、list-group

C、input-groupD、list-group-item

6、如果要添加内联式表单,则添加的类名为()

A、d-inlineB、input-inline

C、form-inline D、form-control

7、清除元素的浮动使用的类名有()

A、float-left B、float-right

C、float-none D、clearfix

8、如果要添加旋转加载动画,那么使用的类名为()

A、spinner-border B、spinner-animation

C、spinner-grow D、ABC都不对

9、使用折叠面板时,如果使用超链接来定义折叠面板的“开关”那么通过()属性实现“开关”与面板的对应。

A、href B、target

C、data-href D、data-target

10、popover工具中的主体内容应该使用()属性来定义。

A、popover-body B、data-content

C、data-body D、data-popover

二、填空题

1、使用bootstrap将按钮组垂直排列,则使用的类名为_________。

2、实现切换折叠面板的状态,使用的方法是____________。

3、定义卡片组件时,卡片组件的主体内容设置类名为__________。

4、设置元素的定位方式为绝对定位时类名为_______________,相对定位时的类名为______________。

5、折叠面板的容器所使用的类名为___________。

三、简答题

1、 bootstrap中如何自定义某个弹性项目在纵轴上的对齐方式?

Bootstrap中自定义弹性项目在纵轴上的对齐方式时,需要为该弹性项目添加align-self-*,具体可以是align-self-start、align-self-center、align-self-end、align-self-baseline、align-self-stretch

2、添加选项卡时,如何将选项卡与选项卡的内容一一对应?

为选项卡添加href属性,为选项卡的内容添加id属性,href属性值对应id属性值。

自测试卷4

一、选择题

1、如果要为按钮填充颜色为蓝色,则使用的类名为(),如果要将按钮的轮廓设置为蓝色,则使用的类名为()。

A、btn-blue,border-blue B、btn-primary,btn-outline-primary

C、btn-outline-primary,btn-primary D、border-blue,btn-blue

2、下面代码要在一行中添加三个项目,项目宽度分别占据3列、4列、3列,且第二个项目与第三个项目分别向右偏移一列,空白处的代码应该是()

A、offset-1,col-3 B、offset-2,col-4

C、col-4,offset-1 D、col-3,offset-3

3、添加prompt组件时,通过()参数定义输入框的类型。

A、inputOptionsB、value

D、locale D、inputType

4、添加prompt()组件时,设置该组件的垂直居中对齐方式的属性为()

A、Vertical B、centerVertical

D、horizontal D、centerhorizontal

5、下面代码可以显示元素上、左、右边框的是()

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-bold

C、font-weight-bolder D、text-wrap

8、以下哪个类名可以定义同一主轴上的项目的宽度相等()

A、flex-fill B、justify-content-center

C、align-items-center D、align-self-center

9、定义加载动画的位置时,可以使用以下哪种方式()

A、通过mr-auto或者ml-auto C、通过float-left或float-right来设置位置

B、通过text-left、text-cnter、text-right来设置位置 D、ABC都对

10、浮动排列卡片组件时,使用的类名是()

A、card-float B、float

C、card-column D、column

二、填空题

1、bootstrap中设置弹性项目向左自动浮动使用的类名为_____,向右自动浮动设置的类名为_____。

2、如果要将元素显示为圆形,可以使用类名____________。

3、实现卡片内的内容水平排列的方法是___________。

4、如果要将卡片顶部的图像设置为卡片的背景,那么需要为该图像添加类名为________。

5、使用日期选择器时,设置日期选择器的格式所使用的参数为_________。

三、简答题

1、为进度条添加进度条动画需要添加的什么类名?

2、 bootstrap中下拉菜单的展开方向有哪几个,对应的类名是什么?

自测试卷5

一、选择题

1、使用bootstrap4中的网格布局时,为保证项目不发生换行,一行最多可分为()列。

A、6 B、9

C、12 D、15

2、使用bootstrap将文本框禁用,则使用的类名为()。

A、activeB、actived

C、disableD、disabled

3、如果要为每个选项卡添加渐入渐出式效果,则应该为每一个tab-pane添加类名()。

A、shadow B、animate

C、fade D、fadeIn

4、下面代码所实现的功能,说法正确的是()

m("确定要关机吗?", function (result){

if(result){

("即将关机")

}

else{

("已取消")

}

})

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、page B、pagination

C、page-item D、breadcrumb

7、下面代码要在一行中添加三个项目,项目宽度分别占据3列、4列、3列,且第二个项目与第三个项目分别向右偏移一列,空白处的代码应该是()

A、offset-1,col-3 B、offset-2,col-4

C、col-4,offset-1 D、col-3,offset-3

8、以下那个类名是bootstrap中设置项目在纵轴上居中排列()

A、justify-content-center B、align-content-center

C、align-items-center D、align-self-center

9、想要添加进度条,可以使用()组件

A、progressB、badge

C、navbar D、button

10、以下那个类名可用于对列进行排序()

A、offset-1 B、col-1

C、order-1 D、都可以

二、填空题

1、下面代码中,项目的顺序依次为__________________。

项目一

项目二

项目三

2、添加alert警告框时,定义警告框的内容所使用的的参数为________。

3、bootstrap中设置弹性盒的主轴方向的类名有_______、______、_______、______。

4、如果要添加一个渐变缩放的加载动画,则类名为______________________。

5、设置元素在中等或以上屏幕中显示为块级元素,超小型或以上屏幕中隐藏,那么使用类名为_____________。

三、简答题

1、简述网格系统的作用原理。

简单的说,网格系统就是将网页的总宽度分为12等份,开发人员可以自由的分配项目中的列所占的份数。

2、使用JavaScript脚本调用模态框时,需要使用什么方法?

调用模态框的方法.modal()。

答案

自测试卷1

一、选择题答案

1.D 2.C 3.D 4.C 5.A 6.C 7.C 8.A 9.D 10.A

二、填空题答案

1、col-12 col-md-4

2、href

3、list-group,list-group-item

4、spinner-border

5、pagination-sm、pagination、pagination-lg。

三、简答题答案

1、将英文转换为大写,所添加的类名为:text-uppercase,转换为小写,所添加的类名为:text-lowercase

2、设置向左浮动的类名:.float-left;设置向右浮动的类名:.float-right;清除浮动的类名:.clearfix。

自测试卷2

一、选择题答案

1.D 2.C 3.D 4.C 5.D 6.B 7.D 8.B 9.B 10.C

二、填空题答案

1、title

2、float-sm-left float-md-right

3、disabled

4、list-group,list-group-item

5、2

三、简答题答案

1、一共有三种。第一种:col-{数字1~12},表示该项目占据该行的多少格;第二种,直接添加类名col,表示该行的.col平分剩余的空间;第三种:添加类名col-auto,表示其宽度正好能适应内容。

2、设置元素方式有五种,分别是:

无特殊定位,类名为.position-static;

相对定位,类名为.position-relative;

绝对定位,类名为position-absolute;

固定定位,类名为position-fixed;

粘性定位,类名为position-stikey。

自测试卷3

一、选择题答案

1.C 2.C 3.C 4.A 5.D 6.C 7.D 8.A 9.A 10.B

二、填空题答案

1、btn-group-vertical

2、collapse(“toggle”)

3、Card-body

4、position-absolute ,position-relative

5、collapse

三、简答题答案

1、Bootstrap中自定义弹性项目在纵轴上的对齐方式时,需要为该弹性项目添加align-self-*,具体可以是align-self-start、align-self-center、align-self-end、align-self-baseline、align-self-stretch

2、为选项卡添加href属性,为选项卡的内容添加id属性,href属性值对应id属性值。

自测试卷4

一、选择题答案

1.B 2.C 3.D 4.B 5.C 6.C 7.B 8.A 9.D 10.C

二、填空题答案

1、ml-auto、mr-auto

2、rounded-circle

3、弹性布局或网格布局

4、card-img-overlay

5、format

三、简答题答案

1、为进度条添加进度条动画需要在progress-bar上添加.progress-bar-animated。

2、有四个,分别是向上展开(类名为.dropup)、向下展开(类名为.dropdown)、向左展开(.dropleft)和向右展开(.dropright)

自测试卷5

一、选择题答案

1. C 2.D 3.C 4.A 5.D 6.B 7.C 8.C 9.A 10.C

二、填空题答案

1、项目二、项目一、项目三

2、message

3、flex-row、flex-row-reverse、flex-column、flex-column-reverse

4、spinner-grow

5、d-none d-md-block

三、简答题答案

1、简单的说,网格系统就是将网页的总宽度分为12等份,开发人员可以自由的分配项目中的列所占的份数。

2、调用模态框的方法.modal()。


本文标签: 添加 项目 使用 设置 名为