前 25 名 Bootstrap 面试问题和答案 [针对应届生和有经验者]

如果您是一名移动 Web 开发人员，您可能已经听说过 Bootstrap 及其在构建快速、响应迅速且设计美观的 UI 方面的重要性。 提供直观灵活的用户界面和用户体验 (UI/UX) 是当今每个企业的首要任务。 Bootstrap 可以帮助您做到这一点！

由于企业热衷于为各种屏幕尺寸的设备开发可调节的前端设计，因此今天熟练使用 Bootstrap 是值得的。

因此，如果您正在开始技术职业或正在寻找更高的职位，这里有一些最常见的 Bootstrap 面试问题和答案，可帮助您找到理想的工作。 所以，事不宜迟，让我们开始吧！

前 25 个 Bootstrap 面试问题和答案

问题一：什么是引导程序？

Bootstrap 是一个响应迅速且易于使用的前端框架，用于使用 HTML、CSS 和 JS 创建 Web 应用程序。 为了用户的利益，它具有快速直观的布局。 Bootstrap 允许用户使用现有的设计模板为移动应用程序构建清晰和美观的用户界面。 它的功能包括下拉菜单、按钮、表单、字形图标和警报选项卡，仅举几例。

问题 2：Bootstrap 的关键组件是什么？

Bootstrap 加载了许多组件，为出色的用户体验让路。 其中包括交互功能，如弹出窗口、下拉菜单、导航栏、按钮、表单、警报等。

以下是 Bootstrap 的关键组件：

1. JS 插件：这是 JS 和 jQuery 插件所在的地方
2. 自定义：用于自定义框架
3. CSS：包括 CSS 文件
4. 脚手架：包含网格系统、背景样式等

问题 3：是什么让 Bootstrap 成为移动和 Web 开发的有效选择？

Bootstrap 快速且易于使用的布局允许更快地开发移动和 Web 应用程序。 包含的设计模板具有高度响应性，可自动调整自己以适应不同的屏幕尺寸，而不会影响网页的本质。

问题 4：Bootstrap 的各种功能是什么？

以下是 Bootstrap 的一些功能：

– 它是一个免费的开源平台； 允许开发人员为其改进做出贡献。

– Bootstrap 快速、响应迅速且非常易于使用

- 兼容所有浏览器

– Bootstrap 有丰富的设计和模板库可供选择

问题 5：什么是 Glyphicons？

Bootstrap 中的字形图标是字体格式的图标，用于表示警告、删除、缩放、编辑等操作。单个类中包含大约 200 个此类图标。

使用这些字形图标的语法是：

<p><span class = “glyphicons glyphicon-pencil”></span></p>

问题 6：解释 Bootstrap 中的下拉菜单和按钮组。

下拉菜单是一个动态切换菜单，其中包含其下的链接项目列表。 它是网站中最简洁的设计元素之一。

使用这些下拉菜单的语法是：

<div class= “dropdown”><!– 使用 .dropdown-menu 类在此列出您的列表 –></div>

按钮组是以相邻方式放置的一系列按钮。 这个 Bootstrap 组件要求首先定义具有 .btn-group 类的划分元素。 之后，按钮元素使用.btn 类嵌套。

语法如下：

<div class="btn-group"><button class="btn">正确</button></div>

<div class="btn-group"><button class="btn">错误</button></div>

使用上述两个组件，您可以创建一个名为 Button Dropdown 的新组件，该组件使您能够使用按钮元素触发下拉菜单。

句法：

<button class = “btn-default dropdown-toggle”><!- 下拉组件放在这里 –></button>

问题 7：什么是输入组？

输入组是表单控件类的扩展，它允许您在输入字段的一侧添加文本字符串或包含按钮。

.input-group 类和 .input-group-addon 类一起用于实现输入组。

句法：

<div 类=”输入组”>

<span class=”input-group-addon” id=”basic-addon1″>@</span>

<input type=”text” class=”form-control” placeholder=”Username” aria- describeby=”basic-addon1″>

</div>

问题 8：与 Bootstrap 的进度条一起使用的四个上下文类是什么。

以下是与 Bootstrap 的进度条一起使用的四个上下文类：

1. 进步-成功
2. 进度信息
3. 进度警告
4. 进度危险

问题 9：Bootstrap 中有多少种不同的按钮样式？ 这些是什么？

有 7 种不同的样式可以使用 Bootstrap 按钮。 它们如下：

1. .btn 信息
2. .btn-警告
3. .btn-危险
4. .btn-成功
5. .btn 链接
6. .btn-primary
7. .btn-默认

问题 10：解释引导警报。

引导警报用于创建假定警报消息。 这样做主要是为了设置消息的样式，以便它们对用户来说更明显。

以下是警报中的四个类：

