📅  最后修改于: 2020-10-27 03:57:39        🧑  作者: Mango

本章将讨论Bootstrap面板。当您要将DOM组件放在一个盒子中时，使用面板组件。要获得基本面板，只需将类.panel添加到<div>元素中。还将类.panel-default添加到此元素，如以下示例所示-现场演示带标题的面板有两种添加面板标题的方法-使用.panel-heading类可轻松将标题容器添加到面板中。将任何<h1>-<h6>与.panel-title类一起使用以添加预样式的标题。以...

📅  最后修改于: 2020-10-27 03:57:53        🧑  作者: Mango

孔是<div>中的一个容器，该容器使内容在页面上显得凹陷或嵌入效果。要创建一个孔，只需使用包含.well类的<div>包装要在孔中显示的内容。以下示例显示默认井-现场演示浆纱您可以使用诸如well-lg或well-lg之类的可选类来更改well的大小。这些类与.well类结合使用。这些会影响填充，使孔变大或变小(取决于类)。现场演示...

📅  最后修改于: 2020-10-27 03:58:17        🧑  作者: Mango

上一章中“布局组件”下讨论的组件仅仅是个开始。 Bootstrap随附有12个jQuery插件，这些插件可扩展功能并可以向您的站点添加更多交互。要开始使用Bootstrap的JavaScript插件，您无需成为高级JavaScript开发人员。通过使用Bootstrap Data API，无需编写任何代码即可触发大多数插件。Bootstrap插件可以两种形式包含在您的站点中-单独-使用Bootst...

📅  最后修改于: 2020-10-27 03:58:31        🧑  作者: Mango

过渡插件提供了简单的过渡效果。如果要单独包含此插件功能，则除了其他JS文件外，还需要一次transition.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。Transition.js是TransitionEnd事件的基本帮助器，也是CSS过渡模拟器。其他插件使用它来检查CSS过渡支持并捕获挂起的过渡。用例转换插件...

📅  最后修改于: 2020-10-27 03:59:17        🧑  作者: Mango

模态是子窗口，位于其父窗口之上。通常，其目的是显示来自单独来源的内容，这些内容可以进行一些交互而不离开父窗口。子窗口可以提供信息，交互或更多信息。如果要单独包含此插件功能，则需要modal.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法您可以切换模式插件的隐藏内容-通过数据属性-在控制器元素(如按钮或链接)上...

📅  最后修改于: 2020-10-27 03:59:44        🧑  作者: Mango

使用Dropdown插件，您可以将下拉菜单添加到导航栏，标签，药片和按钮等任何组件。如果要单独包含此插件功能，则需要dropdown.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法您可以切换下拉插件的隐藏内容-通过数据属性-将data-toggle =“ dropdown”添加到链接或按钮以切换下拉菜单，如下...

📅  最后修改于: 2020-10-27 04:00:41        🧑  作者: Mango

滚动间谍(自动更新导航)插件可让您根据滚动位置定位页面的各个部分。在滚动的基本实现中，可以根据滚动位置将.active类添加到导航栏。如果要单独包含此插件功能，则需要scrollspy.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法您可以将scrollspy行为添加到顶部导航-通过数据属性-将data-spy...

📅  最后修改于: 2020-10-27 04:01:21        🧑  作者: Mango

在Bootstrap导航元素一章中介绍了选项卡。通过合并一些数据属性，您可以轻松创建选项卡式界面。使用此插件，您甚至可以通过下拉菜单在选项卡或药丸中的本地内容窗格之间切换。如果要单独包含此插件功能，则需要tab.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法您可以通过以下两种方式启用标签页-通过数据属性-您需...

📅  最后修改于: 2020-10-27 04:02:03        🧑  作者: Mango

当您需要描述链接时，工具提示会很有用。该插件的灵感来自Jason Frame编写的jQuery.tipsy插件。此后，工具提示已更新为可以在没有图像的情况下工作，并带有CSS动画和用于本地标题存储的数据属性。如果要单独包含此插件功能，则需要tooltip.js。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法工具提示...

📅  最后修改于: 2020-10-27 04:02:42        🧑  作者: Mango

弹出窗口类似于工具提示，提供带有标题的扩展视图。为了激活弹出框，用户只需将光标悬停在元素上。可以使用Bootstrap Data API完全填充弹出窗口的内容。此方法需要工具提示。如果要单独包含此插件功能，则将需要popover.js且它具有tooltip plugin的依赖项。另外，如“ Bootstrap插件概述”一章所述，您可以包含bootstrap.js或缩小的bootstrap.min....

📅  最后修改于: 2020-10-27 04:03:11        🧑  作者: Mango

警报消息通常用于向最终用户显示诸如警告或确认消息之类的信息。使用警报消息插件，您可以向所有警报消息添加关闭功能。如果要单独包含此插件功能，则需要alert.js。另外，如《 Bootstrap插件概述》一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法您可以通过以下两种方式启用警报消除功能-通过数据属性-要通过Data API进行消除，只需在关闭按钮上添加d...

📅  最后修改于: 2020-10-27 04:03:38        🧑  作者: Mango

按钮在引导按钮一章中进行了说明。使用此插件，您可以添加一些交互，例如控制按钮状态，或为更多组件(如工具栏)创建按钮组。如果要单独包含此插件功能，则需要button.js。另外，如在Bootstrap插件概述一章中所述，您可以包括bootstrap.js或缩小的bootstrap.min.js。加载状态要将加载状态添加到按钮，只需将data-loading-text =“ Loading …”作为属...

📅  最后修改于: 2020-10-27 04:04:23        🧑  作者: Mango

折叠插件可让您轻松折叠页面。无论您是用它来构建手风琴导航还是内容盒，它都允许很多内容选择。如果要单独包含此插件功能，则将需要crash.js。这还要求您的Bootstrap版本中包含Transition插件。另外，如《 Bootstrap插件概述》一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。您可以使用折叠插件-创建可折叠的组或手风琴。可以按照下面的示例示例...

📅  最后修改于: 2020-10-27 04:05:10        🧑  作者: Mango

Bootstrap轮播是一种灵活的响应式方法，可以向您的站点添加滑块。除了具有响应能力之外，内容还具有足够的灵活性，可以包含图像，iframe，视频或您可能需要的几乎任何类型的内容。如果要单独包含此插件功能，则需要carousel.js。另外，如《 Bootstrap插件概述》一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。例下面的简单幻灯片显示了一个通用组件...

📅  最后修改于: 2020-10-27 04:05:56        🧑  作者: Mango

词缀插件允许<div>附着到页面上的某个位置。您也可以使用此插件切换它的固定状态。一个常见的例子是社交图标。它们将从某个位置开始，但是当页面碰到某个标记时，<div>将被锁定在适当的位置，并将停止与页面其余部分的滚动。如果要单独包含此插件功能，则需要affix.js。另外，如《 Bootstrap插件概述》一章所述，您可以包含bootstrap.js或缩小的bootstrap.min.js。用法您...