Bootstrap常见的面试题和答案合集（面试必备）

文章图片
在处理响应式、移动优先的前端 Web 开发时，Bootstrap 是最流行的 CSS 框架选项。此外，它是免费和开源的。
Bootstrap 于 2011 年推出，拥有构建按钮、表单、导航、排版和其他界面组件所需的所有基于 CSS 和 JS 的设计模板。
热门Bootstrap面试题和答案合集Web 开发工作面试中很有可能会出现基于 Bootstrap 的问题。所以，你需要保持你的 Bootstrap 准备来抓住这个角色。Bootstrap常见面试题有哪些？为了帮助你解决这个问题，以下是最重要的 Bootstrap 面试问题及其答案：
问： Bootstrap Grid System 是什么意思？答：Bootstrap Grid System 是一个响应式、移动优先的系统，可根据设备或视口大小的增加扩展到 12 列。该系统具有用于简单布局选项的预定义类和用于生成有效语义布局的强大混合。
问题：请解释 Bootstrap 中的 Normalize。答：为了建立跨浏览器的一致性，Bootstrap 使用了 Normalize。它是一个小的 CSS 文件，能够在 HTML 元素的默认样式中提供更好的跨浏览器一致性。此外，Normalize.css 是CSS resets的 HTML5-ready 和现代替代品。
问题：能否列举Bootstrap支持的各种列表？Bootstrap面试题解析：以下是 Bootstrap 支持的三种列表类型：

定义列表——这种类型的列表允许每个列表项同时具有 < dt> 和 < dd> 元素。< dt> 表示定义术语，即被定义的术语或短语。< dd> 元素包含 < dt> 元素的定义。
有序列表 -这种类型的列表遵循某种顺序。此外，它以数字开头。
无序列表——传统上用项目符号设计，无序列表不遵循任何特定的顺序。使用 .list-unstyled 类允许从无序列表中删除项目符号样式。要将所有列表项放在一行上，可以使用 .list-inline 类。

问题：你所说的 Glyphicons 是什么意思？你如何使用它们？答： Glyphicons 是在 Web 项目中使用的图标字体。尽管 Glyphicons Halflings 不是免费的并且通常需要许可，但它们可免费用于 Bootstrap 项目。在你希望使用 Glyphicons 的任何位置添加以下代码：

< span class=“glyphicon glyphicon-search”> < / span >

注意： - 为了适当的填充，建议在图标和文本之间留一个空格。
问题：你能解释一下如何在 Bootstrap 中使用 Dropdown 插件吗？答：在 Bootstrap 中可以通过三种方式切换下拉插件的隐藏内容：

使用数据属性- 将 data-toggle = “dropdown” 添加到某个按钮或链接以切换下拉列表。例如，

< div class = "dropdown"> < a data-toggle = "dropdown" href = "https://www.lsbin.com/#">Dropdown trigger< /a> < ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... < /ul> < /div>

使用 JavaScript -以下方法用于通过 JS 调用下拉切换：

$('.dropdown-toggle').dropdown()

使用 data-target 属性代替 href="https://www.lsbin.com/#" – 如果 Web 浏览器未启用 JavaScript，则最好保持链接完整无缺。为此， data-target 属性优于 href="https://www.lsbin.com/#"。例如，

< div class = "dropdown"> < a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "https://www.lsbin.com/somepage.html"> Dropdown < span class = "caret">< /span> < /a> < ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel"> ... < /ul> < /div>

问题：请提供 Bootstrap 中输入组的解释。答：Bootstrap面试题和答案合集 - 输入组只是 Bootstrap 中的扩展表单控件。可以使用输入组轻松地将按钮或文本添加到基于文本的输入中。向输入字段添加和预先添加内容允许向用户输入添加公共元素。
你可以通过以下方式将元素附加或添加到 .form-control 中：

使用类 .input-group 将其包装在 < div> 元素中
使用相同的 < div> 元素，将额外的内容放入带有 .input-group-addon 类的 < span> 元素中
最后，根据需要将 < span> 元素放在 < input> 元素之前或之后

问题：你将如何在 Bootstrap 中创建选项卡式、药丸和垂直药丸导航菜单？回答：

用于创建选项卡式导航菜单
1. 从带有 .nav 基类的基本无序列表开始
2. 现在，添加 .nav-tabs 类
用于创建药丸导航菜单
1. 从带有 .nav 基类的基本无序列表开始
2. 现在，添加 .nav-pills 类
用于创建垂直药丸导航菜单
1. 使用 .nav-stacked 类垂直堆叠药丸
2. 现在，添加 .nav 和 .nav-pills 类

