Learning Path
浏览 Bootstrap 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
90
Bootstrap 提示工具（Tooltip）插件 当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。 如果您想要单独引用该插件的功能，那么您需要引用 tooltip.js。或者，正如 Bo..
Bootstrap 过渡效果（Transition）插件 过渡效果（Transition）插件提供了简单的过渡效果。 如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 Transition.js 是 transitionEnd 事件和 CSS ..
Bootstrap 教程 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插..
Bootstrap 排版 Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例： 实例 [mycode3 type='html'] 我是标题..
Bootstrap UI 编辑器 以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具。 1. Bootstrap Magic 这是一个 Bootstrap 主题生成器，使用最新的 Bootstrap 3 版本和 Angular JS 版本，提供一个鲜活的用户修改预览。它包括了各种各样的导入，一个颜色选择器和智能的预先输入。更神奇的是，Bootstrap 会根据用户的每个选择来重新建立框架，方便用户的下载和使用。 2..
Bootstrap Affix 插件 - 附加导航 Bootstrap Affix 插件可以让一个<div>元素漂浮在网页上，你可以让该<div>元素随屏滚动，或者固定在指定位置上。 用法： 你可以通过data属性或者通过JavaScript来使用Affix 插件。 1、通过data属性 你只需为需要监听的页面元素添加data-spy='affix'..
Bootstrap 警告和错误 简介 Bootstrap 允许您为网站或 app 的成功执行、警告和错误信息定义样式。在本教程中，您将学习如何做到这点。 创建一个简单的警告信息 使用 CSS class "alert"，位于 bootstrap.css 中的行号 2123 到 2175（版本 2.0.1），您可以创建一个简单警告信息。您可以为它添加一个可选的关闭图标。 当您点击警告框中的关闭图标时，警..
Bootstrap 面包屑导航 简介 使用 Bootstrap，您可以创建面包屑导航。在本教程中，您将学习如何做到这点。 下面是最终创建的输出结果： 通过 Bootstrap 创建面包屑导航的 HTML5 代码 实例 [mycode2] Bootstrap面包屑导航 body { padding: 20px; } Home > ..
Bootstrap Button（按钮） 描述 Bootstrap Button（按钮）JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态，也可以为组件创建按钮组，比如工具条。 什么是必需的 您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。 如何使用它 您可以不编写任何 JavaScript 只通过标..
Bootstrap 按钮 目标 按钮广泛应用于网站或应用程序中。在本教程中，我们将通过实例、实例解释来讨论如何使用 Boostrap 3 按钮，以及如何定制默认的按钮。 使用默认的按钮 下面的实例将演示如何通过 Bootstrap 3 快速创建按钮。 实例 [mycode2] Bootstrap 3 默认按钮 body { padding: 50px } 默认 原始 ..
Bootstrap 轮播 描述 在本教程中，您将看到如何使用 Bootstrap 创建轮播。这将帮您创建内容滑块，图像画廊等等。 用法 … … … ‹ › 所以，您把想要呈现的条目（比如 images）以循环顺序放置在 "carousel-inner" div 中，通过 "<!-- Carousel nav --&..
Bootstrap 折叠 描述 在本教程中，将学习如何通过 Bootstarp 创建可折叠的组件。 什么是必需的 您必须引用 jquery.js 和 bootstrap-collapse.js - 这两个 JavaScript 文件都位于 docs/assets/js 文件夹内。 您可以在不编写大量 JavaScript 或者不调用 JavaScript 的情况下创建可折叠的组件。 实例 第一个实例演示如何不调用 JavaScript ..
Bootstrap 3 CSS 概览 目标 在本教程中，我们已经讨论了 Bootstrap 3 CSS 的要点。接下来我们将讲解 Bootstrap 3 工作的几个关键因素。 HTML 5 文档类型（Doctype） Bootstrap 3 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 ... 如果在 Bootstrap 创建的网页开头不使用 HTM..
Bootstrap Dropdown（下拉菜单） 描述 通过 Dropdown（下拉菜单）JavaScript 插件，您可以在 Bootstrap 中任何物体上创建 Dropdown 下拉菜单。在导航条、导航（标签和胶囊式标签）中提供了创建下拉菜单的完整支持。 使用该插件时，什么是必需的 您必须引用 jquery.js 和 bootstrap-dropdown.js 文件。这两个文件都位于 twitter-bootstrap-v2/do..
Bootstrap 表单 简介 在本教程中，您将学习如何使用 Bootstrap 2.0 工具包来创建表单。 Bootstrap 已经为 input、textarea 和 select 等表单控件定义样式，支持列表和复选框，为禁用的表单控件定义样式，包括每个表单控件的错误、警告、成功状态。 自版本 2.0 起，Bootstrap 提供了四中类型的表单布局 - 垂直（默认） 搜索 内联 水平 在 Bootstrap 的上一个..
Bootstrap Glyphicons 目标 字体图标由于它的一些好处变得越来越流行了。在本教程中我们将讨论如何通过 Bootstrap 3 来使用和定制 Glyphicons。我们将解释在后台工作的 CSS 规则，这将让您更好的了解图标字体的工作原理。这样，您就能熟悉除了 Glyphicons 之外的任何图标字体设置。 什么是 Glyphicons Glyphicons 是在 Web 项目中使用的图标字体。虽然，使用 Glyphic..
Bootstrap 网格系统 简介 在本教程中，您将学习如何使用 Bootstrap 来创建网格系统（Grid System）。 正如您可能知道的，在图形设计中，网格系统是一个二维结构，由水平轴和垂直轴相交的区域组成，用于构建内容。它被广泛应用于平面设计的设计布局和内容结构。在网页设计中，它是一种通过使用 HTML 和 CSS 来快速有效地创建一致的布局的非常有效的方法。因此，网格系统已经成为网页设计的框架或工作流程的一个重要的组件/模..
Bootstrap 图标 简介 在本教程中，您将学习如何使用 Bootstrap 2.0 工具包来创建图标。Bootstrap 图标由 Glyphicons 提供。如果您在项目中使用这些图标，请确保提供 Glyphicons 的链接。 作为 CSS Sprite 使用 所有的图标图像都捆绑到一起，并通过 background-position CSS 属性使用。图像文件是 glyphicons-halflings.png，位于 Boot..
Bootstrap 图像 目标 在本教程中，我们将讨论三个 Bootstrap 3 的 class 来为图像添加样式。同时，我们也会讨论有关 Bootstrap 3 为响应式图像所提供的内容。 一般的样式 在我们讨论 Bootstrap 3 提供的定义图像样式的特殊的 class 之前，我们将看到 Bootstrap 3 提供的定义图像的一般的样式。 img { border: 0; } 这是在 Bootstrap 3 的 CS..
Bootstrap 内联标签和徽章 简介 使用 Bootstrap，您可以创建内联标签（即 Label 和注释的文本）和徽章（即指标和未读计数）。 内联标签 通过内联标签您可以创建醒目的标签和注释文本。 实例 实例 [mycode2] 默认 成功 警告 重要 信息 反选 [/mycode2] 在线查看 bootstrap.css 中，从行号 3162 到行号 3200，呈..
Bootstrap 简介 目标 Bootstrap是最流行的前端框架，目前已经发布了它的第三个版本（v3.0.0）。本教程将带您开始学习 Bootstrap 3。 您还将看到如何使用自定义与众不同的框架的框特征，比如使用网格创建布局，通过 nav 创建导航，使用 carousal 创建下拉框，添加社交插件和 Google Map 等第三方插件。 查看演示 什么是 Bootstrap Bootstrap 是一个用于快速开发 Web 应..
Bootstrap 布局 简介 在本教程中，您将学习如何使用 Bootstrap 工具包来创建固定布局和流动布局。教程是基于 Bootstrap 版本 2.0。 在版本 2.0 中，Bootstrap 为手机、平板电脑、笔记本、小型台式机、大型宽屏台式机等添加了响应特性。 可以通过向页面添加 bootstrap-responsive.css 文件（位于 docs\assets\css 下）来让布局具有响应性。 Bootstrap 固定布..
.swatch { display: inline-block; width: 30px; height: 20px; margin: -6px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } Bootstrap LESS 简介 Less 是一个 CSS 预处理器，让 CSS 具有动态性。 另一方面，Bootstrap 是一个..
Bootstrap 使用清单组组件创建价格表 目标 价格表是销售产品或服务的任何网站的主要成分之一。即使 Boortstrap 3（与之前的版本一样）没有直接提供价格表组件，但是它提供了列表组组件。设计该组件的目的是为了渲染复杂的定制内容。利用这个特征，我们将在本教中创建一个简单的价格表，并解释制作一个列表组所用到的 CSS 规则，并说明如何定制它。 查看演示 典型的外观 您可以 在线查看演示，下面是实例代码。 U..