这段时间偷懒了，说好的两周一篇的博文迟迟没发。我有罪 >~<，总结一下这两个月的东西吧

摄影比赛项目

第一次做项目有些紧张，以后往回看可能会觉得很 low ，但是确实是很值得纪念的，真正的项目从这里开始。欧阳那边给我们的是摄影网站。写了两个月，主要都是后来的 ui 修改还有一些东西的修补，其实做的真的不咋地，确实要反省一下，要让以后有拿得出手的作品真的要一丝不苟，认认真真的去做好才行，要不以后看回来自己曾经写的东西，也太羞涩了。
至于第二个项目，我们做的是老师给的人大通，这是移动端上的 Web 前端开发，我们做的是二次开发，虽说是二次开发，但是改别人代码也是很蛋疼的一件事，后来干脆自己写了，只是有一些没做过的功能还是参考了前面开发人员的代码，例如时间轴各种，后面说吧。

说几点这两个项目学到的新技能：

1. bootstrap 框架的基本使用

第一次使用框架，觉得好神奇，好多很棒的功能，你只需要给它加上几个类名就好了，例如你要实现一个下拉菜单，用 bootstrap 你可以这样子实现它（这里主要是针对 bootstrap 3.0 来讲）:

<div class="dropdown">//这里的 dropdown 就是 bootstrap 里自带的样式之一，表示的是下拉菜单
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">//为了使点击 button 能够显示下拉菜单，这里必须要把 data-toggle="dropdown"给写上
    Dropdown trigger
    <span class="caret"></span>//这里的 caret 是 bootstrap 里面的一个字体图标样式的类名，而且 bootstrap 提供的两百多个字体图标都是免费的
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
  </ul>
</div>

但 bootstrap 的样式通常都不是我们想要的，这时候就要改样式了，在这里我挖了好多坑，样式最好不要用它原有的类名来修改，因为在合成代码的时候，很有可能你修改后的样式严重影响了你小伙伴的原来样式，所以最好就是另外给元素添加类名，然后用新的类名去定义新的样式，这里也要注意类名的名称，要注意可读性，这里也是我踩过的一个坑，往往因为贪图方便而随便起了一个类名，到最后要修改的时候都忘记自己之前写过的是什么。

boostrap 是一个很不错的框架，既支持 css 的样式又支持 js 的动态实现，例如模态框的弹出，这次的摄影项目也有用到这个功能：

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

但是在定义关闭上，自己用 jQ 写关闭页面时，不知道哪里出了问题， $(“.modal”).hide() 后，页面还留着一层灰蒙遮罩，并没有解决，然后我们用了一个很粗暴的方法来关闭 modal , $(“.close”).click() 来关闭页面，这么粗暴的方法还应用在后面的 input-file 上面，这个后面说。当然 bootstrap 很有一个很好的功能就是响应式，只是感觉我们这两次对这个功能用得不透彻。

2. input type=”file”

做项目的时候，遇到最大的问题是按钮样式的问题，尝试过去各种改它，但自定义的样式对它无效啊，默认的样式太强大了，上网搜了好多都是先将 input 标签透明化，再用 a 标签覆盖在 input 标签上面，这样子虽然能够把想要的样式做出来，只不过存在一个问题就是：input 标签后面通常会带一段文字的:

往往，我们处理 a标签样式的时候会忽略掉后面这一段文字也是可点的这一事实，其二，这样子定义出来的 a 的样式是有一定的可点范围，首先 a 标签的高度就是一个问题，如果你的 a 标签的高度不是跟你的 input 点击框高度不相符，那么超出 input 框的那一属于 a 标签的部分是不可点的、没被完全覆盖的 input 框的那一空白处是可点的，所以这就限制了你的 a 标签的样式大小了，而这往往是不符合我们的需求的，可是我们在项目中并没找到很好的做法，最后我们用了一种很简单粗暴的方法来解决，不过这算是目前我觉得最方便的方法了，虽然觉得还是怪怪的，但是还是很开心地接受了。我们做 input-file 框样式的时候，先是把 input 框给隐藏掉，然后用 a 标签把我们需要的样式给写出来，然后用 jQ :

1
2
3

$(a).on("click",function() {
    $(input).click();
});

真的好简单粗暴

3. 媒体查询

在人大这个项目里面，我们用的框架还是 bootstrap，bootstrap 使能够做到自适应的，只是在这个项目里面个人用 bootstrap 比较少，主要是用媒体查询来完成,这也是我第一次学会用媒体查询，但在这个项目里面用到的还只是很基础的媒体查询，主要形式都是：

@media screen and (min-width: 413px) {
    /* CSS Code */ 
}  
/*或者是*/ 
@media screen and (max-width: 413px) {
    /* CSS Code */ 
}
/*或者是*/ 
@media screen and (min-width:373px) and (max-width: 413px) {
    /* CSS Code */ 
}

其实媒体查询还有很多种形式，又例如你可以在不同的设备中引入不同的 css ,不过这个我还没去试过，先记录一下吧：

1	<link rel="stylesheet" href="middle.css" media="screen and (min-width: 400px)">

4. ajax 与 form 表单提交

觉得做项目学到的最多的就是与后台交接，以前真心没有用过 ajax ,这一次项目要用到接口的东西，然后就学了 ajax ,以前一直觉得好难的，觉得与 Js 有关的东西都好难，这种心态是不行的，很多东西你去做了，就会发现有很多解决方案的，不怕难不难，只怕你敢不敢。
在做摄影项目的时候用到不仅用到了 ajax 提交，也用到了 form 表单提交。
先说 ajax 吧：

5.ajax 与 form 表单提交

关于 on 事件，用 on 事件可以实时监察所绑定的元素是否发生了相应的事件，若发生则触发函数

EyesiM's Blog

关于15年的两个项目的简单总结