随笔分类 - bootstrap
摘要：以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具。 1. Bootstrap Magic 这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预
阅读全文
摘要：附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。 用法 您可以通过 data 属性或者通过 Java
阅读全文
摘要：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 实例 下面是一个简单的幻灯片，使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件
阅读全文
摘要：折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 您可以使用折叠（Collapse）插件： 创建可折叠的分组或折叠面板（accordion），如下所示： 结果如下所示： data-toggle="collapse" 添加到您想要
阅读全文
摘要：按钮（Button）在 Bootstrap 按钮 一章中介绍过。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。 加载状态 如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading
阅读全文
摘要：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。 用法 您可以有以下两种方式启用警告框的可取消（dismissal）功能： 通过 data 属性：通过数据 API（Data API）添加
阅读全文
摘要：弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。 如果您想要单独引用该插件的
阅读全文
摘要：当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。
阅读全文
摘要：标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。 用法 您可以通过以下两种方式启用标签页： 通过 data 属性：您需要添加 data-togg
阅读全文
摘要：滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览
阅读全文
摘要：Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。 如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，
阅读全文
摘要：模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 用法 您可以切换模态框（Modal）插件的隐藏内容： 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="m
阅读全文
摘要：过渡效果（Transition）插件提供了简单的过渡效果。 Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。 使用案例 过渡效果（Transition）插件的使用案例： 具有幻灯
阅读全文
摘要：在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据
阅读全文
摘要：接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm <divclass="jumbotron text-center"st
阅读全文
摘要：Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well： 结果如下所示： 尺寸大小 您可以使用可选类 well-lg 或 well-sm 来改变 Well 的
阅读全文
摘要：本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示： 结果如下所示： 面板标题 我们可以通过以下两种方式
阅读全文
摘要：本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下： 向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。 下面的实例演示了这点： 结果如下所示： 向列表组添加徽章 我们可以
阅读全文
摘要：本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 媒体对象轻量标记、易于扩展的特性是通过向简单的标记
阅读全文
摘要：本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 1
阅读全文
浙公网安备 33010602011771号