问题：你对 Bootstrap 导航栏的理解是什么？你将如何创造一个？Bootstrap面试题解析：Bootstrap 最突出的功能之一是导航栏是一个响应式“元”组件，用作应用程序或网站的导航标题。应用程序或网站中可以有多个导航栏。
在移动视图中，当可用视口宽度增加时，导航栏会折叠并变为水平。导航栏包括基本导航和站点名称的样式。以下是在 Bootstrap 中创建导航栏的方法：

将 .navbar 和 .navbar-default 类添加到 < nav> 标签
接下来，将 role = “navigation” 添加到 < nav> 元素
现在，将 .navbar-header（标题类）添加到 < div> 元素。为了使文本稍大，包含一个 < a> 元素与 navbar-brand 类
添加带有 .nav 和 .navbar-nav 类的无序列表，用于向 Bootstrap 导航栏添加链接

问题：你能解释一下 Bootstrap 面包屑吗？答：Bootstrap 面包屑是显示网站基于层次结构的信息的好方法。简单地说，它是一个带有 .breadcrumb 类的无序列表。CSS 自动为 Bootstrap 面包屑添加分隔符。
在博客中，面包屑可以显示类别、发布日期或标签。它指示当前页面在导航层次结构中的位置。
Bootstrap常见面试题有哪些：如何在 Bootstrap 中创建和自定义缩略图？答：要使用 Bootstrap 创建缩略图，请在图像周围添加带有 .thumbnail 类的 < a> 标记。它将添加四个像素的填充以及灰色边框。悬停时，动画光晕勾勒出图像的轮廓。
你可以将任何类型的 HTML 内容（例如按钮、标题或段落）添加到缩略图中。这是使用 Bootstrap 自定义缩略图的方法：

将带有 .thumbnail 类的 < a> 标签更改为 < div> 标签
在 < div> 标签中添加你需要的任何内容。你可以使用默认的基于跨度的命名约定来调整大小

注意： - 如果你希望对多个图像进行分组，请将它们放在一个无序列表中。每个列表项都会向左浮动。
问题：请解释 Bootstrap 警报。另外，请说明你将如何创建 Bootstrap Dismissal Alert。答：Bootstrap Alerts 用于为用户设置消息样式，为典型用户操作提供上下文反馈消息。要创建 Bootstrap 解除警报：

创建一个包装器 < div> 并添加一个 .alert 类和 4 个上下文类之一，即 .alert-danger、.alert-info、.alert-success 和 .alert-warning，用于添加基本警报
将可选的 .alert-dismissable 类添加到 < div>
接下来，添加一个关闭按钮
最后，使用带有 data-dismiss = “alert” 数据属性的 < button> 元素

问题：你能解释一下如何使用 Bootstrap 创建备用进度条和条纹进度条吗？答：用于创建各种样式的进度条：

添加带有 .progress 类的 < div>
在 < div> 中，添加一个带有 .progress-bar 类和一个 progress-bar-* 类的空 < div> （* 可以是危险、信息、成功或警告）
最后，添加一个以百分比表示的宽度的样式属性。例如，样式 = “80%”

创建条纹进度条：

添加带有 .progress 和 .progress-striped 类的 < div>
在 < div> 中，添加一个带有 .progress-bar 类和 progress-bar-* 类的空 < div> ，其中 * 可以是任何危险、信息、成功或警告
现在，添加一个以百分比表示的宽度的样式属性，例如，style = “70%”

问题：你对 Bootstrap 媒体对象的理解是什么？答：Bootstrap 媒体对象是用于构建不同类型组件的抽象对象样式，例如博客评论和推文，它们具有左对齐或右对齐的图像和文本内容。
Bootstrap 媒体对象的主要目的是使开发信息块所需的代码变得非常小。为了实现简单的可扩展性、轻量级标记和其他理想的方面，类被应用于一些简单的标记。
问题：.media 和 .useful 类在 Bootstrap 中有什么用途？答：.media 类允许媒体对象（例如音频、图像或视频）浮动到内容块的左侧或右侧。要将文章列表或评论线程添加到无序列表，我们使用 .useful 类。
问题：你知道什么是 Bootstrap 面板吗？另外，解释如何创建带有标题的 Bootstrap 面板。答：Bootstrap 面板组件用于将你的 DOM 组件放入一个盒子中。要获得基本面板，只需将 .panel 和 .panel-default 类添加到 < div> 元素。有两种方法可以将面板标题添加到 Bootstrap 面板：

将 < h1> 、< h2> 、< h3> 、< h4> 、< h5> 或 < h6> 标签中的任何一个与 .panel-title 类一起使用（添加预样式标题）
使用 .panel-heading 类（向面板添加标题容器）

