Bootstrap3

Bootstrap 环境安装

Bootstrap 环境安装Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap,讨论 Bootstrap 文件结构,并通过一个实例演示它的用法。下载 Bootstrap您可以从 Staticfile CDN 推荐国内推荐使用 Staticfile CDN 上的库: 此外,你还可以使用以下的 CDN 服务:国际推荐使用:https://cdnjs.com/ »

带有下拉菜单的胶囊

Bootstrap 导航元素

Bootstrap 导航元素 本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间进行切换。 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始。 添加 class .nav-tabs。 下面的实例演... »

Bootstrap 插件概览

Bootstrap 插件概览 在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员,您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API(Bootstrap Data API),大部分的插件可以在不... »

Bootstrap CSS编码规范

Bootstrap CSS编码规范 code { font-family: “PT Mono”, Menlo, “Courier New”, monospace; padding: 2px 4px; font-size: 85%; color: #d44950; background-color: #f7f7f9; border-radius: .2... »

Bootstrap CSS 概览

Bootstrap CSS 概览 在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快、更强壮的最佳实践。 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype)。 因此,请在使用 Bootstrap 项目的开头包含下面的代码... »

反色的导航栏

Bootstrap 导航栏

Bootstrap 导航栏 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 标签添加 class .navbar... »

Bootstrap 过渡效果(Transition)插件

Bootstrap 过渡效果插件过渡效果插件提供了简单的过渡效果。如果您想要单独引用该插件的功能,那么除了其他的 JS 文件,您还需要引用 transition.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的... »

网格系统排序列

Bootstrap 网格系统

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; } 本章节我们将讲解 Boots... »

面包屑导航

Bootstrap 面包屑导航(Breadcrumbs)

Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.c... »

模态框(Modal)插件事件

Bootstrap 模态框(Modal)插件

Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 结果如下所示: 代码讲解: 使用模态窗口,您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。 如果您仔细查看上... »

列表

Bootstrap 排版

Bootstrap 排版 Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性,您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式。请看下面的实例: 实例 我是标题1 h1 我是标题2 h2 我是标题3... »

翻页的状态

Bootstrap 分页

Bootstrap 分页 本章将讲解 Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。 分页(Pagination) 下表列出了 Bootstrap 提供的处理分页的 class。 Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页。 « 1 ....... .... »

固定到顶部

Bootstrap 下拉菜单(Dropdown)插件

Bootstrap 下拉菜单插件结果如下所示:在标签页内下面的实例演示了在标签页内的下拉菜单的用法: 实例 带有下拉菜单的标签页 Home SVN iOS VB.Net Java Swing ... »

代码

Bootstrap 代码

Bootstrap 代码Bootstrap 允许您以两种方式显示代码:第一种是 标签。如果代码需要被显示为一个独立的块元素或者代码有多行,那么您应该使用 标签。请确保当您使用 和 标签时,开始和结束标签使用了 unicode 变体: 。让我们来看看下面的实例: 实例 作为内联元素被包围。 »

标签的变体

Bootstrap 标签

Bootstrap 标签 本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签,如下面的实例所示: 实例 Example Heading Label Example Heading Label Example Heading Label Example Heading Label 结果如下所示: 您可以使用修饰的 class ... »

滚动监听(Scrollspy)插件事件

Bootstrap 滚动监听(Scrollspy)插件

Bootstrap 滚动监听(Scrollspy)插件 滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js。或者,正如 结果如下所示: 选项 通过 data 属性或 JavaScript 来传... »

响应式表格

Bootstrap 表格

Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 为表格添加基础样式。 表格标题行的容器元素( ),用来标识表格列。 表格主体中的表格行的容器元素( )。 一组出现在单行上的表格单元格的容器元素( 或 )。 默认的表格单元格。 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 内使用。 关于表... »

激活导航状态

Bootstrap 徽章(Badges)

Bootstrap 徽章(Badges) 本章将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。 徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把 添加到链接、Bootstrap 导航等这些元素上即可。 下面的实例演示了这点: 实例 展示未读邮件: Mailbox 50 结果如下所示: 当没有新的或未读的项时,通过 CSS... »

标签页(Tab)插件事件

Bootstrap 标签页(Tab)插件

Bootstrap 标签页(Tab)插件 标签页(Tab)在 结果如下所示: 方法 .$().tab:该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。      Home     .....      ...     .....     $(function () {         $('#myTab a:last').... »

表单帮助文本

Bootstrap 表单

Bootstrap 表单 在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤: ... »

全宽的超大屏幕(Jumbotron)

Bootstrap 超大屏幕(Jumbotron)

Bootstrap 超大屏幕(Jumbotron) 本章将讲解 Bootstrap 支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登陆页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下: 创建一个带有 class .jumbotron. 的容器 。 除了更大的 ,字体粗细 font-weight 被减为 200。 下面的... »

提示工具(Tooltip)插件事件

Bootstrap 提示工具(Tooltip)插件

Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tooltip)就显得非常有用。提示工具(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息。 如果您想要单独引用该插件的功能,那么您需要引用 ... »

按钮标签

Bootstrap 按钮

Bootstrap 按钮本章将通过实例讲解如何使用 Bootstrap 按钮。下面的实例演示了上面所有的按钮 class: 实例 大的原始按钮 大的按钮 默认大小的原始按钮 默认大小的按钮 小的原始按钮 小的按钮 特别小的原始按钮 特别小的按钮 块级的原始按钮 块级的按钮结果如下所示:按钮状态Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。锚... »

页面标题(Page Header)

Bootstrap 页面标题(Page Header)

Bootstrap 页面标题页面标题是个不错的功能,它会在网页标题四周添加适当的间距。如需使用页面标题,请把您的标题放置在带有 class .page-header 的 中:实例 页面标题实例 子标题 这是一个示例文本。 »

弹出框(Popover)插件事件

Bootstrap 弹出框(Popover)插件

Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。 如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖... »

Page 1 of 3123