jQuery bootstrap和highcharts的入门

1.官方信息
bootstrap的网站

http://www.bootcss.com/

highcharts的网站

http://www.highcharts.com/

2.bootstrap 使用说明：
2.1 bootstrap比较常用的是它的栅格系统，用来做网页布局非常方便。它提供了table的便利性，但又足够灵活，可以针对每个栅格设置不同的css样式。
2.2 bootstrap的下拉菜单(drowdown)效果要比默认的select控件好，按钮组的展示效果要比下拉菜单好，但是比较占用空间，如果选项多就不合适了。
按钮组无法直接通过控件来获得选中的按钮的信息。所以我通过为按钮组的每个按钮注册click事件的处理函数，并且把选中的按钮的value赋给按钮组的value来解决这个问题。
此外，还需要自己实现按钮选中和未选中的样式。一开始我把选中的样式设置为btn-info，未选中的样式设置为btn-default。
2.3 除了官方组件，还有很多扩展组件，比如说datepicker

http://www.bootcss.com/p/bootstrap-datetimepicker/

比如daterangepicker

https://github.com/dangrossman/bootstrap-daterangepicker/

3.样式美化
希望达到

http://mta.qq.com/mta/base/ctr_page?app_id=1

这个效果
给按钮加上这个样式，立体效果就出来了，比btn-info要好。其中btn-on是选中的样式。btn-off是未选中的样式。
.btn-off {
box-shadow: hsla(0, 0%, 0%, 0.0470588) 0px 1px 0px 0px;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f7f9), to(#d6d7da));
}
.btn-on {
background-color: #d9d9d9;
border-color: #999;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 2px 4px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px 0px;
}

4.chrome 浏览器的使用
chrome浏览器提供了强大的调试功能。
4.1 ctrl + shift + i可以弹出Developer Tools的窗口。
4.2 Network标签显示了网页打开时各个请求发起的顺序，消耗的时间，以及返回的结果。如果某个css或者js加载失败，或者某个GET POST请求返回失败，都能直接看到。
4.3 在javascript代码中加上 debugger相当于插入断点，运行时就可以在断点查看变量的执行情况，比c++调试方便。
4.4 在网页点击右键，菜单中选择审查元素，看到的是经过js处理后的元素，在右边的style可以看到css样式被应用和覆盖的情况，在右边的computed可以看到最终生成的样式的信息。
4.5 设置border-width的同时，还要设置border-style，否则border-width不生效

5. highcharts的使用说明
5.1 hightchars的库提供了$(id).highcharts(object)的方法来构造highcharts，非常简单好用。里面支持多个数据序列。

6. jQuery的使用说明
6.1 这里有很详细的说明

http://www.w3schools.com/jQuery/

6.2 有时候会提示$没有定义，这个一般是由于执行$(id)时，jQuery代码还没有加载执行完毕。要注意加载顺序，基础的js库放前面，调用基础js库的放后面。
6.3 为了确保代码在页面完全渲染之后再执行，请把代码放在$(document).ready(function(){});里
6.4 建议把js代码放在html的body的最后面，防止阻塞其它的css和图片的加载。