Bootstrap面试问题(Bootstrap Interview Questions)

Bootstrap是一个时尚，直观，功能强大的移动第一前端框架，可以更快，更轻松地进行Web开发。 它使用HTML，CSS和Javascript。

Bootstrap可用作 -

• Mobile first approach - 自Bootstrap 3以来，该框架包含整个库中的Mobile第一个样式，而不是单独的文件。

• Browser Support - 所有流行的浏览Browser Support它。

  

• Easy to get started - 只需掌握HTML和CSS的知识，任何人都可以开始使用Bootstrap。 Bootstrap官方网站也有很好的文档。

• Responsive design - Bootstrap的响应式CSS适应桌面，平板电脑和手机。

• 为开发人员构建界面提供干净，统一的解决方案。

• 它包含美观和功能强大的内置组件，易于定制。

• 它还提供基于Web的自定义。

• 最重要的是它是一个开源的。

Bootstrap package包括 -

• Scaffolding - Bootstrap提供了一个基本结构，包括网格系统，链接样式，背景。 Bootstrap Basic Structure一节中详细介绍了这一点

• CSS - Bootstrap具有全局CSS设置功能，基本HTML元素，使用可扩展类进行样式化和增强，以及高级网格系统。 Bootstrap with CSS一节中详细介绍了这一点。

• Components - Bootstrap包含十几个可重用的组件，用于提供图标，下拉，导航，警报，弹出窗口等等。 Layout Components部分对此进行了详细介绍。

• JavaScript Plugins - Bootstrap包含十几个自定义jQuery插件。 您可以轻松地将它们全部或逐个包含在内。 Bootstrap Plugins部分详细介绍了这一点。

• Customize - 您可以自定义Bootstrap的组件，LESS变量和jQuery插件，以获得您自己的版本。

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

Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。 它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

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 = *类不支持偏移，但可以使用空单元格轻松复制它们。

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

Bootstrap 3允许通过添加类.img响应标签来使图像响应。 此类适用于max-width:100％; 和身高:汽车; 到图像，以便它很好地缩放到父元素。

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

• Basic Global display - 设置background-color: #fff; 在《body》元素上。

• Typography - 使用@font-family-base ， @font-size-base和@line-height-base属性作为排版基础

• Link styles - 通过属性@link-color设置全局链接颜色，并仅在:hover应用链接下划线:hover 。

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

Normalize.css是CSS重置的现代HTML5替代品。 它是一个小型CSS文件，可在HTML元素的默认样式中提供更好的跨浏览器一致性。

要为段落添加一些重点，请添加class =“lead”。 这将为您提供更大的字体，更轻的重量和更高的线高

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

• Ordered lists - 有序列表是按照某种顺序排列的列表，以数字开头。

• Unordered lists - 无序列表是一个没有任何特定顺序的列表，传统上使用项目符号进行样式设置。 如果您不希望显示项目符号，则可以使用类.list-unstyled删除样式。 您还可以使用.list-inline类将所有列表项放在一行中。

• Definition lists - 在这种类型的列表中，每个列表项都可以包含“dt”和“dd”元素。 “dt”代表definition term ，并且像字典一样，这是正在定义的术语（或短语）。 随后，“dd”是“dt”的定义。

  dl-horizontal 。

Glyphicons是您可以在Web项目中使用的图标字体。 Glyphicons Halflings不是免费的并且需要许可，但是他们的创建者已经免费提供Bootstrap项目。

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

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

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

模态是在其父窗口上分层的子窗口。 通常，目的是显示来自单独源的内容，该源可以在不离开父窗口的情况下进行一些交互。 子窗口可以提供信息，交互等。

您可以切换下拉插件的隐藏内容 -

• Via data attributes - 将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>

• Via JavaScript - 要Via JavaScript调用下拉切换，请使用以下方法 -

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

Bootstrap轮播是一种灵活，响应迅速的方式，可以为您的网站添加滑块。 除了响应之外，内容还非常灵活，可以提供图片，iframe，视频或您可能想要的任何类型的内容。

按钮组允许多个按钮在一条线上堆叠在一起。 当您想要将对齐按钮等项目放在一起时，这非常有用。

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

.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>中。

• 现在将放在《input》元素之前或之后。

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

• 从基本无序列表开始，基类为.nav。
• 添加类.nav-tabs。

创建药丸导航菜单 -

