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-smweb前端开发笔试题库
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、如果要将项目进行换行时，可以新添加w实现
9、在引用了bootstrap的前提下，下面代码中所实现的项目的顺序是（）
<div style="" class="d-flex">
<div class="order-2">项目1</div>
<div class="order-1">项目2</div>
<div>项目3</div>
</div>
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的前提下，下面代码中所实现的项目的顺序是（）
<div style="" class="d-flex">
<div class="order-2">项目1</div>
<div class="order-1">项目2</div>
<div>项目3</div>
</div>
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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论