二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示。0b111110111 === 503 // true0o767 === 503 // true八进制用 0o 前缀表示的方法,将要取代已经在 ES5 中被逐步淘汰的加前缀 0 的写法。Number.isFinite(), Number.isNaN()ES6 在 Number 对象上,新提供了 Number.isFinite() 和 Number.
ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。codePointAt()JavaScript 内部,字符以 UTF-16 的格式储存,每个字符固定为 2 个字节。对于那些需要 4 个字节储存的字符(Unicode 码点大于 0xFFFF 的字符),JavaScript 会认为它们是两个字符。var s = "?";s.length // 2s.charAt(0) // ''s.charAt(1) // ''s.charCodeAt(0) // 55362s.
数组的解构赋值ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。以前,为变量赋值,只能直接指定值。var a = 1;var b = 2;var c = 3;ES6允许写成下面这样。var [a, b, c] = [1, 2, 3];上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。
let 命令基本用法ES6 新增了 let 命令,用来声明变量。它的用法类似于 var,但是所声明的变量,只在 let 命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中,分别用 let 和 var 声明了两个变量。然后在代码块之外调用这两个变量,结果 let 声明的变量报错,var 声明的变量返回了正确的值。
ECMAScript 6(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。Mozilla 公司将在这个标准的基础上,推出 JavaScript 2.0。ES6 的目标,是使得 JavaScript 语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。ECMAScript 和 JavaScript 的关系很多初学者会感到困惑:ECMAScript 和 JavaScript 到底是什么关系?
阮一峰,70 后,在上海出生和长大,大学糊里糊涂读了经济学。工作了几年,又去读了世界经济的研究生,毕业后,在上海一所本地高校当了老师,教财经类的课程。最近,去了支付宝的前端团队,在玉伯负责的"体验技术部"工作,目前主要从事 JavaScript 和 Node.js 的开发。
《ECMAScript 6 入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新引入的语法特性。本书力争覆盖 ES6 与 ES5 的所有不同之处,对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。适用人群本书为中级难度,适合已有一定 JavaScript 语言基础的读者,用来了解这门语言的最新发展;也可当作参考手册,查寻新增的语法点。
下面就是一个轮播组件的案例。代码:<body style="width:900px; margin-left:auto; margin-right:auto;"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <
对为支持折叠功能的组件,例如 accordions 和导航,赋予基本样式和灵活的支持。插件依赖折叠插件依赖过渡效果插件。案例使用折叠插件,通过扩展 panel 组件从而构建了一个简单的 accordion 组件。先来看一下效果。接下来看一下代码的实现。<div class="container" style="margin-top:140px;"> <div class="panel-group" id="accordion">
按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。状态通过添加 data-loading-text=" 正在加载..."可以使按钮呈现加载状态。<button type="button" id="fat-btn" data-loading-text="正在加载..." class="btn btn-primary"> Loading state </button>不过如果想启用加载的状态,还需要在点击按钮的时候进行手动启动。
案例通过这个插件可以为所有警告框增加关闭功能。 <div id="alert1" class="alert alert-warning fade in"> <button id='alert1' type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. <
案例为页面内容添加一个小的覆盖层,就像 iPad 上的效果一样,为页面元素增加额外的信息。先来看几个简单的静态案例效果图效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容。<div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"></div> <
受到 Jason Frame 开发的 jQuery.tipsy 插件的启发,Bootstrap 才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用 CSS3 来实现动画效果,并使用 data 属性存储标题。将鼠标悬停在按钮、文本框、链接等等一些基本控件上就可以看到提示了,先上一个效果图主要实现了按钮的上下左右的 ToolTip,然后是文本框和链接的 ToolTip。<
之前通过组件只是简单的学习过这样的。<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li></ul>当然效果就是这样,只是默认的激活了第一个标签 Home,然后不能点击。
案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记。你可以试试滚动这个页面,看看左侧导航的变化。先把实现的代码上了,你可以通过测试代码先来看看效果。<!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!
调用方式通过 data 属性在链接或按钮上添加 data-toggle="dropdown" 即可切换下拉菜单。<div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>
模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。不支持同时打开多个模态框千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。
关于过渡效果对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译(或压缩)版的 bootstrap.js 文件,就无需再单独将其引入了。包含的内容Transition.js 是针对 transitionEnd 事件的一个基本辅助工具,也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
单个还是全部引入JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js)。建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件,你在使用时,只需选择一个引入页面就可以了。插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。
默认效果把 Well 用在元素上,能有嵌入(inset)的的简单效果。<div class="well">...</div>可选类/样式通过这两种可选修饰类,可以控制此组件的内补(padding)和圆角的设置。<div class="well well-lg">...</div>
关注时代Java