Bootstrap - 面试问题

亲爱的读者，这些BOOTSTRAP 面试问题专为帮助您了解在BOOTSTRAP 语言面试中可能遇到的问题类型而设计。根据我的经验，优秀的 interviewers 很少会在面试前计划好要问哪些特定问题，通常问题会从该主题的一些基本概念开始，然后根据后续讨论以及您的回答继续提问。

什么是 Twitter Bootstrap？

Bootstrap 是一款简洁、直观且功能强大的移动优先前端框架，可以加快并简化 Web 开发。它使用 HTML、CSS 和 Javascript。

为什么要使用 Bootstrap？

Bootstrap 可以用于：

移动优先方法 - 从 Bootstrap 3 开始，该框架在整个库中都包含移动优先样式，而不是在单独的文件中。
浏览器支持 - 它受所有主流浏览器支持。
易于上手 - 只要掌握 HTML 和 CSS 的知识，任何人都可以开始使用 Bootstrap。此外，Bootstrap 官方网站提供了良好的文档。
响应式设计 - Bootstrap 的响应式 CSS 可以适应桌面电脑、平板电脑和手机。
为开发人员构建界面提供了一个干净且统一的解决方案。
它包含美观且功能强大的内置组件，这些组件易于自定义。
它还提供基于 Web 的自定义功能。
最棒的是，它是开源的。

Bootstrap 包含哪些内容？

Bootstrap 包含：

脚手架 - Bootstrap 提供了一个基本的结构，包括网格系统、链接样式和背景。这将在Bootstrap 基本结构部分详细介绍。
CSS - Bootstrap 带有全局 CSS 设置、使用可扩展类来设置样式和增强基本 HTML 元素以及高级网格系统等功能。这将在Bootstrap 与 CSS部分详细介绍。
组件 - Bootstrap 包含十几个可重用的组件，用于提供图标、下拉菜单、导航、警报、气泡提示等等。这将在布局组件部分详细介绍。
JavaScript 插件 - Bootstrap 包含十几个自定义 jQuery 插件。您可以轻松地全部包含它们，也可以逐个包含。这将在Bootstrap 插件部分详细介绍。
自定义 - 您可以自定义 Bootstrap 的组件、LESS 变量和 jQuery 插件以获得您自己的版本。

什么是 Bootstrap 中表格的上下文类？

上下文类允许您更改表格行或单个单元格的背景颜色。

序号	类和描述
1	.active 将悬停颜色应用于特定行或单元格
2	.success 表示成功或积极的操作
3	.warning 表示可能需要关注的警告
4	.danger 表示危险或潜在的负面操作

什么是 Bootstrap 网格系统？

Bootstrap 包含一个响应式、移动优先的流体网格系统，随着设备或视口尺寸的增加，该系统会适当地扩展到 12 列。它包含用于轻松布局选项的预定义类，以及用于生成更多语义布局的功能强大的 mixin。

什么是 Bootstrap 媒体查询？

Bootstrap 中的媒体查询允许您根据视口大小移动、显示和隐藏内容。

在 Bootstrap 中显示一个基本的网格结构。

以下是 Bootstrap 网格的基本结构：

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>      
   </div>
   
   <div class = "row">...</div>
</div>
<div class = "container">....

什么是偏移列？

偏移是用于更专业的布局的有用功能。例如，它们可以用于将列推开以获得更多间距。.col-xs = * 类不支持偏移，但可以通过使用空单元格轻松复制它们。

如何在 Bootstrap 中排序列？

您可以使用 .col-md-push-* 和 .col-md-pull-* 修饰符类轻松更改内置网格列的顺序，其中 * 的范围从 1 到 11。

如何使图像响应式？

Bootstrap 3 允许通过向 <img> 标记添加类 .img-responsive 来使图像响应式。此类将 max-width: 100%; 和 height: auto; 应用于图像，以便它可以很好地缩放至父元素。

解释 Bootstrap 中的排版和链接。

Bootstrap 设置了基本的全局显示（背景）、排版和链接样式：

基本全局显示 - 在 <body> 元素上设置 background-color: #fff;。
排版 - 使用 @font-family-base、@font-size-base 和 @line-height-base 属性作为排版基础
链接样式 - 通过属性 @link-color 设置全局链接颜色，并且仅在 :hover 上应用链接下划线。

什么是 Bootstrap 中的 Normalize？

Bootstrap 使用 Normalize 来建立跨浏览器的一致性。

