移动web开发+前端框架bootstrap+Zepto+gitbook相关笔记,一

1.Bootstrap中的js组件里的标签页使用的是锚点链接的方式切换选项卡及内容的

◆导航区域:a标签的href=\'#home\'

◆内容区域:div标签的home\'

◆使用时注意:【

◇导航区域与内容区域的位置可以互换

◇两块儿区域是互相独立的,仅仅通过href属性跟id进行关联,所以才可以防止不同的位置

◇如果想要增加导航和内容,需要在两个区域都添加代码,因为需要对应,新增加的导航对应新增加的内容。

2.浮动元素与非浮动元素进行组合时

◆浮动元素的标签一定要放在上面,虽然浮动元素会变成行内块儿结构,但是浮动元素有一个特性,就是后面的浮动元素只会跟着前面的浮动元素占在一行,后面的浮动元素并不会跟着前面的非浮动元素占在一行,如果前面的是非浮动元素,无论上面非浮动元素的空间有多么小,所留给浮动元素的位置多么大,浮动元素都会另起一行的来占位置。

◆如果前面的浮动元素占的空间很小,后面非浮动元素会跟上来,如果不是文字那么会占在浮动元素的下方,如果是文字那么会跟在浮动元素的旁边,因为文字的层级比浮动元素的层级高。

◆浮动元素在前,非浮动元素在后,如果不想非浮动元素受浮动元素的影响,那么可以给非浮动元素创建一个格式化上下文,如使用overflow:hidden,获取计算浮动元素的具体宽度,然后通过浮动元素的margin属性来远离浮动元素,这样就不会受浮动元素的影响了,一般都会通过这两种方式来实现浮动元素的这一边是固定宽度,非浮动元素的这一边是自适应宽度。

3.工作之后,大部分公司的员工都是按照设计图去写的,并不是按照你自己的想法想怎么写就怎么写。

4.Bootstrap的使用:

◆默认的符合要求就直接使用

◆html标签组成不对劲,使用浏览器审查元素,进行删减,最后再去修改代码

◆样式不对,找到bootstrap.css中的该组件的所有样式,然后拷贝到新的css文件中,修改拷贝后的样式,替换掉原来的类名为自己定义的类名,最后在自己的页面中修改原bootstrap中的类名为自己定义的类名即可,但是要先引入自己的css样式表。

5.栅格系统的偏移

◆栅格一行默认只能使用12份

◆偏移的宽度也是在这12份里面

◆栅格一行能够放置元素,计算需要考虑的偏移

◆col-md-offset-4表示按照正常的四份进行偏移,那么这一行就只能防止8份了,因为有4份作为了偏移的部分。

6.响应式是依赖媒体查询,很多的样式随着屏幕的变化而变化,都是通过媒体查询来实现的,实际上也可以通过js 的onresize事件加上获取浏览器的可视区域的宽高来动态修改样式。

7.Zepto这个类似jquery的小框架,优点是最小的可以压缩到几kb,而jquery最小也得几十kb,所以Zepto很好,但是随着时代的发展,移动运营商和浏览器厂商都进化了,网速快了,浏览器也知道去缓存资源了,于是Zepto不再那么流行了,jquery之所以大是因为功能越来越强大了,往里面加的代码也多了,所以大,而Zepto是将jquery最常用的方法提取出来再进行封装,所以减少了很多的代码。

8.Zepto介绍

◆模块儿化,想要使用对应的功能,需要导入对应的模块儿,先要引入核心模块儿,然后需要其它模块儿再引其它模块儿,比如需要使用普通的事件,就引入event模块儿,如果需要使用动画就使用fx模块,再如果需要使用移动端触摸屏幕的事件,那么就引入touch模块儿。

◆语法跟jq基本一样

◆现在没有以前流行

◆现在流行jq,自己封装一个jq,把移动事件封装进去。

◆它处理兼容性问题的地方全部被砍掉了,不然也不会相比于jquery而言那么小了。

◆它是专门为移动端而生的,在移动端使用最好。

9.gitbook导出笔记

◆首先要安装gitbookeditor

◆然后再安装node.js(是一个程序)

◆之后通过npm安装gitbook,安装完毕(C:\Users\LENOVO\AppData\Roaming\npm)

◆其实gitbook中的东西都在(C:\Users\LENOVO\GitBook\Library\Import)里面

◆使用windows键+r,输入cmd

◆然后使用cd命令切换到gitbook指定的书本目录,输入gitbook build --gitbook=2.5.0,最后就会有一个_book的文件夹,这个文件夹中的html文件就是你写的书本。

10.border有四条边,在不同情况下,边框是不同的形状

◆当只设置两条不相连的两条边时,边框是矩形的。

◆当设置了相连的边时,边框是梯形的。

◆如果内容的高度或者padding的值都为0时,这个时候设置的每一条边框都是三角形的。