文章: 阅读:

2019-11-10

Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。如果想要单独引用该插件的功能，那么需要引用 carousel.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。为了实现轮播，只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。

阅读全文 >>

2019-11-10

Bootstrap 折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论用它来创建折叠导航还是内容面板，它都允许很多内容选项。如果想要单独引用该插件的功能，那么需要引用 collapse.js。同时，也需要在 Bootstrap 版本中引用 Transition（过渡）插件。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 按钮（Button）插件

按钮（Button）在 Bootstrap 按钮一章中介绍过。通过按钮（Button）插件，可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可。如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可。

阅读全文 >>

2019-11-10

Bootstrap 警告框（Alert）插件

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。可以有以下两种方式启用警告框的可取消（dismissal）功能，通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。通过 JavaScript 添加可取消功能。

阅读全文 >>

2019-11-10

Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。如果想要单独引用该插件的功能，那么需要引用 popover.js，它依赖于工具提示（Tooltip）插件。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 提示工具（Tooltip）插件

当想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。如果想要单独引用该插件的功能，那么需要引用 tooltip.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素一章中介绍过。通过结合一些 data 属性，可以轻松地创建一个标签页界面。通过这个插件可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。如果想要单独引用该插件的功能，那么需要引用 tab.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 滚动监听（Scrollspy）插件

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 `.active` class。如果想要单独引用该插件的功能，那么需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 下拉菜单（Dropdown）插件

Bootstrap 下拉菜单这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果想要单独引用该插件的功能，那么需要引用 dropdown.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果想要单独引用该插件的功能，那么需要引用 modal.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

阅读全文 >>

2019-11-10

Bootstrap 过渡效果（Transition）插件

过渡效果（Transition）插件提供了简单的过渡效果。如果想要单独引用该插件的功能，那么除了其他的 JS 文件，还需要引用 transition.js。或者，正如 Bootstrap 插件概览一章中所提到，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。

阅读全文 >>

2019-11-10

Bootstrap 插件概览

Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使不是一名高级的 JavaScript 开发人员，也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。站点引用 Bootstrap 插件的方式有两种，单独引用 - 使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果单独引用插件，请先确保弄清这些插件之间的依赖关系。

阅读全文 >>

2019-11-10

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 div。为了创建 Well，只需要简单地把内容放在带有 class .well 的 div 中即可。可以使用可选类 .well-lg 或 .well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。

阅读全文 >>

2019-11-10

Bootstrap 面板

Bootstrap 面板（Panels）组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 div 元素添加 class .panel 和 class .panel-default 即可。可以通过以下两种方式来添加面板标题，使用 .panel-heading class 可以很简单地向面板添加标题容器。使用带有 .panel-title class 的 h1-h6 来添加预定义样式的标题。可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 div 中即可。面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。

阅读全文 >>

2019-11-10

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下，向元素 ul 添加 class .list-group。向 li 添加 class .list-group-item。可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 li 元素中添加 span class="badge" 即可。通过使用锚标签代替列表项，可以向列表组添加链接。需要使用 a 代替 li 元素。可以向上面已添加链接的列表组添加任意的 HTML 内容。

阅读全文 >>