主要内容:用法,实例,选项,方法,实例,事件,实例,更多实例,实例,实例滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
主要内容:用法,实例,实例,选项,方法,实例Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的
主要内容:用法,实例,选项,方法,实例,事件,实例模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以切换模态框(Modal)插件
主要内容:使用案例过渡效果(Transition)插件提供了简单的过渡效果。 如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本
主要内容:data 属性,编程方式的 API,避免命名空间冲突,事件在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不编写任何代码的情况下被触发。
主要内容:HTML 代码接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.xnip.cn/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 <div class="jumbotron text-center" style="margin-bottom:0"> <h1>我的第一个 Bootstrap
主要内容:实例,尺寸大小,实例Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well: 实例 <div class="well">您好,我在 Well 中!</div> 结果如下所示: 尺寸大小 您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类
主要内容:实例,面板标题,实例,面板脚注,实例,带语境色彩的面板,实例,带表格的面板,实例,带列表组的面板,实例本章将讲解 Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,如下面的实例所示: 实例 <div class="panel panel-default"> <div class="panel-body"> 这是一个基本的
主要内容:实例,向列表组添加徽章,实例,向列表组添加链接,实例,向列表组添加自定义内容,实例,水平列表,实例本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。 下面的实例演示了这点: 实例 <ul class="list-group"> <li class="list-group-item">免费域名注册</li>
主要内容:实例,实例,实例,实例本章我们将讲解 Bootstrap 中的多媒体对象(Media Object),如:图像、视频、音频等。 多媒体对象的样式可用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 接下来我们先来看个实例: 实例 <!-- 左对齐 --> <div class="media"> <div class="m
主要内容:默认的进度条,实例,实例,交替的进度条,实例,实例,条纹的进度条,实例,动画的进度条,实例,堆叠的进度条,实例,进度条大小,实例本章将讲解 Bootstrap 进度条。在本教程中,您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画。 默认的进度条 创建一个基本的进度条的步骤如下
主要内容:实例,可取消的警告(Dismissal Alerts),实例,警告(Alerts)中的链接,实例本章将讲解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件。 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上
主要内容:实例,添加自定义的内容,实例本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 class .thumbnail 的 <a> 标签。 这会添加四个像素的内边距(padding)和一个灰色的边框。 当鼠标悬停在图像上时,会动画显示出图像的轮廓。 下面的实例演示了默认的
主要内容:实例页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),请把您的标题放置在带有 class .page-header 的 <div> 中: 实例 <div class="page-header"> <h1>页面标题实例 <small>子标
主要内容:实例,实例本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 <div>。 除了更大的 <h1>,字体粗细 font-weight 被减为 200。 下面的实例演示了这点: 实例 <div