必备：从零开始学Bootstrap(2)

　　继从零开始学Bootstrap(1)后，我们需要实际做一些页面，边学边做。因为前端是一项非常注意实践的技术，知识点太多、太琐碎了，所以我们只能边学边做。根据我们想要做的效果，去查相应的资料。不要想着把所有的东西都学会后再做网页实践。

　　过程中会频繁查阅资料的网站：

　　http://www.w3school.com.cn/这是W3C联盟为了传播W3C标准而建立的网站，有很多关于Web端的技术，你可以将其看作为一部Web技术的百科全书。

　　http://v3.bootcss.com/不用多说，BootStrap3官方文档

　　http://www.runoob.com/这个其实跟W3school差不多，但是比W3school要全要杂一点，好多内容都是从原版W3C英文网站和原版BootStrap官方英文文档翻译过来，但是我感觉他的翻译质量要更高（因为前两个网站说白了也是翻译过来的），有些Case更加好懂。

　　闲话不多说，让我们开始：

　　（1） 明确实现目标

　　如下图所示，这就是咱们要实现的一个简单网站。布局简单，也没有很炫的效果。但是要实现一个功能：从Json文件（关于Json的知识可以到上述网站去查）里读取相关信息，显示在网站上。

　　Json文件内容：

　　{

　　"Class 001": {

　　"Xiao Wang": {

　　"Gender": "Male",

　　"Age": "18",

　　"Interest": "Football",

　　"Hometown": "Shanghai"

　　},

　　"Xiao Li": {

　　"Gender": "Male",

　　"Age": "20",

　　"Interest": "Basketball",

　　"Hometown": "Beijing"

　　}

　　},

　　"Class 002": {

　　"Xiao Cai": {

　　"Gender": "Female",

　　"Age": "19",

　　"Interest": "Dance",

　　"Hometown": "Gaoxiong"

　　}

　　},

　　"Class 003": {

　　"Xiao Ma": {

　　"Gender": "Male",

　　"Age": "18",

　　"Interest": "Reading",

　　"Hometown": "Taibei"

　　}

　　},

　　"Class 005": {

　　"Xiao Zhang": {

　　"Gender": "Male",

　　"Age": "20",

　　"Interest": "Running",

　　"Hometown": "Guangzhou"

　　}

　　}

　　}

　　即：

　　布局：

　　为三大块：第一行左边为班级列表，第一行右边为同学姓名列表，第二行为同学相关信息。

　　功能：点击班级列表中的某一个班级，可以动态地在同学列表中更新这个班级中有哪些同学，并且可以实现班级的复选。点击同学列表中的某一个同学，动态的在第二行显示该同学的信息，每次只能显示一个同学的信息。

　　（2）分析需要用到的技术

　　布局：

　　BootStrap：用来实现这种简单的两行布局，以及Class列的复选，以及滚动条（有些直接用BootStrap很好实现，有些则不能。如何知道？去上述三个网站里去找，去查）

　　功能：

　　用Javascript和Ajax来实现数据的获取和动态的交互(以局部刷新的方式)。

　　（3）技术选型分析

　　1. 实现布局。

　　通过查阅文档（http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html），我发现了Bootstrap是用栅格系统布局的，通过给div 设置特定的class属性可以实现我想要的布局效果。并且可以给手机、平板、台式电脑设置不一样的效果。关于HTML标签的class属性，以及什么是HTML标签可以在W3SCHOOL上查到。

　　值得注意的一点是：元素的class属性可以有多个。