摘要：
在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 阅读全文
posted @ 2018-06-22 16:45
二进制三
阅读(131)
评论(0)
推荐(0)
摘要：
接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果：https://www.runoob.com/try/demo_source/bootstrap3-makewebsite.htm <divclass="jumbotron text-center"st 阅读全文
posted @ 2018-06-22 16:33
二进制三
阅读(271)
评论(0)
推荐(0)
摘要：
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默认的 Well： 结果如下所示： 尺寸大小 您可以使用可选类 well-lg 或 well-sm 来改变 Well 的 阅读全文
posted @ 2018-06-22 16:30
二进制三
阅读(157)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可，如下面的实例所示： 结果如下所示： 面板标题 我们可以通过以下两种方式 阅读全文
posted @ 2018-06-22 16:27
二进制三
阅读(394)
评论(0)
推荐(0)
摘要：
本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下： 向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。 下面的实例演示了这点： 结果如下所示： 向列表组添加徽章 我们可以 阅读全文
posted @ 2018-06-22 16:24
二进制三
阅读(165)
评论(0)
推荐(0)
摘要：
本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 媒体对象轻量标记、易于扩展的特性是通过向简单的标记 阅读全文
posted @ 2018-06-22 15:41
二进制三
阅读(231)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 1 阅读全文
posted @ 2018-06-22 15:31
二进制三
阅读(241)
评论(0)
推荐(0)
摘要：
本章将讲解警告（Alerts）以及 Bootstrap 所提供的用于警告的 class。警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。 您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用 警告（Alerts） jQuer 阅读全文
posted @ 2018-06-22 15:11
二进制三
阅读(182)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 缩略图。大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail 的 <a> 标签。 这会添加四个像素的内边距（pad 阅读全文
posted @ 2018-06-22 15:08
二进制三
阅读(180)
评论(0)
推荐(0)
摘要：
页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中： 阅读全文
posted @ 2018-06-22 15:05
二进制三
阅读(2390)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下： 创建一个带有 class .jumbotron. 的容器 <div>。 除了更大的 < 阅读全文
posted @ 2018-06-22 15:02
二进制三
阅读(200)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。 下面的实例演示了这点 阅读全文
posted @ 2018-06-22 14:59
二进制三
阅读(238)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，如下面的实例所示： 结果如下所示： 您可以使用修饰的 class label-default、label-primary、label-success、label-info、l 阅读全文
posted @ 2018-06-22 14:56
二进制三
阅读(165)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。 分页（Pagination） 下表列出了 Bootstrap 提供的处理分页的 class。 默认的分页 下面的实例演示了上表中所讨论的 class . 阅读全文
posted @ 2018-06-22 14:51
二进制三
阅读(256)
评论(0)
推荐(0)
摘要：
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通 阅读全文
posted @ 2018-06-22 14:43
二进制三
阅读(361)
评论(0)
推荐(0)
摘要：
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。 导航栏是一个很好 阅读全文
posted @ 2018-06-22 14:42
二进制三
阅读(334)
评论(0)
推荐(0)
摘要：
本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。 表格导航或标签 创建一个标签式的导航菜单： 以一个带有 class .nav 阅读全文
posted @ 2018-06-22 14:34
二进制三
阅读(162)
评论(0)
推荐(0)
摘要：
本章将讲解 Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 @， 阅读全文
posted @ 2018-06-22 14:26
二进制三
阅读(288)
评论(0)
推荐(0)
摘要：
本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。 下面的实例演示了一个基本的简单的按钮下 阅读全文
posted @ 2018-06-22 14:18
二进制三
阅读(484)
评论(0)
推荐(0)
摘要：
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class： Class描述代 阅读全文
posted @ 2018-06-22 14:15
二进制三
阅读(222)
评论(0)
推荐(0)
摘要：
本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。 如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单： 阅读全文
posted @ 2018-06-22 14:09
二进制三
阅读(7116)
评论(1)
推荐(0)
摘要：
本章将讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap 捆绑了 200 多种字体格式的字形。首先让我们先来理解一下什么是字体图标。 什么是字体图标？ 字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可 阅读全文
posted @ 2018-06-22 14:06
二进制三
阅读(585)
评论(0)
推荐(0)
摘要：
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。 超小屏幕手机 (<768px)小屏幕平板 (≥768 阅读全文
posted @ 2018-06-22 11:51
二进制三
阅读(185)
评论(0)
推荐(0)
摘要：
本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。 文本 以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗： 背景 以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗： 其他 更多实例 关闭图标 使用通用的关闭图标来关闭模态框和警告框。使 阅读全文
posted @ 2018-06-22 11:44
二进制三
阅读(235)
评论(0)
推荐(0)
摘要：
在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class： .img-rounded：添加 border-radius:6px 来获得图片圆角。 .img-circle：添加 border-radius:50% 来让整个图片变成圆形。 阅读全文
posted @ 2018-06-22 11:36
二进制三
阅读(182)
评论(0)
推荐(0)
摘要：
本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示： 以下样式可用于<a>, <button>, 或 <input> 元素上： 下面的实例演示了上面所有的 阅读全文
posted @ 2018-06-22 11:30
二进制三
阅读(155)
评论(0)
推荐(0)
摘要：
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自 阅读全文
posted @ 2018-06-22 11:23
二进制三
阅读(196)
评论(0)
推荐(0)
摘要：
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签描述 <table> 为表格添加基础样式。 <thead> 表格标题行的容器元素（<tr>），用来标识表格列。 <tbody> 表格主体中的表格行的容器元素（<tr>）。 <tr> 一组出现 阅读全文
posted @ 2018-06-22 11:07
二进制三
阅读(234)
评论(0)
推荐(0)
摘要：
Bootstrap 允许您以两种方式显示代码： 第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。 第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。 请确保当您使用 <pre> 和 <code> 阅读全文
posted @ 2018-06-22 11:00
二进制三
阅读(127)
评论(0)
推荐(0)
摘要：
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样 阅读全文
posted @ 2018-06-22 10:53
二进制三
阅读(182)
评论(0)
推荐(0)
摘要：
本章节我们将讲解 Bootstrap 的网格系统（Grid System）。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 本章节我们将讲解 Bootstrap 的网格系统（Grid System）。 Bo 阅读全文
posted @ 2018-06-22 10:38
二进制三
阅读(176)
评论(0)
推荐(0)
摘要：
在这一章中，我们将讲解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML 5 文档类型（Doctype） Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype 阅读全文
posted @ 2018-06-22 10:12
二进制三
阅读(133)
评论(0)
推荐(0)
摘要：
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将 阅读全文
posted @ 2018-06-22 09:57
二进制三
阅读(237)
评论(0)
推荐(0)
浙公网安备 33010602011771号