问题：你能解释一下 Scrollspy 插件的用途吗？答：在 Bootstrap 中使用 Scrollspy 插件可以让你根据滚动位置定位页面的某些部分。此后，你可以根据滚动位置将 .active 类添加到 Bootstrap 导航栏。
问题：请列举可用于在 Bootstrap 中设置面板样式的各种上下文类。回答：Bootstrap 中用于设置面板样式的各种上下文类，即使它们更有意义，是：

.panel-danger
.panel-info
.panel-primary
.panel-success
.panel-warning

问题：是否可以在 Bootstrap 面板中放置表格？答：是的，可以在 Bootstrap 面板中放置表格。使用面板中的 .table 类来获取相同的无边框表格。
注意： - 如果有一个包含 .panel-body 类的 < div> 元素，那么我们需要在表格顶部添加一个额外的边框，以便明确定义分隔。如果没有包含上述类的 < div> 元素，则组件从面板标题移动到表格没有任何问题。
问题： Bootstrap well 是什么意思？答：为了让内容显得下沉或为网页添加插入效果，我们很好地使用了Bootstrap。其实就是< div> 中的一个容器。
为了创建一个 Bootstrap 井，只需用一个包含 .well 类的 < div> 包裹你想要出现在 Bootstrap 井中的整个内容。
问题：我们为什么要在Bootstrap中使用词缀插件？答：Bootstrap面试题和答案合集 - 我们使用 Bootstrap 中的附加插件将 < div> 附加到网页上的某个位置。该插件还允许为附加的 < div> 切换固定打开和关闭。社交图标是在 Bootstrap 中使用词缀插件最流行的例子。
注意： - 附加的 < div> 从网页上的特定位置开始并随之滚动。但是，在某个标记之后，它将被锁定到位，从而停止与网页的其余部分一起滚动。
问题：Bootstrap 需要什么？答：Bootstrap 作为一个前端框架，支持 HTML、JS 和 CSS 等各种 Web 应用程序的开发。
Bootstrap常见面试题有哪些：Bootstrap 有什么好处？答：它有助于开发高响应、快速且易于使用的布局。在开发具有设计模板的移动应用程序时，可以观察到 Bootstrap 的主要优势。这些模板有助于创建 UI，包括警报选项卡、下拉菜单、表单等。
问题：Bootstrap 的关键组件是什么？解释？答：Bootstrap 的关键组件包括以下内容：

脚手架：支持各种网格系统、样式、背景。
CSS：它提供用于开发 Web 应用程序的 CSS 文件。
自定义：支持自定义框架的开发。
JS Plugins：由网页设计和应用过程中需要的JS和JQuery插件组成。

问题：什么是 Bootstrap 容器？答：Bootstrap 容器由 HTML 代码组成，可以放置这些代码以使其成为高度响应和快速的 Web 应用程序。
问题：在 Bootstrap 中定义布局类型？解释？Bootstrap面试题解析：Bootstrap 中的布局有固定设计和流体布局两种。流畅的布局有助于创建可随浏览器大小调整的全宽屏幕。另一方面，固定布局无法根据浏览器屏幕自行调整，并且具有 940 像素的固定布局。
问题：我们可以在 Bootstrap 中显示代码吗？如何？答：是的，我们可以在 Bootstrap 中显示代码。它可以使用诸如 < code> 标签和 < pre> 标签之类的标签来显示。< code> 标签可以帮助显示内联代码，而 < pre> 标签可以帮助显示不同行的代码。
问题：定义 Bootstrap 警报？回答：Bootstrap 警报旨在通过添加样式并使其看起来足够吸引观众的注意力来创建警报消息。
问题：定义 Bootstrap 缩略图？答：Bootstrap 缩略图有助于使用网格系统中的布局图像、文本、视频和其他功能。这样，我们可以通过图像周围的标签添加多个缩略图。
问题：如果我们在图像周围添加许多带有缩略图类的标签会发生什么？回答：这将导致创建四个像素的填充并形成灰色边框。
问题：Bootstrap 中的标签是什么？答：Bootstrap 中的标签用于提供提示、计数和其他有助于标记网页的信息。
问题：在 Bootstrap 中使用 Jumbotron 有什么好处？答：Bootstrap 中的 Jumbotron 可用于增加标题的大小并增加着陆页的页边距。
问题：Bootstrap 中的标准化是什么？答：在 Bootstrap 中标准化是一个小的 CSS 文件。它用于创建跨浏览器一致性。
问题：在 Bootstrap 中定义面板？答：Bootstrap 中的面板是不同的组件，可以将它们放入一个框中的 DOM 组件中，目的是使用 class.panel 作为 < div> 元素检索基本面板。
Bootstrap面试题和答案合集 - 问题：Bootstrap 中的网格系统是什么？回答：Bootstrap 中的网格系统有助于在网页上组成多达 12 列。这样，它有助于将网页内容放在不同的列中，这些列可以用作标题或副标题。
问题：Bootstrap 中有网格类吗？答：是的，Bootstrap 中有四个网格类。这些包括 xs、sm、md 和 lg。
问题：xs grid类的作用是什么？答：xs grid类用于手机屏幕，宽度小于786 px。
问：sm网格类的作用是什么？答：sm 网格类用于宽平板电脑屏幕，宽度超过 786 像素。
问：md grid类的作用是什么？答：md 网格类用于小型笔记本电脑屏幕，宽度等于或大于 992 像素。
问：lg grid类的作用是什么？答：lg 网格类用于笔记本电脑和台式机的较大屏幕，其宽度等于甚至大于 1200 像素。
问题：什么是全局样式？它们是否在 Bootstrap 中使用？答：全球风格代表国际平台上使用和接受的字体大小、行高和其他特征的标准化版本。它们在 Bootstrap 中用于 Bootstrap 默认排版。
问题：Bootstrap Default Typography 的全局样式是什么？答：Bootstrap Default Typography 的全局样式包括以下默认值：

