(1) 点击具体同学，显示其信息之后，没有处于被选中的状态。（你一开始点击，会处于被选中状态，但那只是button的点击效果，你点一下空白处，被选中的状态就消失了）
(2) 色彩单调，不太美观。
(3) 布局方面需要调整，信息框是呈现我们需要的信息的地方，应该尽可能大，最好其显示的时候能把不需要的框给隐藏起来。
(4) 对于代码方面，对从零开始学Bootstrap（2）中的Javascript代码都写在HTML页面里了，并且有重复的代码段，应该把重复的代码段写成函数，这样可以减少代码体积，再一个修改代码的时候，我直接修改相应的函数就可以了，而不用一个地方一个地方的找。Javascript代码可以写到JS文件里，实现HTML页面和Javascript代码的分离。
技术选型（直白的说就是思考怎样利用Bootstrap框架里已有的东西，实现想要的效果）：
1、首先调整布局，把信息框和同学框调整在一起，班级框显示在最上面。
显然，我们只需要把信息框所在的DIV和同学框的DIV放在同一个row的DIV里，并把修改跟栅格系统相关的class属性值”col-md”就可以实现。比如我们想让他们2:1的比例显示，那么信息框的class属性应该有col-md-8，而同学框的应该是col-md-4了。
值得注意的是，前端永远不可能是一步到位的开发，往往最开始的代码都不是我们想要的完美结果，需要细细调整。以下面为例，大家要学会自己搜，去尝试，去不断的调整(后面的调整，具体过程就不交代了)：
我们修改完代码后，呈现的效果是下面这样的：
很明显的，上面每行只显示一个Class，有点浪费空间。下面的两个部分没有对齐。
把上面DIV组件的class属性里的”btn-group-vertical”删掉，把col-md-6添加到js代码里的tmp_button的class属性中。另外观察到这样设定了之后，第一行与第二行相比有奇怪的缩进：
毫无疑问，这种外观、布局类的变化跟CSS有关。这时候我们可以看一下元素具体的CSS。
以Chrome为例：
在这个元素上点鼠标右键，选择Inspect，即审查，你会在右边的框里查到相应的代码。通过比对，我们发现是margin-left的问题，这个属性是bootstrap框架里默认的，从上层元素继承而来，有的为 -1px，有的为0px，我们只需要改成一样就可以了，比如都改成0px：
在js代码里的tmp_button，修改style属性，添加”margin-left:0px；”，有的人觉得字体居中不好看，可以添加text-align:left，设定按钮上的文字从左边起。
改正后的效果：
2、添加折叠按钮，让用户可以通过这个按钮隐藏/打开class框，点击classmate显示详细信息的时候，自动隐藏，以把大量的空间省给信息框来显示。
另外，我们可以给折叠按钮加一个好看的图标，参考的教程就可以轻松实现。
实现点击classmate显示详细信息的时候，自动隐藏，需要修改classmate按钮的点击事件，即相应的js代码。
我们查看Bootstrap折叠插件的用法（这个更好，官方的这部分还没翻译好），查到下面的内容：
原来Class属性里的cllapse和in值控制了隐藏和显示功能，那我们只需要在按钮的click事件js代码里修改相应的要进行”显示/隐藏”操作的HTML元素的class属性就可以了，于是在classmate按钮的click函数里添加以下语句就可以了：
$("#collapseOne").attr("class","panel-collapse collapse");
3、修正”点击具体同学，显示其信息之后，没有处于被选中的状态”的bug。