1. .alert-成功
2. .alert 信息
3. .alert-警告
4. .alert-危险。

问题 11：如何在 Bootstrap 中创建垂直或基本表单？

以下是在 Bootstrap 中创建垂直基本表单的步骤：

第 1 步：向父 <form> 元素添加一个角色表单。

第 2 步：使用 class.form-group 在 <div> 中添加标签和控件

第 3 步：将 .form-control 类添加到每个文本 URL <input>、所有 <textarea> 以及 <select> 元素。

问题 12：Bootstrap 中的分页是什么？

正如标签所示，分页允许您将网站的内容拆分为不同的页面以简化导航。

句法：

<ul class = “pagination”><!——列表元素放在这里 –></ul>

问题 13：什么是 Bootstrap 容器？

引导容器本质上是一个添加 HTML 代码的容器。 然后，此容器站点将成为可以添加内容的页面的一部分。 这使您的 UI 更快、响应更快。

另请阅读 Bootstrap 与 Material UI

问题 14：列出 Bootstrap 的任意三个组件。

1. 导航栏：就像您网站上的导航标题

语法：<nav class = “navbar”><!—为你的导航 DOM 元素编码 –></nav>

2. Jumbotron：表现得像一个视口； 可以假设全屏专注于关键内容

语法：<div class = “jumbotron”><!—在此处将您的内容写入 DOM 元素 –></div>

3. 进度条：显示反馈，突出显示操作的进度

语法：<div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

问题 15：Bootstrap 中有哪两种布局？

1. 流体布局
2. 固定布局

问题 16：什么是流体布局？

当设计中需要使用屏幕的总宽度时，Fluid Layout 是一个有用的功能。 当您选择此选项时，布局会根据浏览器大小自行调整。

问题17：什么是固定布局？

固定布局与流体布局不同，它不会根据浏览器的大小自行调整。 但是，它在 940 像素时仍然快速且响应迅速。

问题 18：Bootstrap 中的 Modal Plugin 是什么？

作为一个层放置在父窗口之上的继承窗口称为模态窗口。 此窗口通过使其功能化来增加用户体验的价值。 用于创建模态窗口的插件称为模态插件。

问题 19：Bootstrap 折叠元素是什么？

您可以在没有 JavaScript 代码的情况下折叠任何 Bootstrap 元素。 这可以通过将 data-toggle= ”collapse” 添加到控制器元素来完成。 还包含数据目标以使其控制折叠元素。

要使用此引导功能，请使用 .collapse(options)。

问题 20：定义一个 Bootstrap 井？

Bootstrap well 类似于 Bootstrap 容器，可以帮助内容在页面上看起来更加隐蔽和干净。 它也可以通过添加 .well 类来包装内容。

问题 21：Bootstrap 中的 Carousel 插件是什么。

Carousel 插件允许您在网页上创建滑块。 滑块允许将大块内容嵌入页面上的小空间。

您可以使用的一些轮播插件是：

.carousel（选项）

.carousel('暂停')

.carousel（循环'）

.carousel('prev')

.carousel('下一个')

问题 22：解释以下代码的输出。

<div 类=“进度”>

<div class=”progress-bar progress-bar-success” style=”width: 65%”>

<span class=”sr-only”>75% 成功完成</span>

</div>

<div class=”progress-bar progress-bar-warning” style=”width: 20%”>

<span class=”sr-only”>30% 完成并出现警告</span>

</div>

<div class=”progress-bar progress-bar-danger” style=”width: 15%”>

<span class=”sr-only”>15% 未完成</span>

</div>

</div>

答：上述代码的输出将在进度条上显示全宽和完全填充的结果。 这是因为当 Bootstrap 放置在同一个进度父元素中时，会将多个条形图堆积成一个条形图。 此外，总进度条总和为 100%。

问题23：说明Bootstrap中用于代码显示的代码？

答：有两种代码用于代码显示。 他们是：

1. <code> 标签
2. <pre> 标签

问题 24：解释 Bootstrap 中的 Normalize。

Bootstrap normalize 是 Bootstrap 上的一项功能，使用它可以使用一个小的 CSS 文件来提高跨浏览器的一致性。

问题25：Bootstrap中自定义分页链接的方法是什么？

使用 .disabled 表示不可点击的链接，使用 .active 引用当前页面。

结帐： Bootstrap 与 Material UI

从世界顶级大学在线学习软件课程。 获得行政 PG 课程、高级证书课程或硕士课程，以加快您的职业生涯。

结论

我们希望这些问题和答案能帮助您重新了解 Bootstrap 的知识。 祝你面试顺利！

如果您有兴趣了解有关全栈软件开发的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发执行 PG 计划，该计划专为工作专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和任务、IIIT-B 校友身份、实用的实践顶点项目和顶级公司的工作协助。