字体大小 14 px
1.428 的行高。
带有无衬线回退的 Helvetica 和 Arial 字体样式

正文和段落中都需要使用上述所有样式、大小和高度。
问题：正确运行 Bootstrap 有什么先决条件吗？答：是的，JQuery 有一个先决条件，它是正确运行 Bootstrap 所必需的。它是 Bootstrap 中唯一的 JavaScript 插件。
问：Foundation 和 Bootstrap 有区别吗？答：是的，Foundation 和 Bootstrap 是有区别的。基金会支持 SASS 处理器，主要用于移动 UI 设计目的。另一方面，Bootstrap 支持使用较少的预处理器设计移动和桌面 Web 门户。
问题：你知道 Bootstrap 中的转换插件吗？为什么使用它？答：是的，我知道 Boostrap 中的过渡插件。这用于提供简单的过渡效果。这些包括淡入淡出甚至在模态中滑动。
问题：什么是 Affix 插件，它如何帮助 Bootstrap？答：词缀插件用作网页上的社交图标。它允许 < div> 附加到页面的特定位置。它会从一个位置开始，但是当页面被点击时，它会移开并获得一个带有 < div> 的块。这样，它有助于滚动网页的其余部分。
问题：Bootstrap 中的 scrollspy 插件是什么？答：Bootstrap常见面试题有哪些？Bootstrap 中的 Scrollspy 插件支持自动更新要应用的导航插件选项。这有助于使用滚动位置获取网页的部分。可以使用 .active 类来完成，该类可以添加到基于导航栏的滚动位置。
问题：我们可以使用标题创建 Bootstrap 面板吗？Bootstrap面试题解析：是的，我们可以使用标题创建一个 Bootstrap 面板。它可以通过两种方式完成。

第一种方式：我们可以利用 .panel-heading 类在面板中添加标题容器。
第二种方式：我们可以使用带有 .panel-title 类的标题标签，例如 < h1> ,< h2> ,< h3> ,< h4> ,< h5> 和 < h6> 。这将有助于根据我们的选择为标题提供更多样式。

问题：Bootstrap 中的 Jumbotron 是什么？答：Bootstrap 中的 Jumbotron 用于增加标题的大小并为登录页面内容应用边距。它可以使用 < div> 中的容器和 .jumbotron 类来创建。
问题：在 Bootstrap 中定义主体副本？答：Bootstrap 中的主要正文副本用于向段落添加各种上升。它可以使用 class="lead" 来应用，有助于扩大字体大小和增加高度。
Bootstrap面试题和答案合集 - 问题：你知道导航栏在 Bootstrap 中是如何工作的吗？答：是的，导航栏与应用程序或网站的导航标题一起使用。它作为一项重要功能，有助于在 Web 应用程序中创建高度响应的元组件。除此之外，导航栏永远不会在移动视图中折叠，并且随着可用视口宽度的增加（由于移动电话的倾斜）而变得水平和垂直。
结论【Bootstrap常见的面试题和答案合集（面试必备）】因此，这完成了顶级 Bootstrap 面试问题和答案列表的列表。我希望你发现它们对准备即将到来的 Bootstrap 面试有用。