前端期末考试试题及参考答案(09)

Posted 2023-01-11 谷哥的小弟

---

版权声明

• 本文原创作者：谷哥的小弟
• 作者博客地址：http://blog.csdn.net/lfdfhl

---

一、 填空题

1. 在BootStrap中，______类用于定义品牌图标。
2. 所有的导航组件都需要使用一个基类______实现导航的基础效果。
3. .navbar类结合.navbar-______-*（sm|md|lg|xl）类可以创建响应式的导航栏
4. 在Bootstrap4 中，可以使用 .card 与______类来创建一个简单的卡片。
5. Flex弹性布局提供了一系列的类来设置导航对齐方式，其中可以使用______类来设置导航居中显示效果。

二、 判断题

1. Bootstrap中可以使用.flex-column类创建垂直导航。（ ）
2. Bootstrap导航栏的默认样式不能修改。（ ）
3. Chart.js是一款基于html5的javascript图表库，它可以提供直观、生动、可交互、可个性化定制的可视化图表。（ ）
4. 在使用图片卡片时，如果图片要设置为背景，可以使用.card-img-overlay类。（ ）
5. 使用.nav-tabs类可以将导航转化为标签式导航，然后对于选中的选项使用.current 类来标记。（ ）

三、 选择题

1. 下列选项中，关于Bootstrap中卡片组件，说法错误的是（ ）。
   A. .card-header类用于创建卡片的头部样式，
   B. .card-footer 类用于创建卡片的底部样式
   C. 在头部元素上使用.card-text 类来设置卡片的标题
   D. .card-link 类用于给链接设置颜色
2. 下列选项中，关于Bootstrap导航栏说法错误的是（ ）。
   A. 可以使用.navbar类来创建一个标准的导航栏
   B. 导航栏上的选项可以使用 < ul> 元素并添加 class=“navbar-nav” 类
   C. 然后在 < li> 元素上添加.nav-item类来定义导航列表
   D. < a>元素上使用.nav-text类来定义导航标签中的内容
3. 下列选项中，关于导航组件提供的一系列类的说法错误的是（ ）。
   A. .nav-justified 类可以设置导航项齐行等宽显示
   B. .nav-pills 类可以将导航项设置成胶囊形状
   C. .justify-content-end 类可以设置导航右对齐效果
   D. 导航默认为垂直导航
4. 下列选项中，Chart.js使用HTML5的canvas元素可以实现哪些图形（ ）。
   A. 折线图 B. 柱状图 C. 饼图 D. 以上全部正确
5. 在Bootstrap中，可以使用以下哪些类来创建不同颜色的导航栏（ ）。
   A. .btn-success类 B. .btn-info类 C. .btn-primary类 D. 以上全部正确

四、 简答题

1. 请简述Feather图标的使用方式。
2. 请简述Bootstrap中的导航都有哪些。

参考答案

一、 填空题

1. .nav-brand
2. .nav
3. expand
4. .card-body
5. .justify-content-center 类

二、 判断题

1. 对
2. 错
3. 对
4. 对
5. 错

三、 选择题

1. C
2. D
3. D
4. D
5. D

四、 简答题

1、请简述Feather图标的使用方式。

第一步：引入
在页面中引入Feather开源图标文件：两种方式任选其一即可。

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

第二步：使用

<i data-feather="home"></i>

第三步：调用

<script>
feather.replace();
</script>

2、请简述Bootstrap中的导航都有哪些。

基础导航
标签式导航
pills导航
下拉菜单导航