Web前端开发1+x(中级) Bootstrap知识点

在Bootstrap中关于弹性布局的属性错误的是( D  )。
A、flex
B、flex-wrap  
C、justify-content
D、flex-container
Flex样式: 使用.d-flex和.d-inline-flex 实现开启 flex 布局样式。

弹性容器中包裹弹性子元素可以使用以下三个类:
 .flex-nowrap (默认不包裹), 
 .flex-wrap(包裹) 
 .flex-wrap-reverse(进行项目排序顺序的倒序)。

内容排列可以设置弹性盒子内子元素的位置,
justify-content-* 类用于修改弹性子元素的排列方式,* 号

允许的值有:start (默认), end, center, between 和 around。


D选项flex-container属性错误。



在Bootstrap中,( C  )不是媒体特性的属性。
A、device-width
B、width
C、background
D、orientation
device-width属性输出设备的屏幕可见宽度。
width定义输出设备中的页面可见区域宽度。
orientation调整屏幕方向的操作。

background 设置控件的背景色,不是媒体特性的属性。

系统会自动分最多12列

Bootstrap 中显示标签的 class 的是(       B         )。
A、row
B、label
C、form
D、level
row 行内容显示,使用行在水平方向创建一组列。

label 标签主要用来显示提示信息等内容,它的基本样式通过.label类实现。

form和level不属于class类。



A.<576px 像素的为超小屏幕,用 .col-xs*
B.≥576px 像素的为小屏幕,用 .col-sm-*
C.≥768px 像素的为中等屏幕,用 .col-md-*
D.≥992px 像素的则为大屏幕,用 .col-lg-*
E.≥1200px像素的则为超大屏,用 .col-xl-*



Bootstrap中,下面可以实现列偏移的类是?( D  )

A、.col-md-push-*

B、.col-md-pull-*

C、.col-md-move-*

D、.col-md-offset-*
.col-md-push-*和.col-md-pull-*类的内置网格列的顺序,其中*范围是从1到11,可以用来互换位置。

.col-md-move-*                没有这个类。

.col-md-offset-*可以实现偏移,这些类会把一个列的左外边距(margin)增加*列,其中*范围是从1到


在Bootstrap中,通过在 <img> 标签添加(  A )类能够让图片支持响应式设计。

A、.img-responsive

B、.img-rounded

C、.img-circle

D、.img-thumbnail
给<img>添加 .img-responsive样式就可以实现图片响应式。

.img-rounded可以把图片的四个角改成圆角。

.img-circle图片剪裁。

.img-thumbnail给图片加一个圆角的边框。



Bootstrap中,通过添加( A  )类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

A、.table-condensed

B、.table-hover  

C、.table-bordered

D、.table-striped  
table-condensed表格中的单元格紧凑一些。

.table-hover 在<tbody>内的任一行启用鼠标悬停状态。

.table-bordered为所有表格的单元格添加边框。

.table-striped 在<tbody>内添加斑马线形式的条纹。


在Bootstrap中,下列( D )不属于按钮尺寸。
A、.btn-lg
B、.btn-sm
C、.btn-xs
D、.btn-md

使用.btn-lg类创建一个大按钮。

使用.btn-sm类创建一个小按钮。

使用.btn-xs类创建一个超小按钮。

.btn-md不属于按钮尺寸。


关闭modal的按钮应该加什么属性(A  )
A、data-dismiss= 'modal '
B、data-toggle= 'modal '
C、data-spy= 'modal'
D、data-hide= 'true'

data-dismiss="modal",。在这里它被用于关闭模态窗口。
data-toggle="modal", 用于打开模态窗口。



Bootstrap表单控件样式为( A )
A、form-control
B、form-group
C、form-inline
D、form-group-sm
给表单控件使用form-control会实现一些定制效果。
1、宽度变成了100%;
2、设置了一个浅灰色(#ccc)的边框;
3、具有4px的圆角;
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化;
5、设置了placeholder的颜色为#999。

form-group 一般用于div, 增加盒子的间距。
form-inline创建一个内联表单。
form-group-sm控制大小。

以下不属于Bootstrap的表格样式的是(C  )
A、table
B、table-hover
C、radio
D、table-responsive
table主要有三个作用:
1、给表格设置了margin-bottom:20px以及设置单元内距;
2、在thead底部设置了一个2px的浅灰实线;
3、每个单元格顶部设置了一个1px的浅灰实线。
table-hover:鼠标悬停高亮的表格。
table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失)。


Bootstrap中,下列(B)类不属于button的预定义样式。
A、.btn-success
B、.btn-warp
C、.btn-info
D、.btn-link
.btn-success 表示操作成功后的按钮样式。
.btn-info 表示点击按钮后会弹出提示信息。
.btn-link表示维护按钮行为,同时使其看起来像一个链接,从而不强调按钮。
btn-danger 表示这个动作危险或存在危险。
btn-warning 提醒应该谨慎采取这个动作。
btn                为按钮添加基本样式。
.btn-default                表示默认的标准按钮。


Bootstrap 按钮的预定义样式有(         ABC       )。
A、btn-info
B、btn-danger
C、btn-warning
D、btn-null
null不是预定义样式

Bootstrap提供了一些类来定义按钮的样式,下列哪些是正确的样式( ABCD  )。
A、.btn
B、.btn-default
C、.btn-success
D、.btn-info


Bootstrap中,关于flex-direction属性正确的是( BCD  )。
A、col
B、row
C、row-reverse
D、column-reverse
row 默认值,灵活的将项目水平显示。
row-reverse 与row相同,但是以相反的顺序。
column-reverse 灵活的将项目垂直显示,反方向显示。
col不属于flex-direction属性。

