bootstrap3
bs是基于html5和css3的, h5和css3是今后的趋势.
html5只是说文档的 "标准"是h5, 但是文档的类型仍然是 html. 所以在写文档类型的时候, 就不能要那个5了 , 即: <!doctype html> 不要写成: <!doctype html5 同样的, 在用zen coding缩写的时候, 也是 html:5, 而不是html5, 前者还有很多类似的文档写法如:html:xt等.
到底是用html5还是xhtml?
当然是用html5!
因为html5是向下, 向后兼容的, 它不会break任何已有的网页, html5完全能够解析之前的xhtml文档的, 你可以把之前的xhtl文档, 改写为html5的标准类型, 不会出什么问题的.
只是说, html5新增了一些类型, 如绘画canvas,媒介回放video, audio, header, footer, nav, 新增一些表单控件如date, time,你直接就可以选择时间日期了, 不用再去使用插件了. 等等,还有 支持web绘图的canvas和webgl组件,属性等,就是把以前需要插件的东西, 现在都用内置的标签技术来实现了, 如flash等.... 这些属性在低级的浏览器中可能不被支持, 但是你可以不用这些较高级的标签和属性就好了.
还有, 就是要看你的项目和使用对象, 如果是ie678的用户是主要浏览器, 那就还是使用xhtml, 或者使用h5, 然后针对ie做一些hack...如果是使用firefox, chrome的, 如国外的web站点基本上使用的是html5.
制定标准的组织, what working group & W3C 在html向xml过渡的标准xhtml1.0, 2.0标准, 其实很多厂商并没有遵守.
bootstrap的row必须放在container中, 这样便于为其设置对齐和分配padding.
container的左右padding是15px, 而row的左右margin是 -15px, 这样container和row就刚好抵消, 使得col就能够从container的最左边开始. 而col也有15px的左右padding. 这样"劳心费力" 的设计, 就是为了让 col在 嵌套row的时候, 就如同.container一样也成为了一个容器.
其实container也不是固定宽度的, 会根据不同屏幕分辨率而改变尺寸, 从1170, 970, 750px变化.
pin是钉子钉住, spin的结果效果,就是 异步加载动画时, 的那个旋转的动画. 因此, spin的意思是: "旋转, 纺纱, 吐丝" 是不是专门有一个插件spin.js就是加载动画的 意思,(它是通过js脚本来生成spin的动画, 而不是用一个gif图片来显示???)
spin.js的用法?
spin.js主要是用在异步ajax加载. 它不是像以前那样的使用gif图片, 而是使用js来生成. 而且可以通过opts来设置生成的 旋转spin"图片"的参数. 参考网址: spin.js.org
也可以manual insertion:
var spinner = new Spinner().spin()
target.appendChild(spinner.el) // 使用 spinner的el属性.
使用spin.js来生成加载"图片"的优点是, 可以非常方便的调节opts的参数大小, 来生成各种不同的, 符合你想要的"加载"图片.
spin.js生成"图片"的性质: 注意所看到的其实是一个 "图像" 但其实不是一个图片!
在计算机中 图形, 图像, 图片的区别?
图片就真的是一个文件, 通常是像素文件,如照相机手机照相得到的图片文件.
图形, 是指由物体的外在轮廓组成的矢量线条. 主要是指由计算机绘图形成的直线, 圆, 矩形, 梯形等
图像,就是我们所看到的影像, 不同于文字的, 具有一定外形轮廓和颜色的影像.
所以, 由spin.js生成的是 图像, 是影像.. 不是图片
因为: spin.js生成的其实一个 大的div, 类是"spinner",角色是role="progressbar" 这个类下面再是n个子div, 这些子div实际上就是 外面选择的那些 图形, 这些图形的外观 是通过css来实现的, css的样式值就是opts中设置的参数值.
注意, 默认的spin是定位在 屏幕的中心的, 不会放在父容器div内, 因为 spin的样式值 positon: absolute是绝对定位, 所以, 要想让spin放在 父div中, 应将 父div的样式position设置为: relative. 就好了.
超链接中的href和onclick的区别?
-
href和onclick哪个先执行? 是让onclick先执行, 并且a链接是根据 onclick执行的返回结果 来判断是否 跳转的, 如果onclick 返回true, 则跳转, 如果返回false, 则不跳转. 所以, href是要在 那里 一直等待的, 等待onclick的返回值的. 所以 onclick 最好是要明确的返回值, 使用return关键词的
-
href中最好还是写 跳转路径, 虽然它是可以写 javascript协议的, 但是不推荐那样写.
-
如果 onclick没有写return关键字, 那么默认的就是true, 跳转就会发生, 而且不管你在onclick中做了什么选择. 因为onclick通常就是用 confirm(""), 来判读啊是否要跳转的. 所以不要忘了写return 关键字.
bootstrap的折叠组件/手风琴组件和控制台组件的区别
折叠 **组件 **是由 一个触发按钮 + 一个内容div 构成的; 通常布局方式是 上下 方式的.
手风琴则是由 多个折叠组件 构成的 功能单元;
折叠组件和 控制台组件是不同的, 因为折叠组件的内容div就是在它的下方, 而控制台的内容 则是分离的, 通常是左右 结构布局的.
关于 transition 样式的使用
transition.js插件, 是bs用来产生 过渡 效果的插件.
transition: 的英文意思就是 过渡...
- 在 css3中,本身就有, 自带就 有transition的样式, 它有四个属性值:
transition-property: 是指元素的什么 属性值, 如是让width, 还是让height等什么属性值 产生过渡
transition-during: 过渡效果的持续时间
transition-timing-funciton: 过渡效果的时间函数, 就是过渡的方式, 通常是ease; 注意timing和function是两个单词, 所以中间用短横线-链接哦
transition-delay: 延迟,多少时间开始过渡...
比如: div {color: red; transition: width 2s; -moz-transition: width 2s; -webkit-transition: width 2s;
其中, 2s是指持续时间是2s, 这个s不能省略.
-moz, -webkit是前缀, 是针对低版本的 firefox和 chrome的 hack...
-
css3的transition样式使用的方法: 将ｔｒａｎｓｉｔｉｏｎ：写在某个元素上即可, 如同, border, background等样式一样!! 是由几个 分量值组成的.
与其他所有 "静态" 样式不同的是, 由于transition样式本身就 是一个 "动态"样式, 估计其内部实现, 本身就 "带有js 的功能, 以前是由 transition.js实现的, 要变化的", 所以他的执行方式是: 要 想生效时, 将 鼠标移到 元素上 , 如果将鼠标移出 元素, 则会恢复到原来的 状态. 不像静态样式一开始就会显示出来!! -
但是, 要产生transition效果, 最重要的还是 要设置 变化开始和结束时 的 两个确定的属性值: 因为要变化嘛, 就必须有一个开始和结束时的值, 即开始时, 要设置div的初始确定尺寸, 然后要设置 div:hover 这个伪类(必须是:hover伪类, 没有:click的伪类) 的尺寸. 这个是最重要的, 如果不设置 :hover伪类是不会有transition效果的!
英语中, 表示"没有" 的方式:
如果表示某个地方, 没有什么东西的时候, 使用 there is not...
但是如果要 表示没有什么东西 做什么, 干什么的时候, 使用 No something do????
bs 生成组件的方法有两种, 一种是标记法, 即完全使用css样式实现, 另一种就是使用js方法, 通过脚本来实现.
bs包括整个js整个 计算机程序设计中 的 方法和事件 的区别?
方法是： 直接提供给用户使用的api函数, 特点是, 你需要显式的去调用它, 是由使用者规定的, 是主动的 是确定的, 主动的.
事件: 则是不确定的, 你不知道她什么时候发生, 就像一个按钮一样, 它是给用户点击的, 但是你不知道用户什么时候, 会去点击它. 所以, 事件就提供了一种 "伺服, 等待, 监视, 监控, 监听 也就是 listener的作用", 一旦发生某个 事件, 就怎么样, 后面的行为和反应 是一种 "回调"函数, 是一种 所谓的"预案", 一种预备性反应.
bs中的组件, 特点是, 至少要先 使某个元素对象, 如div等, 先成为某个组件后, 然后才能调用 js脚本方法等.
流程图插件 ystep.js ichat.js的使用 bs中的树形图和控制台组件?
参考地址: https://github.com/iyangyuan
湖北省, 千湖之省, 长江中游, 由长江和汉水交汇冲击而成的江汉平原, 和洞庭湖平原. 武汉在很早的时候,由武昌, 汉口, 汉阳三个镇组成的, 包括长江以北的汉口火车站和江南的武昌火车站... 杨园: 音译"洋园" ,以前洋人住的园子.
evan [ev2n]: 人名, 伊凡. evan you vue.js
**注意, 在ystep插件中的 images/pointes_blue.png, 和 images/pointes_green.png 图片, 中的pointes 没有用错, 它不是 点 point的复数, 因为点的 复数是 points, 这里是: "芭蕾舞鞋底硬脚尖, 绷着脚尖点地, 有尖头的 意思" 是pointe 的复数形式. **
**通常, 要查看 背景图片, 在 css文件中, 用background 去搜索: background-image: url('...'), background-position: **
**如果有多个插件都要用到 images/ 目录, 则可能需要将css和 背景图片的 位置适当修改一下 **
所谓的min.css 和 min.js等等, 都是 将原来未压缩的文件 中的 空格, 回车, 换行等 删去了而已, 全部显示在 一行上了. 你可以看压缩后的文件, 显示的只有一行, 而列就有很多列了, 达到几千上万列...
如何区分js对象和json对象?
严格的说, json只是一种 数据格式, 不是什么对象. 参考: http://blog.csdn.net/goskalrie/article/details/52151175 , 严格的说，JavaScript中只有一个JSON对象——全局JSON 对象, 如同 Object,Array,Function等一样，其除了所有对象共有的方法外只有stringify()和parse()两个方法。除此之外，js代码中的任何对象都不可能是JSON对象，即便是使用stringify()方法序列化得到的对象也不是，因为 JSON只是一种格式，没有对象一说，平时说的JSON对象，是JSON格式的js对象或是符合JSON数据结构要求的js对象, 所以 "json对象的说法", 实际上是一种 "误称", 只是你自己知道就好了。
var jsObject={
name:"Nicholas",
age:29
}
var jsonObject={
"name":"Nicholas",
"age":29
}
对于第二个对象, 其实还是js对象, 或者说是叫 json格式的js对象. 第二种叫做 "js字面量对象"
第二个对象你可以说是js对象, 也可以说是 json格式的js对象. (误称 json对象). 到底是什么, 看你怎么使用, 如果用eval(jsonObject), 则表示js对象, 因为eval要调用js解释器. 如果用parse方法, 则是JSON格式...
总之, 一句话, 就是 如果是js对象, 它的属性名称 可以加双引号(字面量对象), 也可以不加双引号. 通常, 只要属性名不是js的保留关键字, 都不必加引号. 而如果你要把它当作交换数据的json来使用, 则还是要严格遵守 属性名加双引号的.
js对象和json加不加 双引号的问题, 是指的 前面的"属性名"要不要加双引号. 跟属性值无关. 因为不管是js对象 还是 "json对象", 属性值都有 多种数据类型, 如字符串, 数字, bool, objct, 和array 数不可能全部都加上组, 双引号, 岂不就只有字符串了, 很显然是不可能的.
## js引擎解释器 "总是" 把字面量(没有引号的)当作变量来解析的, 不会自动转换成字符串来解析的!!! 不像php的echo, 对于字面量, 先做变量解析, 如果找不到,就做字符串解析.对待.
所以, 要注意, js对象的属性值也要严格区分数据类型的, 如果是字符串, 就一定要加上双引号, 否则 所以, console会 报错: 'ReferenceError: ??? variable is not defined', 就是js把没有加引号的属性值当作变量来解析了..., 因此, 可以很肯定地得出一个结论: 对于js中的ajax等, 众多的js插件中的 配置变量, 选项变量,如opts, config等中的 属性值, 基本上都不会传变量进去的, 所以, 基本上就只有三种数据类型: 数字, boolean, 其他的基本上都是 字符串, 都要加 双引号, 如, size: 'small', color: 'green',.....
在jquery的插件中, 对于列表项, 如果有明确含义的, 就使用明确含义的列表项单词, 如ystep.js中 的步骤列表: 就用 steps: [{...}, {....}....] 来表示, 如果没有明确的含义, 如ichat.js中的列表对象, 就用items 来表示, items: [{...}, {...}, ...].
在ichat插件中, 每个列表对象, 包括: "type, title, trigger, open, items(子项目) "5个部分组成. ichat是作用在 body 对象上的, 即 $("body").ichat(opts_obj); opts 共有6 个属性: placement, top, title, color(不是文字的颜色, 而是ichat矩形控件的颜色, 实际上就是底色), trigger, items.
ichat中的 trigger的类型, 为 : click, hover, none. 如果为click表示单击将打开和关闭, 这个可以通过jquery的show/hide/slideup/slidedown来实现, 如果为none, 则不管你单击与否都没有关系的.
其实ichat.js这个插件写得并不太好! 至少, 它没有考虑, 鼠标连续多次单击或 连续多次地 移入移出的情况, 会引起 事件队列的 堆积, 使动画一直执行, 实际上, 应该在事件响应 的 回调函数 的作用对象 执行动画之前先调用 stop(true, true) 方法后, 再调用其他动画就好了. 可以修改这个ichat.js, 在hover事件的回调函数中的适当位置, 加上stop(true, true)就没有那种闪烁现象了.
科学计数法中的E?
任何一个数x 可以写成: a10^n, 其中, 1< |a| <10, 这时就可以把x 记作: aEn的形式, 如 2.1e3, -1.4e6, -3.6e-2...
这里的e(E)仅仅只是表示科学计数法的意思, 不同于数学常数的e=2.7..., 也不同于指数exponent , 指数函数exp()的意思,
它仅仅表示 10的n次方, 这个 e 就已经表示了 10 的n次方了, 所以, 你不要再写10了 , 如: 30000, 直接就写成 3e4就好了. 不要再写成310e4, 那这样岂不是 更复杂, 更麻烦了吗, 这个跟科学计数法的本意就相反 . 使用科学计数法就是想使计数的写法更简洁! 所以用一个字母E, 就表示10的多少次方了. 格式就是aEn
bototstrap的栅格系统中, 列的嵌套计算方法是: 是将被嵌套的那一列 再细分成12等份, 注意不再是将 整个container的宽度分成12等份. 然后被嵌套的列的 总数加起来 要等于12的时候, 才能充满 被嵌套的列, 而不是 说 嵌套列的总数加起来 等于被嵌套列的 份数就可以充满了. 这是因为 嵌套列和其父列的 等份 是不同的! 始终记住, 嵌套列的时候, 是以 被嵌套的列为对象, 再来分成12等份的!
块级元素中文本的对齐是class=text-left/center/right, 块的对齐是class=pull-left/pull-right/block-center
bs 的列表ul, 包括几个类: ul class="list-unstyled", class="list-inline"(使li成水平方向),
特别有用的是, 对于自定义列表, dl > dt +dd. 使用 dl class=dl-horizontal 可以使自定义列表的dt标题和里面的描述排列在同一行上, 就比竖直排列要美观些. 而且dl由于比ul多了一个dt, 所以描述的内容和语义就更丰富.
