一些废话（马克思主义乖巧）
上班快四个月了，码了一堆无聊的页面，终于，来了一次好玩点的，要我做个响应式网站。正好之前有在看Bootstrap。只是光学习不练的话效率比较慢（有跟着写demo）。后来没看多少就开始用了，边学边用。发现直接套用快多了，管你什么class 直接就复制粘贴过来了，然后改成我想要的样式，改的过程就明白了这些class的作用。话不多说，先上网站-传送门
Bootstrap
我就从做的顺序说吧。主要就是先利用bootstrap码出大致内容，然后覆盖css样式做成我想要的样子，然后js写一些效果或者交互，再利用插件给页面更棒的视觉效果或交互体验。
这里说下bootstrap学习地址和代码来源。菜鸟教程bootstrap慕课网bootstrap
菜鸟教程把bootstrap每部分都列出来了，很详细，但我觉得有些代码可能不是很全，相反，慕课网的教程啊代码啊很详细，但是没那么全，他们就是很详细的讲解一个demo，让我们举一反三。各平台有自己专注的点，反正免费教学资源的网站都是好网站。哈哈哈（不小心暴露了穷比的属性）。
这里说下，bootstrap是个样式框架，目前我还没改过它的js，看起来响应式很难得样子，其实掌握了它的css就觉得嘿嘿。。。不得不说，媒体查询就是实现响应式的关键，人家都写好了，我们覆盖着改改就好了，多省事。@media (max-width: 767px) {} 不过，你要想划分更多屏也是可以的，手动加加好了。
一、轮播
代码我就不贴了，直接去上面两个网址找。下同。
这块我想说的是，那个prev-next按钮真的不好看，自己写个吧。。。
二、网格系统
这个搞懂.container .row .col-xx-xx 就行了 结合midea query 就能实现布局随屏幕的变化而变化。因为bootstrap.css 都写好了。
三、标签页
用这个的时候，让我想起6月份刚学js的时候，这种我都是用js点击隐藏/显示。后来看到知乎有人说，能用css的就不要用js。其实bootstrap也是写了js的。如果click也可以像hover一样在css里面用，那真是太方便。。。然后我就发现了这篇文章
$('#myTab a').click(function (e) {e.preventDefault()$(this).tab('show')
})四、导航
额，这没什么好说的，复制粘贴改内容改样式-OK。
footer也没什么好说的，一个字 -套- （咳咳，老司机别想多了，我可是很纯洁的在Zz-马克思主义乖巧）
我用的比较少，其实还有很多很多，可以去菜鸟教程看，上面有传送门
下面说说插件：
一、jquery.nav.js
这个插件是定位用的，导航条与页面内容对应，比如 (我这是简写，意会到就行)
<div id="menu-nav">first-second--third--fourth</div>
<div id="first">...</div>
<div id="second">...</div>
<div id="third">...</div>
<div id="fourth">...</div>
我点击fourth 页面会滚动<div id="fourth">...</div>这部分，同时，我滚动页面的时候，假设滚动到<div id="second">...</div> 对应的导航条也会指向second。
下载jquery.nav.js引入，然后在自己的js文件写
$(function() {$('#menu-nav').onePageNav();});
引入顺序不要弄错了哦
二、lightbox.js
这个中文名叫
灯箱
截个图吧
关灯解带，打开方式弄错了，再来。关灯看图。作用很明显了。
用法：下载lightbox.css/js 引入 然后在html中
<a href="imgs/pen/pen.png" data-lightbox="pen"><img class="pro-img" src="imgs/pen.png" data-lightbox="pen" title="小达人906智能点读笔">
</a>data-lightbox="pen"是给图片分组 data-lightbox的值相同的将会分到一组，你点开其中一个就可以通过上下页查看这个组的其他图片，这个属性我觉得很nice啊。还有一些其他属性想看的 戳我--你轻点好吗这个界面可以在lightbox.css里面改或者你在自己的css里覆盖，我比较懒= = 我用的jq版本不高，lightbox.min.js的时候好像没效果，然后换成lightbox-2.6.min.js 才有用。都在github上下载的。
三：wow.js
让页面滚动更有趣--这是一个很直观的demo而且有人在等你，哦，不，你等的狗在那里。这个要配合animate.css用，这个css真的棒，动画选择地址Animate.css动画示例
用法：下载wow.js animate.css 引入
添加wow和动画名的class，比如
<div class="col-md-4 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="350ms">
...
</div>对于批量加（重复样式不重复内容的部分）可以用js去加，比较省事，单个的加直接在class加两个类名就行。
data-wow-duration动画时间，这个不说了，data-wow-delay动画延迟，这个得说，要是不设置这个估计动画还没到页面中间就运行完了，所以一般都会有多少毫秒的延迟。然后就是相同样式不同内容的地方一起动画也没那么好看 要让他挨个动画 就是延迟时间的不同，后面的比前面的大个100 200 ms就差不多很好了。
四、parallax.js
视差。我感觉这就是利用眼睛欺骗用户，哈哈哈。
用法：下载nbw-parallax.js 引入
添加parallax类
<div class="parallax" id="contactUs">...</div>
css部分：
#contactUs {padding: 0 0 120px;background: url("../imgs/contactus.png") 50% 0 no-repeat fixed;overflow: hidden;color: #fff;
}js部分 在nbw-parallax.js 改一下前面的获取对象
//获取需要进行视差的对象var $window = $(window);var $fourthBG = $('#contactUs');这样就可以了。
五、jquery.countTo.js 或者 countUp.js
这个我就浅显点 叫它数字动画吧 = = countTo countUp
码字好累啊/(ㄒoㄒ)/~ 睡觉了~~~
以上有不正确处请指正，转载请注明出处~谢谢（咳咳，都是套路）