Normalize.css 是一种现代的、支持 HTML5 的 CSS 重置替代方案。它是一个小型 CSS 文件，可以提高 HTML 元素默认样式的跨浏览器一致性。

什么是引导正文副本

要为段落添加一些强调，请添加类 = "lead"。这将为您提供更大的字体大小、更轻的权重和更高的行高

解释 Bootstrap 支持的列表类型。

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表 - 有序列表是按某种顺序排列的列表，并在前面加上数字。
无序列表 - 无序列表是没有特定顺序的列表，传统上使用项目符号进行样式设置。如果您不希望项目符号出现，则可以使用类 .list-unstyled 删除样式。您还可以使用类 .list-inline 将所有列表项放在一行上。
定义列表 - 在这种类型的列表中，每个列表项都可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典一样，这是要定义的术语（或短语）。随后，<dd> 是 <dt> 的定义。
您可以使用类 dl-horizontal 使 <dl> 中的术语和描述并排排列。

什么是 Glyphicons？

Glyphicons 是可以在 Web 项目中使用的图标字体。Glyphicons Halflings 不是免费的，需要许可，但是其创建者已将其免费提供给 Bootstrap 项目。

如何使用 Glyphicons？

要使用图标，只需在代码中的任何位置使用以下代码即可。在图标和文本之间留一个空格以进行适当的填充。

<span class = "glyphicon glyphicon-search"></span>

什么是过渡插件？

过渡插件提供简单的过渡效果，例如滑动或淡入模态框。

什么是模态框插件？

模态框是叠加在其父窗口上的子窗口。通常，目的是显示来自单独来源的内容，这些内容可以在不离开父窗口的情况下进行交互。子窗口可以提供信息、交互或更多功能。

如何使用下拉菜单插件？

您可以切换下拉菜单插件的隐藏内容：

通过数据属性 - 向链接或按钮添加 data-toggle = "dropdown" 以切换下拉菜单，如下所示：

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

如果您需要保持链接完整（如果浏览器未启用 JavaScript 则很有用），请使用 data-target 属性而不是 href="#"：

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

通过 JavaScript − 要通过 JavaScript 调用下拉切换，请使用以下方法 −

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

什么是 Bootstrap 轮播图？

Bootstrap 轮播图是一种灵活且响应式的添加滑块到网站的方法。除了响应式之外，其内容也足够灵活，可以包含图像、iframe、视频或任何您可能想要的内容。

什么是按钮组？

按钮组允许将多个按钮堆叠在一行上。当您需要将对齐按钮之类的项目放在一起时，这很有用。

哪个类用于基本的按钮组？

.btn-group 类用于基本的按钮组。将一系列带有 .btn 类的按钮包装在 .btn-group 中。

哪个类用于绘制按钮工具栏？

.btn-toolbar 有助于将一组 <div class = "btn-group"> 组合到 <div class = "btn-toolbar"> 中，以创建更复杂的组件。

哪些类可以应用于按钮组，而不是调整每个按钮的大小？

.btn-group-lg、.btn-group-sm、.btn-group-xs 类可以应用于按钮组，而不是调整每个按钮的大小。

哪个类可以使一组按钮垂直堆叠而不是水平排列？

.btn-group-vertical 类可以使一组按钮垂直堆叠而不是水平排列。

什么是输入组？

输入组是扩展的表单控件。使用输入组，您可以轻松地在基于文本的输入前面和后面添加文本或按钮。

通过向输入字段添加前缀和后缀内容，您可以向用户的输入添加常用元素。例如，您可以添加美元符号、Twitter 用户名的 @ 符号，或任何其他可能适合您的应用程序界面的内容。

要在 .form-control 前或后添加元素 −

将其包装在一个带有 .input-group 类的 <div> 中。
下一步，在同一个 <div> 中，将额外的内容放在带有 .input-group-addon 类的 <span> 内。
现在将此 <span> 放在 <input> 元素之前或之后。

如何创建选项卡式导航菜单？

要创建选项卡式导航菜单 −

从一个带有 .nav 基本类的基本无序列表开始。
添加 .nav-tabs 类。

如何创建药丸式导航菜单？

要创建药丸式导航菜单 −

从一个带有 .nav 基本类的基本无序列表开始。
添加 .nav-pills 类。

如何创建垂直药丸式导航菜单？

您可以使用 .nav-stacked 类以及 .nav、.nav-pills 类将药丸垂直堆叠。

什么是 Bootstrap 导航栏？

导航栏是 Bootstrap 网站的突出功能之一。导航栏是响应式的“元”组件，充当应用程序或网站的导航标题。导航栏在移动视图中折叠，并在可用的视口宽度增加时变为水平。从本质上讲，导航栏包括网站名称和基本导航的样式。

