11 2015 档案
摘要：事件下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用。事件描述实例show.bs.collapse在调用 show 方法后触发该事件。$('#identifier').on('show.bs.collapse', function () { // 执行一些动作.....
阅读全文
摘要：Bootstrap历练实例：简单的可折叠 简单的折叠 日本超音速导弹 ...
阅读全文
摘要：折叠插件(collapse)可以很容易地让页面区域折叠起来， 无论您是用它来创建折叠导航还是内容面板，它都允许很多内容选项。您可以使用折叠插件1、创建可折叠的分组或折叠的面板 Bootstrap历练实例：折叠插件(collapse)面板 ...
阅读全文
摘要：复选框（Checkbox）您可以创建复选框按钮组，并通过向btn-group添加 data 属性data-toggle="buttons"来添加复选框按钮组的切换。 Bootstrap 历练实例 - 按钮（Button）插件复选框 ...
阅读全文
摘要：单个切换如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加data-toggle="button"作为其属性即可，如下面实例所示： Bootstrap历练实例：按钮(Button)插件单个切换 ...
阅读全文
摘要：通过按钮(Button)插件,您可以添加进一些交互、比如控制按钮的状态、或者为其它组件(工具栏)创建按钮组。加载状态如需向按钮添加加载状态，只需要简单地向 button 元素添加data-loading-text="Loading..."作为其属性即可，如下面实例所示： Bootstrap历练...
阅读全文
摘要：事件下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。事件描述实例close.bs.alert当调用close实例方法时立即触发该事件。$('#myalert').bind('close.bs.alert', function () { // 执行一些动作...})c...
阅读全文
摘要：Bootstrap历练实例：警告框(Alert)插件的方法 × 成功!结果是成功的。 × ...
阅读全文
摘要：警告消息大多来是用来向终端用户提示警告或确认的消息，使用警告框插件，您可以向所有的警告框消息添加取消功能。用法您有以下两种方式启用警告框的可取消功能。1、通过data属性：通过数据添加可取消功能(data api),只需要要向关闭按钮添加data-dismissal="alert"，就会自动为警告框...
阅读全文
摘要：事件下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。事件描述实例show.bs.popover当调用 show 实例方法时立即触发该事件。$('#mypopover').on('show.bs.popover', function () { // 执行一些动作....
阅读全文
摘要：方法下面是一些弹出框（Popover）插件中有用的方法：方法描述实例Options:.popover(options)向元素集合附加弹出框句柄。$().popover(options)Toggle:.popover('toggle')切换显示/隐藏元素的弹出框。$('#element').popov...
阅读全文
摘要：Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似，提供了一个扩展的视图，用户只需要把鼠标指针悬停到元素上面即可。弹出框的内容完全由Bootstrap Data API来填充。用法弹出框插件根据需要生成内容或标记，默认情况下把弹出框(Popove...
阅读全文
摘要：事件下表列出了提示工具（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用。事件描述实例show.bs.tooltip当调用 show 实例方法时立即触发该事件。$('#myTooltip').on('show.bs.tooltip', function () { // 执行一些动作...
阅读全文
摘要：方法下面是一些提示工具（Tooltip）插件中有用的方法：方法描述实例Options:.tooltip(options)向元素集合附加提示工具句柄。$().tooltip(options)Toggle:.tooltip('toggle')切换显示/隐藏元素的提示工具。$('#element').to...
阅读全文
摘要：当您想要描述一个链接的时候，使用提示工具插件是一个不错的选择。Bootstrap提示工具插件做了很多的改进，例如不需要依赖图像，而是改变Css动画效果，用data属性来存储标题信息。用法提示工具(Tooltip)插件根据要求生成内容和标记，默认情况是把提示工具放在它们触发元素的后面，您可以有以下两种...
阅读全文
摘要：事件下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。事件描述实例show.bs.tab该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用event.target和event.relatedTarget来定位到激活的标签页和前一个激活的标签页。$('a[dat...
阅读全文
摘要：标签页(Tab)在Bootstrap导航元素一章中简介过，通过结合一些data属性，您可以轻松地创建一些标签页界面。通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中。用法您可以通过以下两个方式来启用标签页1、通过data属性：您需要添加data-toggle="tab"或da...
阅读全文
摘要：Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标
阅读全文
摘要：Bootstrap历练实例：下拉菜单插件方法的使用 w3cSchool ...
阅读全文
摘要：Bootstrap历练实例：标签页内的下拉菜单 Html5 Css3 Javascript Bootstrap jQuery ...
阅读全文
摘要：Bootstrap历练实例：导航内的下拉菜单 w3cschool ...
阅读全文
摘要：使用下拉菜单的插件，您可以向任何组件(比如：导航栏，标签页，胶囊式导航，按钮)添加下拉菜单用法您可以切换下拉菜单(dropdown)插件隐藏内容1、通过data属性，向链接或按钮添加data-toggle="dropdown"来切换下拉菜单。 下拉菜单触发器 ...
阅读全文
摘要：模态框(Modal)是覆盖在父窗体上的子窗体。通常，其目的是显示来自一个单独源的内容，可以在不离开父窗体的情况下进行一些交互，子窗体提供一些交互或信息。 Bootstrap历练实例：模态框(Modal)插件 创建模态框(Modal) 开始演示模态框 ...
阅读全文
摘要：Bootstrap多媒体对象（Media Object）本章我们将讲解 Bootstrap 中的多媒体对象（Media Object）。这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混...
阅读全文
摘要：向列表组添加自定义内容我们可以向上面已添加链接的列表组添加任意的 HTML 内容。下面的实例演示了这点： Bootstrap历练实例：向列表组添加内容 Html5 Css3Css3是html5前端必学的技术 ...
阅读全文
摘要：向列表组添加链接通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 代替 元素。下面的实例演示了这点： Bootstrap历练实例：向列表组添加链接 Html5 Css3 ...
阅读全文
摘要：向列表组添加徽章我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 元素中添加即可。下面的实例演示了这点： Bootstrap历练实例：带徽章的列表组 Html5 Css3 ...
阅读全文
摘要：Bootstrap列表组本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：向元素 添加 class.list-group。向 添加 class.list-group-item。下面的实例演示了这点： Bootstrap历练实例：默认的列表...
阅读全文
摘要：带列表组的面板我们可以在任何面板中包含列表组，通过在 元素中添加.panel和.panel-default类来创建面板，并在面板中添加列表组。您可以从列表组一章中学习如何创建列表组。 Bootstrap历练实例：带列表组的面板 ...
阅读全文
摘要：带表格的面板为了在面板中创建一个无边框的表格，我们可以在面板中使用 class.table。假设有个 包含.panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含.panel-body的 ，则组件会无中断地从面板头部移动到表格。下面的实例演示了这点： Bootstra...
阅读全文
摘要：带语境色彩的面板使用语境状态类panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板，实例如下： Bootstrap历练实例：语境色彩的面板 ...
阅读全文
摘要：面板脚注我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class.panel-footer的 中即可。下面的实例演示了这点： bootstrap历练实例：面板脚注 面板的标题 ...
阅读全文
摘要：面板标题我们可以通过以下两种方式来添加面板标题：使用.panel-headingclass 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.使用带有.panel-titleclass 的 - 来添加预定义样式的标题。下面...
阅读全文
摘要：Bootstrap面板（Panels）本章将讲解 Bootstrap 面板（Panels）。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 元素添加 class.panel和 class.panel-default即可，如下面的实例所示： Bootstrap历练实...
阅读全文
摘要：Bootstrap历练实例：大小Well Hello、Bootsrtap、我在大的Well中。 Hello、bootstrap、我在小的Well中。 ...
阅读全文
摘要：Well 是一种会引起内容凹陷显示或插图效果的容器 。为了创建 Well，只需要简单地把内容放在带有 class.well的 中即可。下面的实例演示了一个默认的 Well： Bootstrap历练实例：默认的Well Hello、...
阅读全文
摘要：Bootstrap历练实例：堆叠的进度条 40%完成(成功) 30%完成(成功) 20%完成(成功)
阅读全文
摘要：90%完成(成功) 70%完成(成功) 50%完成(成功) 30%完成(成功...
阅读全文
摘要：Bootstrap历练实例：带链接的警告 成功，很好地完成了提交。 信息，这是一个很重要的信息。 警告，这个不能提交。...
阅读全文
摘要：Bootstrap历练实例：可取消的警告 × 成功，很好地进行了提交。 ...
阅读全文
摘要：本章将讲解警告(Alerts)以及bootstrap所提供的用于警告的class类。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框，请使用警告（Alerts） jQuery 插件...
阅读全文
摘要：本章将讲解Bootstrap缩略图，大多数站点都需要要在网格中布局图像，视频，文本。Bootstrap通过缩略图为此提供了一些简便的方法，使用Bootstrap创建缩略图的步骤如下：1、在图像的周围添加带class.thumbnail类的标签。2、这会添加四个像素的内边距和一个灰色的边框。3、当鼠标...
阅读全文
摘要：Bootstrap页面标题(PageHeader)是个不错功能，它会网页的标题的四周添加适当的间距，当一个网页中有多个标题并且每个标题之间需要添加一定适当的间距，使用页面标题是非常有用的。如果需要使用页面标题，你把标题放到一个class.pageheader类的div中。实例： ...
阅读全文
摘要：本章将讲解Bootstrap的一个特性：超大屏幕(Jumbonron),顾名思义该组件可以增加标题的大小，并为登录页面的内容添加更多的外边矩。使用超大屏幕的步骤如下：1、创建一个还有class.jumbonron类的div2、除了更大的 ，字体粗细font-weight被减为 200px。实例： ...
阅读全文
摘要：激活导航状态您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用来激活链接，如下面的实例所示： Bootstrap历练实例：激活导航的状态 Html556 Css3 Bootstr...
阅读全文
摘要：本章将讲解Bootstrap徽章(Badges),徽章与标签相似，主要的区别是徽章的圆角比较圆滑。徽章(Badges)主要用于突出显示新的或未读的项，如果使用徽章，只需要把添加到链接，bootstrap导航等这些元素上即可。
阅读全文
摘要：您可以使用修饰的 classlabel-default、label-primary、label-success、label-info、label-warning、label-danger来改变标签的外观，如下面的实例所示： Bootstrap历练实例：标签修饰 ...
阅读全文
摘要：本章将讲解bootstrap标签，标签可用于计数，提示和页面上其它的标记显示。使用class.laber来显示标签，如下面的实例所示 Bootstrap历练实例：标签(label) This Is Heading:Label This Is...
阅读全文
摘要：翻页的状态下面的实例演示了上表中所讨论的 class.disabled的用法： bootstrap 翻页的状态 ←Older Newer→
阅读全文
摘要：bootstrap 翻页(对齐的链接) ←Older Newer→
阅读全文
摘要：如果您想要创建一个简单的分页链接为用户提供导航，可以通过翻页来实现。与分布链接一样，也是一个无序列表。默认情况下，翻页是居中显示的。下面列出了bootstrap处理翻页的类。Class描述示例代码.pager添加该 class 来获得翻页链接。 Previous Next.previous, ....
阅读全文
摘要：分页的大小下面的实例演示了上表中所讨论的 class.pagination-*的用法： Bootstrap历练实例：分页的大小 « 1 2 3 ...
阅读全文
摘要：分页的状态下面的实例演示了上表中所讨论的 class.disabled、.active的用法： Bootstrap历练实例：分页状态 « 1 2 3 ...
阅读全文
摘要：本章将讲解Bootsrtap支持分页的特性，分页(pagination),是一种无序列表，bootstrap像处理其它界面元素一样处理分布。分页（Pagination）下表列出了 Bootstrap 提供的处理分页的 class。Class描述示例代码.pagination添加该 class 来在页...
阅读全文
摘要：Bootstrap面包屑导航是一种基于网站层次信息显示的方式。以博客为例，面包屑导航可以显示发布日期，类别或标签，它们表示当前页面在导航层次结构内的位置。Bootstrap面包屑导航其实是一个简单的class.breadcrums类的无序列表，其分隔由bootstrap.min.css提供自动添加。...
阅读全文
摘要：Bootstrap历练实例：导航中的表单，它是使用class.navbar-form类，这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为，使用这个对齐方式选项来决定导航栏中的内容放置在哪里。实例： Bootstrap历练实例：导航中的表单 ...
阅读全文
摘要：响应式的导航栏为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes.collapse、.navbar-collapse的 中。折叠起来的导航栏实际上是一个带有 class.navbar-toggle及两个 data- 元素的按钮。第一个是data-toggle，用于告诉 Jav...
阅读全文
摘要：导航栏是一个很好的功能，是bootstrap网站一个突出的特点，导航栏在您的应用或网站中作为导航页头的响应式基础组件，导航栏在移动设备中的视图是堆叠的，随着可视窗口的宽度增大，导航栏也会随之水平展开。默认的导航栏创建一个默认的导航栏步骤如下：1、向nav标签添加class.navbar,.navba...
阅读全文
摘要：Bootstrap历练实例：带有下拉菜单的标签和胶囊导航 Html5 Css3 jQuery jQueryUI Bootstrap ...
阅读全文
摘要：对每个.navclass，如果添加了.disabledclass，则会创建一个灰色的链接，同时禁用了该链接的:hover状态， bootstrap历练实例： 导航元素中禁用的链接 Html5 Css3 ...
阅读全文
摘要：您可以在屏幕宽度大于768px时，通过在分别使用.nav .nav-tabs或.nav .nav-pills的同时使用class.nav-justified,让标签式或胶囊式导航菜单与父元素等宽，在更小的屏幕上，导航链接会堆叠。实例： bootstrap历练实例： 两端对齐的导航菜单 ...
阅读全文
摘要：bootstrap历练实例： 垂直胶囊式的导航菜单 Html5 Css3 JavaScript jQuery jQueryUI ...
阅读全文
摘要：bootstrap历练实例： 基本胶囊式的导航菜单 Html5 Css3 JavaScript jQuery jQueryUI ...
阅读全文
摘要：本章将讲解bootstrap提供的用于定义导航元素的一些选项，它使用相同的标签和基类.nav。Bootsrtap也提供了一个用于共享标记和状态的帮助器类。改变修饰的class,可以在不同的样式间进行切换。表格导航或标签创建一个标签式的导航菜单1、以一个带有class.nav类无序列表开始。2、添加c...
阅读全文
摘要：bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀 ...
阅读全文
摘要：bootstrap历练实例：按钮作为输入框组前缀或后缀 按钮 ...
阅读全文
摘要：Bootstrap历练实例：垂直的按钮组 按钮1 按钮2 按钮3 按钮4 下列 ...
阅读全文
摘要：您可以在一个按钮组内嵌套另一个按钮组，即，在一个.btn-group内嵌套另一个.btn-group。当您想让下拉菜单与一系列按钮组合使用时，就会用到这个。实例： Bootstrap历练实例：嵌套的按钮组 按钮1 ...
阅读全文
摘要：Bootstrap历练实例：按钮组大小 按钮1 按钮2 按钮3 ...
阅读全文
摘要：Bootstrap历练实例：基本按钮群 按钮1 按钮2 按钮3 ...
阅读全文
摘要：Bootstrap历练实例：基本按钮组 按钮1 按钮2 按钮3 按钮4 按钮5 按钮6 ...
阅读全文
摘要：按钮组允许多个按钮被堆叠在同一行上，当您想要把按钮对齐在一起时，使用按钮组就显得非常有用了。下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：Class描述代码示例.btn-group该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 clas...
阅读全文
摘要：Bootstrap历练实例：标签页内的下拉菜单 标签页内的下拉菜单 Html5 Css3 Web前端...
阅读全文
摘要：Bootstrap历练实例：导航内下拉菜单的用法 w3cSchool Html...
阅读全文
摘要：本章将重点讲解bootstrap下拉菜单(Dropdowns),下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 Bootstrap历练实例：下拉菜单 选择课程 ...
阅读全文
摘要：本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用性，bootstrap捆绑了200多种字体格式的字形，首先让我们来理解一下什么是字体图标。什么字体图标？字体图标就是在web项目中使用的图标字体太多了，后续完成。
阅读全文
摘要：Bootstrap图片 图片 .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):
阅读全文
摘要：Bootstrap提供了三种简单的图片样式。 Bootstrap图片 图片 .img-thumbnail 类可制作图片缩略图: .img-circle 类将图片变为圆形 (IE8 ...
阅读全文
摘要：Bootstrap历练实例：禁用的按钮 Bootstrap禁用的按钮 disabled类的按钮 禁用默认的成功按钮 禁用默认的信息按钮
阅读全文
摘要：Bootstrap历练实例：点击激活的按钮 Bootstrap点击激活的按钮 .btn-active类的按钮 默认的成功按钮 点击激活的成功按钮 默认的信息按钮 点击激...
阅读全文
摘要：Bootstrap历练实例：块级按钮 Bootstrap块级按钮 .btn-block类块级按钮 块级的成功按钮 块级的信息按钮
阅读全文
摘要：Bootstrap历练实例：超小的按钮 Bootstrap超小的按钮 .btn-xs类制作超小按钮 超小的成功按钮 超小的信息按钮
阅读全文
摘要：Bootstrap历练实例：小的按钮 Bootstrap小的按钮 .btn-sm类制作小按钮 小的成功按钮 小的信息按钮
阅读全文
摘要：Bootstrap历练实例：大的按钮 Bootstrap大的按钮 .btn-lg类制作大按钮 大的成功按钮 大的信息按钮
阅读全文
摘要：Bootstrap历练实例：链接样式按钮 Bootstrap链接样式按钮 .btn-link类让按钮看起来像个链接（仍然保持按钮的行为） 链接样式按钮
阅读全文
摘要：Bootstrap历练实例：危险样式按钮 Bootstrap:危险样式按钮 .btn-danger类表示危险样式的按钮 危险样式按钮
阅读全文
摘要：Bootstrap历练实例：警告样式按钮 Bootstrap:警告样式按钮 .btn-warning类表示点击按钮后会弹出提示信息的样式 警告样式按钮
阅读全文
摘要：Bootstrap历练实例：弹出提示信息的样式按钮 Bootstrap:弹出提示信息的样式按钮 .btn-info类表示点击按钮后会弹出提示信息的样式 弹出提示信息的样式按钮
阅读全文
摘要：Bootstrap历练实例：成功按钮 Bootstrap:成功按钮 .btn-success类表示操作成功后按钮的样式 成功按钮
阅读全文
摘要：Bootstrap 原始按钮 Bootstrap历练实例：原始按钮 Bootstrap:原始按钮 .btn-primary类是原始按钮的基本样式 原始按钮
阅读全文
摘要：Bootstrap 默认/标准按钮 Bootstrap历练实例：基本按钮 Bootstrap:基本按钮 .btn,.btn-defaul类是按钮的默认/标准基本样式 默认/标准基按钮
阅读全文
摘要：本章将通过实例讲解如何使用Bootstrap按钮，任何带有class.btn的元素都会继承圆角灰色默认按钮样式，但Bootstrap提供了一些选项来定义按钮的样式。实例 Bootstrap历练实例：基本按钮 Bootstrap:基本按钮 ....
阅读全文
摘要：Bootstrap表单控件可以在输入框input上有一个块级帮助文本，为了添加一个占用整个宽度的内容块，请在input后添加help-block.实例： Bootstrap历练实例：表单帮助文本 表...
阅读全文
摘要：表单控件大小您可以分别使用 class.input-lg和.col-lg-*来设置表单的高度和宽度。实例： Bootstrap历练实例：表单控件大小 ...
阅读全文
摘要：验证状态Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。实例： Bootstrap历练实例：验证状态 ...
阅读全文
摘要：禁用的字段集 fieldset对 添加 disabled 属性来禁用 内的所有控件。 Bootstrap历练实例：表单控件状态(禁用的字段集fieldset) ...
阅读全文
摘要：禁用的输入框 input如果您想要禁用一个输入框 input，只需要简单地添加disabled属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。 Bootstrap历练实例：表单控件状态(禁用) ...
阅读全文
摘要：输入框焦点当输入框 input 接收到:focus时，输入框的轮廓会被移除，同时应用box-shadow。 Bootstrap历练实例：表单控件状态(焦点) 焦点： ...
阅读全文
摘要：当您需要在一个水平表单内表单标签后放置纯文本时，请在 上使用 class.form-control-static。实例： Bootstrap历练实例：静态控件 Email: ...
阅读全文
摘要：当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项，则使用选择框1、使用 多选择列表
阅读全文
摘要：响应式表格通过把任意的.table包在.table-responsiveclass 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。 Bootstrap历练实例：响应式表格 ...
阅读全文
摘要：Bootstrap历练实例：表格2 < tr >、< th > 和 < td > .active:将悬停的颜色应用在行或者单元格上 .success:表示一个成功的或积极的动作 ...
阅读全文
摘要：Bootstrap提供了一个清晰的创建表格的布局标签：为表格添加基础的样式。标签：表格标题行的容器元素(),用来标识表格列。标签：表格主题中的表格行的容器元素()。标签：表格底部中的表格行的容器元素()。标签 ：一组出现在单行上的表格单元格的容器元素（ 或 ）。标签：默认的表格单元格。标签：特殊的表...
阅读全文
摘要：Bootstrap允许您以两种方式显示代码：第一种：标签，如果您想要内联显示代码，那么您应该使用标签。第二种：标签，如果代码需要显示为一个独立的代码块元素或者代码有多行，那么您应该使用标签。提示：请确保当您使用 和 标签时，开始和结束标签使用了 unicode 变体：<和>。实例： ...
阅读全文
摘要：使用Bootstrap排版特性，可以创建标题、段落、列表、以及其它的内联元素。1、标题Bootstrap中定义了HTML中所有的标题(h1到h6)的样式 Bootstrap历练作品 这是标题 1 这是标题 2 这是标题 3 这是标题 4 这是标题 5 ...
阅读全文
摘要：HTML5元素可以设置多张图片 //小屏幕显示的图片 //大屏幕显示的图片 //不支持picture元素的图片 srcset属性的必须的，定义了图片资源。media属性是可选的，可以在媒体查询的CSS @media 规则查看详...
阅读全文
摘要：背景图片可以响应式调整大小或缩放，以下是三种不同的方式1、如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变： Bootstrap历练作品 调整浏览器窗口查看图像是如何扩展的。 2、如果 backg...
阅读全文
摘要：使用width属性：如果width属性设置为100%,图片会根据上下范围实现响应式的功能。 调整浏览器窗口查看图像是如何扩展的。注意：在以上实例中，图片会比它原来实际例图片大，我们可以使用max-width属性来解决这个问题，如果max-width属性设置为100%，...
阅读全文
摘要：什么是Viewport?viewport是用户网页的可视区域，翻译为中文可以叫做"视区"。设置Viewport一个常用的针对移动网页优化过的页面的Viewport meta设置如下： width:控制Viewport大小，可以指定的一个值，例如：600或一个特殊的值，如 device-width 为...
阅读全文
摘要：Bootstrap 网格系统(Grid System)实例5：手机，平板电脑，笔记本或台式电脑 Bootstrap历练作品：小中大型设备 Hello Bootstrap ...
阅读全文
摘要：Bootstrap 网格系统(Grid System)实例4：中型和大型设备 Bootstrap历练作品：中型和大型设备 Hello Bootstrap ...
阅读全文
摘要：Bootstrap 网格系统(Grid System)实例：堆叠水平 Bootstrap历练作品: 堆叠水平 Hello Bootstrap ...
阅读全文
摘要：Bootstrap 网格系统(Grid System):堆叠水平，两种样式 Bootstrap历练作品: 堆叠水平 Hello Bootstrap ...
阅读全文
摘要：Bootstrap 网格系统(Grid System)实例：堆叠水平 Bootstrap历练作品: 堆叠水平 Hello Bootstrap ...
阅读全文
摘要：Bootstrap 网格系统(Grid System)Bootstrap提供了一套响应式，移动设备优先的流式网格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。什么是网格(Grid)摘自维基百科：在平面设计中，网格是一种由一系列组织内容的相交直线(垂直的、水平的)组成的...
阅读全文
摘要：HTML5文档类型()Bootstrap前端框架使用了HTML5和CSS属性，为了让这些能正常工作，您需要使用HTML5文档类型(),如果您在使用Bootstrap前端框架创建网页时没有使用HTML5文档类型时，您可能会面临浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不...
阅读全文
摘要：Bootstrap历练作品 这是我的第一个Bootstrap页面 从今天开始起帆Bootstrap之旅，好好学习，努力学习，加油！ 调整浏览器窗口的大小，可以看到响应式的效果。 ...
阅读全文
摘要：Bootstrap,来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、 CSS、 JAVASCRIPT的，它简洁灵活，使得Web开发更加便捷。为什么要使用Bootstrap？1、移动设备优先：自从Bootstrap3.0起，框架包含了贯穿于整个库的移动设备优先的样式。2...
阅读全文
摘要：拖放(drag和drog)是HTML5的标准的组成部分，也是种常见的特性，意义为抓起一个元素放入到另外的一个位置，在HTML5中任何元素都可以被拖放，前题是要相关进行设置。1、设置元素为可拖放，也就是把drapgable属性设置为true2、拖动什么-ondragstart和setData(),规定...
阅读全文
摘要：AJAX是一种与服务器交换数据的技术，无需加载整个页面的情况下，对页面中局部更新。$.ajax()方法执行异步的AJAX请求，所有的jQuery AJAX()的方法都使用$.ajax()方法，该方法通常用于其它方法不能完成的请求。语法格式：$.ajax({name:value, name:value...
阅读全文
摘要：noConflict()方法是解决如何同时在页面上使用jQuery和其它框架，正如您所了解到的jQuery使用$符号作为jQuery的简写，如果其它的javascript框架也需要使用$符号作为简写怎么办呢？其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、C...
阅读全文
摘要：jQuery-AJAX get()和post()方法是通过http get 和 http post请求从远程服务器上请求数据的。两种在客户端和服务端请求-响应的常用方法是get和postget:从指定的资源请求数据，get是用来从服务器上获取(取回)数据,但要注意获取或取回的可能是缓存数据，因为ge...
阅读全文
摘要：jQuery load()方法是简单但功能强大的AJAX方法load方法是从服务器上加载数据，并把返回的数据显示在被选择元素中。语法格式$(selector).load(url,data,callback)参数1：url规定希望加载的数据的地址(必需的);参数2：data规定与请求一同发送的查询字符...
阅读全文
摘要：AJAX是浏览器后台与服务器交换数据的技术，无须加载整个页面的情况下，对页面中的局部进行更新。AJAX=异步的JavaScript与XML(Asynchronous JavaScript and XML)简单的说，在不重载个网页的情况下，AJAX通过后与服务器交换数据，然后在网页中进行显示。通过使用...
阅读全文
摘要：HTML5 Geolocation(地理位置)、是用来定位用户的位置的。HTML5 Geolocation API 用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私权，除非用户同意，否则不能获取用户的位置信息。请使用getCurrentPosition()方法来获取用户的地理位置信息提示：HTM...
阅读全文
摘要：HTML5服务器发送事件是允许获得来自服务器的更新。server-sent事件-单向传递消息，表示网页自动获取来自服务器的更新。其中有一个重要的对象，eventsource对象是用来接收服务器发送事件的通知。实例： 获取来自服务器的更新数据 ...
阅读全文
摘要：HTML5 web workers是运行在后台的JavaScript,不会影响页面的性能。什么是web worker?当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本运行完成。而在HTML5 中的web worker是运行在后台的JavaScript,独立于其它的脚本，不会影响页面的性...
阅读全文
摘要：Manifest文件是简单的文本文件，它告知浏览器缓存的内容(或不缓存的内容)Manifest文件可以分为三个部分：1、CAHCEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存。CACHE MANIFEST(必需的)/style.css/html5logo.png/active.js上...
阅读全文
摘要：使用HTML5,通过创建一个cache manifest文件，可以轻松地创建web应用的离线版本。什么是HTML5应用程序缓存？自从HTML5引入了应用程序缓存，这意味着web可以进行缓存，可以在没有连接网络的情况下继续访问web.应用程序缓存为应用带来了三个优势：1、离线浏览-用户可以应用离线时使...
阅读全文
摘要：HTML5中元素是用来描述文档中的底部信息，比如：版本，版权，作者，链接声明，联系信息，时间等等。实例： 这是一个底部的信息 底部信息是用来描述：版本，版权，作者，链接声明，联系信息，时间等等。
阅读全文
摘要：sessStorage对象是一个会话形式的数据存储，当用户关闭浏览器的窗口后，数据就会被删除。实例： 点击按钮查看计数器增加 关闭浏览器窗口再一次打开，继续点击按钮，计算器已复位,数据重新开始计数
阅读全文
摘要：localStorage对象存储的数据没有时间限制，比如：它可以存储到第二天，第三周，半年，或二三年，只要您的电脑没有重新安装系统或更换硬盘，数据仍然会被保留着。实例： localStorage 实例分析：1、使用key="englishName"和value="mela...
阅读全文
摘要：HTML5 中web存储是一个比cookies更好的一个本地存储方式。那么什么是HTML5存储呢？使用HTML5可以在本地存储用户浏览的数据，HTML5技术没有出来之前是使用cookies进行本地存储。但是web存储更加的安全与快速， 这些数据不会被保存到服务上，但这些数据是用户用来请求网站上的数据...
阅读全文
摘要：header,nav,section,article,aside,figue,figcaption,footer以上这些标签(除figcaption标签外)都是块级标签，为了让这些标签及元素在所有的浏览器生效，你需要在样式列表文件中设置display:block属性，设置属性的意义是为了低版本浏览器...
阅读全文
摘要：HTML5元素是用来定义页面文档中独立的流内容(图像，图表，照片，代码块)，figure内容与主内容有关，如果被删除，则不影响主文档流的产生。HTML5元素是用来描述figue元素的标题，可以放到第一个位置或最后一个位置。实例： HTML5是下一代HTML的标准 ...
阅读全文
摘要：HTML5元素用来定义页面文档中主区域内容之外的内容，但之外的内容是与主区域内容相关的。实例： 这个页面是我开始用html5进行布局的。 HTML5是下一代HTML的标准 ...
阅读全文
摘要：HTML5元素用来定义页面文档的独立内容。实例： article article header article aside ...
阅读全文
摘要：HTML5元素用来定义页面文档中的逻辑区域或内容的整合(section,区域)，比如章节、页眉、页脚或文档中的其他部分。根据W3C HTML5文档中：section里面应该包含标题及一级内容。实例： sectionsection标签是用来定义页面文档中的逻辑区域或内容的整合，通常会包含...
阅读全文
摘要：HTML5中元素定义页面导航链接的部分区域，但并不是所有的链接都放到nav元素里面。实例： 页面导航 HTML5 CSS3 JavaScript jQuery ...
阅读全文
摘要：HTML5元素1.header元素描述了文档的头部区域，主要用于定义内容的介绍展示区域.2.实例：heder元素描述了文档的头部区域2015-11-19这里是一个段落，可以在这个里面写入一些文章信息
阅读全文
摘要：语义通俗化为意义，也就是语义化的元素等于意义化的元素，看到这个元素的名称，就知道这个元素的意义，是拿来做什么用的，这就是HTML5的一个新特性，一个具有语义化的元素能够清楚的把元素的意义告诉浏览器和开发者。无语义标签：1.2.2.有语义标签：1.//语义表单2.//语义表格3.//语义：表示页面的头...
阅读全文