• 从基本无序列表开始，基类为.nav。
• 添加类.nav-pills。

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

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

要创建默认导航栏 -

• 将类.navbar，.navbar-default添加到<nav>标记。

• 将role =“navigation”添加到上面的元素，以帮助获取可访问性。

• 将标题类.navbar-header添加到div元素。 div包含带有类navbar-brand的a元素。这将使文本的大小略大。

• 要添加指向导航栏的链接，只需添加类别为.nav，.navbar-nav的无序列表。

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

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

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

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

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

徽章与标签类似; 主要区别在于角落更圆润。 徽章主要用于突出显示新的或未读的项目。 要使用徽章，只需将添加到链接，Bootstrap导航等。

顾名思义，这个组件可以选择性地增加标题的大小，并为登陆页面内容增加很多余量。 使用Jumbotron -

• 使用.jumbotron类创建容器
  。
• 除了更大的<h1>之外，字体重量还减少到200px。

页眉是一个很好的小功能，可以在页面上的标题周围添加适当的间距。 这对于您可能拥有多个帖子标题的网页尤其有用，并且需要一种方法来为每个帖子添加区别。 要使用页眉，请在带有.page-header类的

使用Bootstrap创建缩略图 -

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

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

• 将具有.thumbnail类的 a 标记更改为div

• 在div里面，你可以添加你需要的任何东西。 由于这是一个div，我们可以使用默认的基于span的命名约定来调整大小。

• 如果要对多个图像进行分组，请将它们放在无序列表中，每个列表项将浮动到左侧。

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

您可以添加可选的关闭图标以发出警报。

您可以通过创建包装器

建立dismissal alert

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

• 还要将可选的.alert-dismissable添加到上面的div类中。

• 添加关闭按钮。

• 将button元素与data-dismiss =“alert”数据属性一起使用。

创建基本进度条 -

• 添加一个带有.progress类的div。

• 接下来，在上面的div中，添加一个带有.progress-bar类的空div。

• 添加样式属性，其宽度表示为百分比。 比如说，style =“60％”; 表示进度条为60％。

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

• 添加一个带有.progress类的div。

• 接下来，在上面的div中，添加一个空的div和一个类.progress-bar和class progress-bar- *其中*可以是成功，信息，警告，危险。

• 添加样式属性，其宽度表示为百分比。 比如说，style =“60％”; 表示进度条为60％。

创建条带进度条 -

• 添加一个带有.progress和.progress-striped类的div。

• 接下来，在上面的div中，添加一个空的div和一个类.progress-bar和class progress-bar- *其中*可以是成功，信息，警告，危险。

• 添加样式属性，其宽度表示为百分比。 比如说，style =“60％”; 表示进度条为60％。

要创建动画进度条 -

• 添加一个带有.progress和.progress-striped类的

  。
  还要将.active活动添加到.progress-striped。

• 接下来，在上面的div中，添加一个带有.progress-bar类的空div。

• 添加样式属性，其宽度表示为百分比。 比如说，style =“60％”; 表示进度条为60％。

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

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

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

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

如果您准备的列表中的项目将成为无序列表的一部分，请使用类。 对评论主题或文章列表有用。

当您想要将DOM组件放在一个盒子中时，可以使用面板组件。 要获得基本面板，只需将类.panel添加到div元素即可。还要为此元素添加类.panel-default。

这里有两种添加面板标题的方法 -

• 使用.panel-heading类可以轻松地向面板添加标题容器。

• 使用带有.panel-title类的任何<h1> - <h6>添加预先设置的标题。

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

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

是! 要在面板中获取非边界表，请使用面板中的类.table。 假设有一个包含.panel-body的div，我们在表的顶部添加一个额外的边框以便分离。 如果没有包含.panel-body的div，则组件会从面板标题移动到表而不会中断。

是! 您可以在任何面板中包含列表组。 通过将类.panel添加到div元素来创建面板。 还要为此元素添加类.panel-default。 现在，在此面板中包括您的列表组。

well是div中的容器，导致内容在页面上显示凹陷或嵌入效果。 要创建一个井，只需使用包含.well类的div包装您想要在井中出现的内容。

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

affix插件允许div粘贴到页面上的某个位置。 你也可以使用这个插件切换它的固定。 一个常见的例子是社交图标。 它们将从一个位置开始，但当页面达到某个标记时，div将被锁定到位并停止与页面的其余部分一起滚动。