Learning Path
浏览 Bootstrap 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
90
Bootstrap 多媒体对象 本章节我们将讨论Bootstrap中的多媒体对象。这些抽象的对象样式用于建议多种组件类型（如：博客评论），我们可以在组件中使用图文混排，图片可以左对齐或者右对齐。媒体对象可以用更少的代码来实现多媒体对象与文字的混排。 你可以在HTML标签中添加以下两种形式来设置媒体对象： .media: 该类允许将媒体对象里的多媒体（图像，视频）浮动到内容区块的左边或者右边。 .media-list: 如果你需要..
Bootstrap Modals（模态框） 描述 Bootstrap Modals（模态框）是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。您可以在 Modals（模态框）中使用 Popover（弹出框）和 Tooltip（工具提示插件）。 在本教程中，将通过一些实例和解释来讨论如何使用 Bootstrap 创建模态窗口。同时，我们也会讨论用于定制的各种可用选项。 什么是必需的 您需要..
Bootstrap 导航 简介 在本教程中，您将学习如何使用 Bootstrap 工具包来创建基于导航、标签、胶囊式标签的导航。 我们有演示实例及相关的解释，包括：基本的基于标签和胶囊式标签的导航、堆叠的或垂直的基于标签和胶囊式标签的导航、基于标签和胶囊式标签的下拉菜单、使用导航列表创建堆叠导航、使用 JavaScript 创建可点击导航（不同的方向）。 基本的标签 两个 CSS class .nav 和 .nav-tabs 用于创建基..
Bootstrap 导航条 简介 使用 Bootstrap，您可以创建静态的导航条。在本教程中将教您如何做到这点。 我们将使用一个带有内容的 HTML5 页面，并看看如何添加一个头部导航条。下面是最后的输出结果： 下面是不带任何内容的页面的 HTML5 代码。 Bootstrap基本的基于与标签的导航 为了创建包含导航的基本结构，您需要在上面显示..
Bootstrap 分页 简介 在本教程中，我们将看到如何使用 Bootstrap 创建分页。 多页的分页 如果您想要为您的在线应用程序或者网站或 app 的搜索结果创建分页，您可以使用这种类型的分页。 bootstrap.css 的 CSS class "pagination"，位于行号 2756 到 1814 保存了创建这种类型的分页的样式。 另外两个 CSS classes "..
Bootstrap面板 本章节我们将讨论Bootstrap的面板，面板组件用于插入到DOM组件中。 获取基础面板你只需要在<div>元素中添加 .panel 和 .panel-default 类即可。 实例如下所示： This is a Basic panel 在线查看实例 以上实例显示效果如下： 面板标题 我们可以通过以下两种方式来添加面板标题： 使用.pa..
Bootstrap Popover（弹出框） 描述 Bootstrap Popover（弹出框）是使用定制的 Jquery 插件创建的。它可以用来显示任何元素的一些信息。 在本教程中，您将看到如何使用 Bootstrap Popover，以及如何使用一些可用选项进行定制。 什么是必需的 您必须引用 Jquery、Bootstrap CSS 和两个 JavaScript files - 一个用于 Bootstrap Tooltip（工具提..
Bootstrap 进度条 简介 在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 基本的、条纹的和动画的进度条实例 实例 [mycode2] 一个基本的垂直方向进度条 条纹进度条,使用梯度来创建一个条纹的效果 一个动画进度条 [/mycode2] 在线查看实例 请注..
Bootstrap 响应式设计 简介 本教程讲解如何在网页布局中应用响应式设计。在课程中，您将学到响应式 Web 设计。随着移动设备的普及，如何让用户通过移动设备浏览您的网站获得良好的视觉效果，已经是一个不可避免的问题了。响应式 Web 设计就是为实现这个目的的有效方法。 什么是响应式 Web 设计 响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机..
Bootstrap ScrollSpy（滚动监听） 描述 在本教程中，您将看到如何使用 Bootstrap ScrollSpy（滚动监听）插件来根据滚动条的位置自动更新对应的导航目标。 什么是必需的? 您必需引用 jQuery、Bootstrap CSS 和一个 JavaScript 文件 - bootstrap-scrollspy.js，位于 Bootstrap 主文件夹中的 'js' 文件夹下。如果您使用了下拉菜..
Bootstrap 选项卡插件 选项卡在Bootstrap 导航的章节中已经有所介绍。 在本章节中我们将通过数据属性来创建选项卡接口。 使用 您可以通过以下两种方式启用选项卡标签： 通过 data 属性：你可以通过添加 data-toggle='tab' 或 data-toggle='pill' 到锚文本链接中。 添加 nav 和 nav-tabs 类到 ul 中。 Home .....
Bootstrap 表格 简介 在本教程中，您将学习如何使用 Bootstrap 工具包来创建表格。 解释 Bootstrap 版本 2.0 的 bootstrap.css 中的表单行号 1034 到行号 1167，包含了表格样式。 正如您所知道的，表格只是用来呈现表格数据。Bootstrap 也一样，标记的位置必须如下所示： 如果您使用了列标题，层次结构应该如下所示： Bootstrap 的简单表格实例 实例 [mycode2..
Bootstrap 缩略图 简介 在本教程中，您将看到如何使用 Bootstrap 创建缩略图，即图像、录像、文本的网格。 缩略图有一个简单而又灵活的标记。同时，您可以使用已有的 bootstrap css class 比如 .span2 或 .span3 来设置缩略图的宽度和高度。 为什么使用缩略图 当在 Web 中创建用户经历，您通常需要创建一个图像或录像的网格。一个很好的例子就是需要展示产品图片的公司网站，这个时候，可能会用到缩略..
Bootstrap v2 教程 Bootstrap，来自 Twitter，是基于 HTML、CSS、JAVASCRIPT 的简介灵活的流行前段框架及交互组件集。 现在开始学习 Bootstrap！ 内容列表 Bootstrap 简介 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 布局 Bootstrap 响应式设计 Bootstrap 排版 Bootstrap Glyphicons Boot..
Bootstrap Typeahead 简介 在本教程中，您将看到如何使用 Bootstrap 创建 Typeahead。 Typeahead 在用户填写表单时，为用户提供提示或数据。 Bootstrap 允许您创建外观好看的 Typeahead，而且，它易于扩展，您可以不需要太大的改动就可以加强它的功能。 什么是必需的 Typeahead 是 Bootstrap 2.x版本的产品，所以本教程采用的是Bootstrap2.0进行测试。..
Bootstrap 排版 简介 在本教程中，您将学习如何使用 Bootstrap 工具包来创建标题、段落、列表和其他内联元素。 解释 Bootstrap 版本 2.0 的 bootstrap.css 中的表单行号 286 到行号 515，包含了排版样式。 Bootstrap 排版实例 实例 [mycode2] This is heading 1 / H1 This is heading 2 / H2 This is head..
Bootstrap Wells 如果你需要页面中有嵌入的效果，在Bootstrap中你只需要使用.well类即可。实例如下： Hi, am in well !! 在线查看实例 实例显示效果如下： 尺寸 通过使用 well-lg 或 well-lg 来设置 well的大小，用这两种可选修饰类，可以控制内补（padding）和圆角。实例如下： Hi, am in large well !! Hi, am in small wel..
Bootstrap Well Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well： 实例 [mycode3 type='html'] 您好，我在 Well 中！ [/mycode3] 尝试一下 » 结果如下所示..