Learning Path
浏览 Bootstrap 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
90
Bootstrap 教程 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插..
Bootstrap 附加导航（Affix）插件 附加导航（Affix）插件允许指定 <div> 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。 如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可..
Bootstrap 警告框（Alert）插件 警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。 用法 您可以有以下两种方式启用警告框的可取消（dismissal）功能： 通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss='alert�..
Bootstrap 警告（Alerts） 本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuery 插件。 您可以通过创建一个 <div>，并向其添加一个 .ale..
Bootstrap 徽章（Badges） 本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class='badge'> 添加到链接、Bootstrap 导航等这些元素上即可。 下面的实例演示了这点： 实例 展示未读邮件： [mycode3 ..
Bootstrap 面包屑导航（Breadcrumbs） 面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被..
Bootstrap 按钮下拉菜单 本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在一个 .btn-group 容器中放置按钮和下拉菜单即可。您也可以使用 <span class='caret'></span> 来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下拉菜单： 实例 [..
Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class： Class描述代码示例 .btn-group该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带..
Bootstrap 按钮（Button）插件 按钮（Button）在 Bootstrap 按钮 一章中介绍过。通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。 加载状态 如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text='Loading...' 作为其属性即可，如下面实例所示： 实例 [myco..
Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于<a>, <button>, 或 <input> 元素上： 类 描述 实例 ..
Bootstrap 轮播（Carousel）插件 Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min..
Bootstrap 代码 Bootstrap 允许您以两种方式显示代码： 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。 请确保当您使用 <pre&..
Bootstrap 折叠（Collapse）插件 折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。 如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 b..
Bootstrap CSS编码规范 code { font-family: 'PT Mono', Menlo, 'Courier New', monospace; padding: 2px 4px; font-size: 85%; color: #d44950; background-color: #f7f7f9; border-radius: .2rem; } 语法 ..
Bootstrap CSS 概览 在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML 5 文档类型（Doctype） Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。 .... 如果在 ..
Bootstrap 下拉菜单（Dropdown）插件 Bootstrap 下拉菜单 这一章讲解了下拉菜单，但是没有涉及到交互部分，本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。 如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.j..
Bootstrap 下拉菜单（Dropdowns） 本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： 实例 [mycode3 type='html'] 主..
Bootstrap 环境安装 Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页： 您会看到两个按钮： Download Bootstrap：下载 Bootst..
Bootstrap 表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤： 向父 <form..
Bootstrap 字体图标(Glyphicons) @font-face { font-family:'Glyphicons Halflings';src:url(https://cdn.staticfile.org/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot);src:url(//cdn.staticfile.org/twitter..
Bootstrap 网格系统实例：堆叠的水平 让我们来看一个带有简单布局的网格实例：包含两个列，每个列包含两个段落。（在这里，为每个列分别定义了样式，您可以避免这么做。） 实例 [mycode3 type='html'] Hello, world! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei..
Bootstrap 网格系统实例：中型和大型设备 在 实例：堆叠的水平 中，我们已经看过了基本的网格系统。在这里，我们使用 2 个 div，并在视口宽度的中间对它们进行 50%/50% 分割： .... .... 但是，在大型设备上，您最后设计成 33%/66%。所以我们要做的是准备好在断点处更改列的宽度： .... .... 现在 Bootstrap 在中型设备中，会查找带有 md 的类，并使用它们。在大型设备中，会查找带..
Bootstrap 网格系统实例：手机、平板电脑、台式电脑 我们已经看过 中型和大型设备 。现在，让我们一起看另一个实例，我们将让它同样适用于小型手机。我们要把平板电脑的列分割为 25%/75%，我们将添加如下选项： .... .... 现在，给我们提供了 3 种不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/6..
Bootstrap 网格系统 table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0px; } table.grid tr { text-align:center; } table.grid td { border:4px solid white; padding:6px; ..