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（ 对）。
响应式布局是指页面可以根据不同的终端进行自适应的布局方式（ 对 ）。