以下关于Bootstrap格栅描述不正确的是( B  )
A、“justify-content-类型”可在行的div标签中实现水平布局
B、“justify-items-类型”可在行的div标签中实现水平布局
C、栅格系统默认每一行最多12列
D、“offset-数字”可实现格栅偏移  
justify-content-类型 用于修改弹性子元素的排列方式,允许的值有:start (默认左对齐), end(右对齐), center(居中显示), between 或 around。
justify-items没有这个类。
栅格系统默认每一行最多12列。
offset-数字 类后加数字可以实现偏移。

Bootstrap框架中的 .img-responsive 类可以让图片支持响应式布局,它的实现原理是(   )。
设置max-width: 100%;和height: auto;

在移动端使用Bootstrap时,导航条在屏幕显示时会被折叠,实现显示和折叠功能的按钮需要如何处理(   )。
折叠按钮设置data-toggle=’collapse’,折叠容器需要添加collapse类


在Bootstrap中实现.nav的内容按比例填充所有可用空间,应该加哪个类( B  )。
A、.nav-center
B、.nav-fill
C、.nav-left
D、.nav-right
nav-fill,按比例水平填充对齐(水平空间全部占用)。
通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。

在Bootstrap中,使用tab标签页插件,要显示的内容要放在下方哪个容器里面( D  )。
A、.content
B、.tab-group
C、.tab-body
D、.tab-content
使用tab标签页插件,容器需要带"tab-content"类名,
下面都要求带"tab-pane"类名。显示的内容要放在"tab-content"容器里面。

Bootstrap4中Flex布局设置子元素垂直居中对齐的CSS类为(  B )。
A、align-items-start
B、align-items-center
C、align-items-end
D、justify-content-center
justify-content-center子元素水平方向居中对齐
align-items-center子元素垂直居中对齐

Bootstrap4中,通过添加( C  )类可以为表格增加边框。
A、.table-condensed
B、.table-hover
C、.table-bordered
D、.table-striped
table-condensed主要是调整了td的padding值
table-hover可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
table-bordered给表格加外边框
table-striped可以使奇数行的背景设为灰色

Bootstrap 的核心功能特点有(      BD            )。
A、支持路由
B、跨设备、跨浏览器
C、面向对象
D、响应式布局
Bootstrap主要核心功能特点:
1、跨设备、跨浏览器:可以兼容现代所有主流浏览器。
2、响应式布局:支持pc端的各种分辨率的显示,还支持ipad,手机等屏幕的响应式切换显示。
3、提供全面的组件: 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组
件,方便开发者调用。
4、内置jQuery插件: 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种
常规特效。
5、支持HTML5和CSS3。
6、支持LESS动态样式
 

Bootstrap中,下列哪些属于媒体查询的关键词(  BCD )。
A、or
B、only
C、not
D、and
only关键词用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
not关键词是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。

在Bootstrap中,栅格系统的标准用法( BCD   )是正确的。
A、<div class=”row”><div class=”container”></div></div>
B、<div class=”col-md-1″><div class=”row”></div></div>
C、<div class=”row”><div class=”col-md-1″></div></div>
D、<div class=”container”><div class=”row”></div></div>
container是用于搭建最外层框架的,要实现响应式布局,就必须在class里面加上,
grid网格系统位于container样式之内。排除a选项。

在Bootstrap中,以下的( CD  )是文本对齐的方式。
A、.text-bottom
B、.text-middle
C、.text-right
D、.text-justify
Bootstrap 文本对齐:
.text-left 设置文本左对齐。
.text-center 设置文本居中对齐。
.text-right 设置文本右对齐。
.text-justify 设置文本两端对齐,段落中超出屏幕部分文字自动换行。


在Bootstrap中,下列(  BCD )属于图片处理的类。
A、.img-radius
B、.img-circle
C、.img-thumbnail
D、.img-rounded
Bootstrap 三种图片形式:
.img-rounded:添加 border-radius:6px 来获得图片圆角。
.img-circle:添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

以下属于Bootstrap栅格布局容器的有。(  AB )
A、<div class=”container”></div>
B、<div class=”container-fluid”></div>
C、<div class=”well”></div>
D、<div class=”table-responsive”></div>

在Bootstrap4中,栅格系统的标准用法正确的是( ABD  )。
A、<div class= "container "><div class= "row "></div></div>
B、<div class= "row "><div class= "col-md-1 "></div></div>
C、<div class= "row "><div class= "container "></div></div>
D、<div class= "col-md-1"><div class= "row "></div></div>


.container 容器,.container 类用于固定宽度并支持响应式布局的容器。.
container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器,流式布局容器。
属于Bootstrap栅格布局容器.container 类和.container-fluid类。

下列关于Bootstrap栅格系统说法正确的是( BCD  )。
A、栅格系统每一行不能少于12列
B、通过“行(row)”在水平方向创建一组“列(column)”
C、“行(row)”必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)
D、如果一“行(row)”中包含了的“列(column)”大于12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
栅格系统每一行最多12列(不是必须占满12列)大于12列,则会另起一行。
Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。
数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)

在Bootstrap4中,下列( ABC  )属于定位工具类。
A、.position-static
B、.position-relative
C、.position-absolute
D、.position-fix
position-static默认值
position-fixed固定定位
position-relative相对定位
position-absolute绝对定位

Bootstrap允许以两种方式显示代码:第一种是<code>标签,第二种是<pre>标签(  对 )。 
Bootstrap插件全部依赖jQuery( 对)。
响应式布局是指页面可以根据不同的终端进行自适应的布局方式( 对 )。

  • 8
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值