如何在 Bootstrap 中创建导航栏？

要创建默认导航栏 −

将 .navbar、.navbar-default 类添加到 <nav> 标签中。
将 role = "navigation" 添加到上述元素中，以帮助提高可访问性。
将标题类 .navbar-header 添加到 <div> 元素中。包含一个带有 navbar-brand 类的 <a> 元素。这将使文本稍微增大。
要向导航栏添加链接，只需添加一个带有 .nav、.navbar-nav 类的无序列表即可。

什么是 Bootstrap 面包屑？

面包屑是显示网站基于层次结构的信息的好方法。对于博客，面包屑可以显示发布日期、类别或标签。它们指示当前页面在导航层次结构中的位置。

Bootstrap 中的面包屑只是一个带有 .breadcrumb 类的无序列表。分隔符由 CSS（bootstrap.min.css）自动添加。

哪个类用于基本的分页？

.pagination 类用于在页面上添加分页。

如何自定义分页的链接？

您可以使用 .disabled 为不可点击的链接自定义链接，并使用 .active 指示当前页面。

什么是 Bootstrap 标签？

Bootstrap 标签非常适合为页面提供计数、提示或其他标记。使用 .label 类显示标签。

什么是 Bootstrap 徽章？

徽章类似于标签；主要区别在于角更圆润。徽章主要用于突出显示新项目或未读项目。要使用徽章，只需将 <span class = "badge"> 添加到链接、Bootstrap 导航等。

什么是 Bootstrap 纵横标题？

顾名思义，此组件可以选择性地增加标题的大小，并为登陆页面内容添加大量边距。要使用纵横标题 −

创建一个带有 .jumbotron 类的容器 <div>。
除了更大的 <h1> 之外，字体粗细减小到 200px。

什么是 Bootstrap 页面标题？

页面标题是一个很好的小功能，可以在页面上的标题周围添加适当的间距。这在网页上特别有用，在网页上您可能有多个帖子标题，并且需要一种方法来区分它们。要使用页面标题，请将标题包装在一个带有 .page-header 类的 <div> 中。

如何使用 Bootstrap 创建缩略图？

要使用 Bootstrap 创建缩略图 −

在图像周围添加一个带有 .thumbnail 类的 <a> 标签。
这会添加 4 像素的填充和灰色边框。
悬停时，动画辉光会勾勒出图像。

如何使用 Bootstrap 自定义缩略图？

可以将任何类型的 HTML 内容（如标题、段落或按钮）添加到缩略图中。请按照以下步骤操作 −

将具有 .thumbnail 类的 <a> 标签更改为 <div>。
在该 <div> 内，您可以添加任何需要的内容。由于这是一个 <div>，因此我们可以使用基于跨度的默认命名约定进行大小调整。
如果要对多个图像进行分组，请将它们放在一个无序列表中，每个列表项都将浮动到左侧。

什么是 Bootstrap 警报？

Bootstrap 警报提供了一种为用户样式化消息的方法。它们为典型用户操作提供上下文反馈消息。

您可以向警报中添加一个可选的关闭图标。

如何创建 Bootstrap 警报？

您可以通过创建一个包装器 <div> 并添加 .alert 类和四个上下文类之一（例如，.alert-success、.alert-info、.alert-warning、.alert-danger）来添加基本警报。

如何创建 Bootstrap 可关闭警报？

要构建可关闭警报 −

通过创建一个包装器 <div> 并添加 .alert 类和四个上下文类之一（例如，.alert-success、.alert-info、.alert-warning、.alert-danger）来添加基本警报。
还将可选的 .alert-dismissable 添加到上述 <div> 类中。
添加一个关闭按钮。
使用带有 data-dismiss = "alert" 数据属性的 <button> 元素。

如何使用 Bootstrap 创建进度条？

要创建基本进度条 −

添加一个带有 .progress 类的 <div>。
接下来，在上述 <div> 内，添加一个带有 .progress-bar 类的空 <div>。
添加一个 style 属性，其中宽度以百分比表示。例如，style = "60%"; 表示进度条处于 60%。

如何使用 Bootstrap 创建替代进度条？

要创建具有不同样式的进度条 −

添加一个带有 .progress 类的 <div>。
接下来，在上述 <div> 内，添加一个带有 .progress-bar 类和 progress-bar-* 类的空 <div>，其中 * 可以是 success、info、warning、danger。
添加一个 style 属性，其中宽度以百分比表示。例如，style = "60%"; 表示进度条处于 60%。

