Bootstrap3

Bootstrap 教程

Bootstrap 教程

Bootstrap 教程Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。Bootstrap 可视化布局系统!在您学习完本教程后,您即... »

按钮上拉菜单

Bootstrap 按钮下拉菜单

Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。分割按钮的左边是原始的功能,右边是显示下拉菜单的切换。 »

Well 的尺寸大小

Bootstrap Well

Bootstrap WellWell 是一种会引起内容凹陷显示或插图效果的容器 。为了创建 Well,只需要简单地把内容放在带有 class .well 的 中即可。下面的实例演示了一个默认的 Well:实例您好,我在 Well 中!这两个类是与 .well 类结合使用的。您好,我在小的 Well 中! »

Bootstrap v2 教程

Bootstrap v2 教程Bootstrap,来自 Twitter,是基于 HTML、CSS、JAVASCRIPT 的简介灵活的流行前段框架及交互组件集。现在开始学习 Bootstrap! »

Bootstrap 简介

Bootstrap 简介 什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什... »

输入框组中分割的下拉菜单按钮

Bootstrap 输入框组

Bootstrap 输入框组本章将讲解 Bootstrap 支持的另一个特性,输入框组。输入框组扩展自 结果如下所示:输入框组的大小您可以通过向 .input-group 添加相对表单大小的 class来改变输入框组的大小。输入框中的内容会自动调整大小。 »

Bootstrap 创建一个网页

Bootstrap 创建一个网页接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。在学习之前我们可以先看下效果: »

Bootstrap HTML编码规范

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

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 支持的一些表格元素: 标签 描述 为表格添加基础样式。 表格标题行的容器元素( ),用来标识表格列。 表格主体中的表格行的容器元素( )。 一组出现在单行上的表格单元格的容器元素( 或 )。 默认的表格单元格。 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 内使用。 关于表... »

Page 1 of 3123