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

1.Bootstrap中的js组件里的标签页使用的是锚点链接的方式切换选项卡及内容的
◆导航区域：a标签的href='#home'
◆内容区域：div标签的id='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时，这个时候设置的每一条边框都是三角形的。