如何使用 Bootstrap 创建条纹进度条？

要创建条纹进度条 −

添加一个带有 .progress 和 .progress-striped 类的 <div>。
接下来，在上述 <div> 内，添加一个带有 .progress-bar 类和 progress-bar-* 类的空 <div>，其中 * 可以是 success、info、warning、danger。
添加一个 style 属性，其中宽度以百分比表示。例如，style = "60%"; 表示进度条处于 60%。

如何使用 Bootstrap 创建动画进度条？

要创建动画进度条 −

添加一个带有 .progress 和 .progress-striped 类的 <div>。还将 .active 类添加到 .progress-striped 中。
接下来，在上述 <div> 内，添加一个带有 .progress-bar 类的空 <div>。
添加一个 style 属性，其中宽度以百分比表示。例如，style = "60%"; 表示进度条处于 60%。

如何使用 Bootstrap 创建堆叠进度条？

您甚至可以堆叠多个进度条。将多个进度条放在同一个 .progress 中以堆叠它们。

什么是 Bootstrap 媒体对象？

这些是用于构建各种类型的组件（如博客评论、推文等）的抽象对象样式，这些组件在文本内容旁边具有左对齐或右对齐的图像。媒体对象的目标是使开发这些信息块的代码大大缩短。

媒体对象（轻量级标记、易于扩展）的目标是通过对一些简单标记应用类来实现的。

Bootstrap 中 .media 类的作用是什么？

此类允许将媒体对象（图像、视频和音频）浮动到内容块的左侧或右侧。

Bootstrap 中 .media-list 类的作用是什么？

如果您正在准备一个列表，其中项目将是无序列表的一部分，请使用一个类。这对于评论线程或文章列表很有用。

什么是 Bootstrap 面板？

面板组件用于将您的 DOM 组件放在一个框中。要获得基本面板，只需将 .panel 类添加到 <div> 元素中。还将 .panel-default 类添加到此元素中。

如何创建带有标题的 Bootstrap 面板？

有两种方法可以添加面板标题 −

使用 .panel-heading 类可以轻松地向面板添加标题容器。
使用任何带有 .panel-title 类的 <h1>-<h6> 来添加预先设置样式的标题。

如何创建带有页脚的 Bootstrap 面板？

您可以通过将按钮或辅助文本包装在一个包含 .panel-footer 类的 <div> 中来向面板添加页脚。

有哪些上下文类可用于为面板设置样式？

使用上下文状态类，例如 panel-primary、panel-success、panel-info、panel-warning、panel-danger，使面板在特定上下文中更有意义。

您可以在 Bootstrap 面板中放置表格吗？

是的！要在面板内获得无边框表格，请在面板内使用类 .table。假设有一个包含 .panel-body 的 <div>，我们会在表格顶部添加额外的边框以进行分隔。如果没有包含 .panel-body 的 <div>，则组件将从面板标题无缝切换到表格。

你能在 Bootstrap 面板中放置一个列表组吗？

是的！你可以在任何面板中包含列表组。通过在 <div> 元素中添加类 .panel 来创建一个面板。同时，向此元素添加类 .panel-default。现在，在这个面板中包含你的列表组。

什么是 Bootstrap 井？

井是一个 <div> 中的容器，它使内容看起来像是下沉或在页面上具有内嵌效果。要创建井，只需将想要显示在井中的内容用包含类 .well 的 <div> 包裹起来。

什么是 Scrollspy 插件？

Scrollspy（自动更新导航）插件允许你根据滚动位置定位页面的各个部分。在其基本实现中，当你滚动时，可以根据滚动位置在导航栏中添加 .active 类。

什么是 Affix 插件？

Affix 插件允许 <div> 固定在页面上的某个位置。你也可以使用此插件切换其固定状态的开启和关闭。一个常见的示例是社交图标。它们将从某个位置开始，但当页面到达某个标记时，<div> 将被锁定到位，并停止随页面其余部分一起滚动。

接下来是什么？

接下来，你可以回顾一下你之前完成的与该主题相关的作业，并确保你能够自信地谈论它们。如果你是一个新人，面试官不会期望你回答非常复杂的问题，而是要确保你的基础概念非常扎实。

其次，如果你无法回答一些问题，其实并不重要，重要的是你回答的任何问题，都必须充满自信地回答。所以在面试时要保持自信。我们在 tutorialspoint 祝你面试顺利，并祝你未来一切顺利。干杯 :-)

打印页面