继从零开始学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文件内容：

  1. {
  2.     "Class 001": {
  3.         "Xiao Wang": {
  4.             "Gender": "Male",
  5.             "Age": "18",
  6.             "Interest": "Football",
  7.             "Hometown": "Shanghai"
  8.         },
  9.         "Xiao Li": {
  10.             "Gender": "Male",
  11.             "Age": "20",
  12.             "Interest": "Basketball",
  13.             "Hometown": "Beijing"
  14.         }
  15.     },
  16.     "Class 002": {
  17.         "Xiao Cai": {
  18.             "Gender": "Female",
  19.             "Age": "19",
  20.             "Interest": "Dance",
  21.             "Hometown": "Gaoxiong"
  22.         }
  23.     },
  24.     "Class 003": {
  25.         "Xiao Ma": {
  26.             "Gender": "Male",
  27.             "Age": "18",
  28.             "Interest": "Reading",
  29.             "Hometown": "Taibei"
  30.         }
  31.     },
  32.     "Class 005": {
  33.         "Xiao Zhang": {
  34.             "Gender": "Male",
  35.             "Age": "20",
  36.             "Interest": "Running",
  37.             "Hometown": "Guangzhou"
  38.         }
  39.     }
  40. }

即：

布局：

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

功能：

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

（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属性可以有多个。

　　Eg: <div class="btn-group-vertical btn-group-lg col-md-6" role="group" aria-label="..." id="btn-group-vertical-classes">

　　不同属性之间用“空格”间隔，相信我 ，这样能让你写Javacript脚本和调整CSS时游刃有余。

　　2.实现Class编号垂直排列以及多选。

　　查阅http://www.runoob.com/bootstrap/bootstrap-button-groups.html  知道了如何设置垂直的按钮组。即将按钮组所在的DIV的class设置为btn-group-vertical，使之成为存放按钮组的容器。

　　查阅http://www.runoob.com/bootstrap/bootstrap-button-plugin.html  知道了如何让按钮组实现复选。通过向class属性为 btn-group的DIV 添加 data 属性 data-toggle="buttons" 来实现。

　　3.实现按钮边角由圆角重新定义为直角，给按钮组加滚动条，以及给按钮上显示的文字加上限制，使其不超出按钮，超出的部分以”…”显示，并且当鼠标移动停在按钮上的时候，显示全部文字：

　　少部分（圆角变直角，鼠标悬停显示文字）需要直接在HTML标签里设置style和title属性。

　　大部分的实现，是写了个CSS：

  1.    <style type="text/css">
  2.  
  3.                #btn-group-vertical-classes
  4.  
  5.                {
  6.  
  7.                overflow-y:auto;
  8.  
  9.                overflow-x:auto;
  10.  
  11.                height:150px;
  12.  
  13.                }
  14.  
  15.                #btn-group-vertical-classmates
  16.  
  17.                {
  18.  
  19.                overflow-y:auto;
  20.  
  21.                overflow-x:auto;
  22.  
  23.                height:150px;
  24.  
  25.                }
  26.  
  27.                button
  28.  
  29.                {
  30.  
  31.                text-overflow: ellipsis;
  32.  
  33.                overflow: hidden;
  34.  
  35.                border-radius: 0px;
  36.  
  37.                }
  38.  
  39.      </style>

　　

　　该<style>部分代码放在head里，即<head>和</head>之间。

　　大体的方法是先用CSS选择器选定要设置CSS的标签，然后在花括号里设置相应的样式。

　　所谓CSS选择器，就是上述代码中的“#btn-group-vertical-classes”和“button”，即花括号上面的一行代码。CSS选择器有多重使用方法，可以通过W3SCHOOL网站查到相关方法。

　　因为CSS样式表有三种加载方式（CSS文件；<head>里的<style>标签，HTML元素里的style属性，生效优先级顺序为： “元素上的style” > “文件头上的style元素” >“外部样式文件”，），我们又引用了BootStrap的CSS，所以会涉及到覆写问题，就是说有些CSS样式你在head里的<style>标签里设置好了，但是它不work（例如上述<style>里button的border-radius设置不work）。从“一定会work”和“耦合度最低(即最方便修改)”的角度，此时推荐两种方法：

　　<1> 直接在元素标签里写style属性。这是最优先的，所以一定会work。

　　<2>  修改你链接的BootStrap CSS文件，一劳永逸，以后加入了新的元素，也不用一个个重新写style属性。这里要求你一定要把CSS文件下载下来，而不是引用链接。

　　由于我们这个网页很小，所以我采取了方法一。

　　4．用Ajax实现数据获取、交互和动态加载。

　　问我怎么知道用Ajax? 百度去搜，或者问会前端技术的人。

　　Ajax最核心的地方在于可以局部刷新，而不用整个页面都刷新。这里还是先查阅Ajax技术的相关文档（上面三个网站，以及各种百度）。由于要从Json文件里取数据，所以参考了Jquery（因为BootStrap的JS是基于Jquery的，所Jquery的方法都work，这个知识点也是我搜资料的时候搜到的）的Ajax手册http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp，选取了getJson函数，另外，参考http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html 选取each函数作为解析的方法。

　　代码实现的话，主要牵扯到遍历(for语句)、判断(if语句)，以及对HTML元素的操作，添加子元素，修改属性值啥的。

关于具体页面怎么写的，写的太详细也没意思，我直接把代码贴上来。

跑demo的时候要注意几点：chrome好像限制了直接在本地读取文件内容，所以你要把整个项目放在Apache的htdocs文件夹里。然后跑起来。关于Apache如何安装，我的前面的blog有很详细的介绍。如何使用，请大家百度吧。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>getClassmate</title>
  8.  
  9.     <!-- Bootstrap -->
  10.     <link href="css/bootstrap.min.css" rel="stylesheet">
  11.  
  12.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14.     <!--[if lt IE 9]>
  15.       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16.       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  17.     <![endif]-->
  18.  
  19.     <style type="text/css">
  20.         #btn-group-vertical-classes
  21.         {
  22.         overflow-y:auto;
  23.         overflow-x:auto;
  24.         height:150px;
  25.         }
  26.         #btn-group-vertical-classmates
  27.         {
  28.         overflow-y:auto;
  29.         overflow-x:auto;
  30.         height:150px;
  31.         }
  32.         button
  33.         {
  34.         text-overflow: ellipsis;
  35.         overflow: hidden;
  36.         border-radius: 0px;
  37.         }
  38.     </style>
  39.   </head>
  40.   <body>
  41.   <div class="container">
  42.         <br></br>
  43.         <div class="row" id="div1-classes-classmates">
  44.             <div class="btn-group-vertical btn-group-lg col-md-6" role="group" aria-label="..." id="btn-group-vertical-classes">
  45.             <!-- where classes show-->
  46.             </div>
  47.             <div class="btn-group-vertical btn-group-lg col-md-6" id="btn-group-vertical-classmates" role="group" aria-label="...">
  48.             <!-- where classmates show-->
  49.                 <button type="button" style="border-radius: 0px;" class="btn btn-default">Click class to show classmate.</button>
  50.             </div>
  51.         </div>
  52.         <br></br>
  53.         <div class="row">
  54.             <form role="form">
  55.             <div class="form-group">
  56.                 <div class="col-md-12">
  57.                     <div class="jumbotron" id="context_div">
  58.                         <p>Click classmate to show details.</p>
  59.                     </div>
  60.                 </div>
  61.              </div>
  62.              </form>
  63.         </div>
  64.     </div>
  65.  
  66.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  67.     <script src="js/jquery-3.0.0.min.js"></script>
  68.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  69.     <script src="js/bootstrap.min.js"></script>
  70.     <script>
  71.     $(document).ready(function(){
  72.             $.getJSON("resource/classmates.json",function(result){
  73.                 $.each(result, function(i, field){
  74.                     var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-class" data-toggle="button" chosen_state=0></button>').text(i);
  75.                     tmp_button.attr("title",i);
  76.                     $("#btn-group-vertical-classes").append(tmp_button);
  77.                 });
  78.                 $(".btn.btn-default.btn-class").click(function(){
  79.                     var tmp_chosen=Number($(this).attr("chosen_state"))^1;
  80.                     $(this).attr("chosen_state",String(tmp_chosen));
  81.                     $("#btn-group-vertical-classmates").empty();
  82.                     var chosen_list=new Array();
  83.  
  84.                     $(".btn.btn-default.btn-class").filter(function(){
  85.                         judgeflag=false;
  86.                         if($(this).attr("chosen_state")=="1"){
  87.                             judgeflag=true;
  88.                             chosen_list.push($(this).text());
  89.                         }
  90.                         return judgeflag;
  91.                     });
  92.                     $.each(result,function(i,field){
  93.                         var chosen_list_x;
  94.                         for (chosen_list_x in chosen_list){
  95.                             if(chosen_list[chosen_list_x]==i){
  96.                                 $.each(field,function(j,field2){
  97.                                     var tmp_button=$('<button type="button" style="border-radius: 0px;" class="btn btn-default btn-classmate" chosen_state=0></button>').text(j);
  98.                                     tmp_button.attr("title",j);
  99.                                     $("#btn-group-vertical-classmates").append(tmp_button);
  100.                                 });
  101.                             }
  102.                         }
  103.                     });
  104.                     $(".btn.btn-default.btn-classmate").click(function(){
  105.                         var selected_classmate=$(this).text();
  106.                         var classmate_context_item;
  107.                         $("#context_div").empty();
  108.                         $.each(result,function(i,field){
  109.                             $.each(field,function(j,field2){
  110.                                 if(j==selected_classmate){
  111.                                     $.each(field2,function(k,field3){
  112.                                         classmate_context_item=k + ": " + field3;
  113.                                         var tmp_p=$('<p></p>').text(classmate_context_item);
  114.                                         $("#context_div").append(tmp_p);
  115.                                         });
  116.                                 }
  117.                             });
  118.                         });
  119.                     });
  120.                 });
  121.             });
  122.     })
  123.     </script>
  124.   </body>
  125. </html>

文件树大概是下面这样：

htdocs --- getClassmate.html

---- resource

---- 放classmates.json等资源文件

---- js 文件夹

---- bootstrap和jquery的js文件

---- css文件夹

---- bootstrap的css文件

---- font文件夹

---- bootstrap 的字体文件

做这个网页的过程中用到的一些知识点网页链接：

[1]. css样式表中的样式覆盖顺序(转)

http://www.cnblogs.com/zhangpengshou/archive/2012/08/08/2628737.html

[2].修改BootStrap按钮样式

https://segmentfault.com/q/1010000000380230

[3].css 文本超出容器长度后自动省略的方法

http://www.th7.cn/web/html-css/201602/155738.shtml

[4]. div:给div加滚动条　div的滚动条设置

http://blog.csdn.net/lwjnumber/article/details/6319598

[5]. DIV 高度教程-DIV的高度设置篇

http://www.divcss5.com/rumen/r613.shtml

[6]. jQuery中this与$(this)的区别

http://developer.51cto.com/art/200908/145427.htm

[7]. jQuery中json对象与json字符串互换

http://blog.sina.com.cn/s/blog_667ac0360102ecem.html

[8]. jQuery选择器总结

http://www.cnblogs.com/onlys/articles/jQuery.html

[9]. jQuery选择器大全

http://www.php100.com/html/webkaifa/javascript/2012/0611/10527.html

[10]. jQuery - 设置内容和属性

http://www.w3school.com.cn/jquery/jquery_dom_set.asp

[11]. Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍

http://www.jb51.net/article/32601.htm

[12]. JavaScript 比较和逻辑运算符

http://www.w3school.com.cn/js/js_comparisons.asp

[13]. 使用jQuery解析JSON数据

http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html

[14]. JavaScript If...Else 语句，for循环

http://www.w3school.com.cn/js/js_if_else.asp

[15]. jQuery load() 方法

http://www.runoob.com/jquery/ajax-load.html

[16]. block，inline和inline-block概念和区别

http://www.cnblogs.com/KeithWang/p/3139517.html

从零开始学Bootstrap(2)的更多相关文章

  1. 从零开始学Bootstrap(3)

    首先让我们回顾一下系列内容. 从零开始学Bootstrap(1)介绍了BootStrap最简单的模板,逐条解释了每行代码的含义. 从零开始学Bootstrap(2)强调了边学边做,通过实际的例子,讲解 ...

  2. 从零开始学Bootstrap(1)

    最近需要做一个简单的Web页面. 考虑到前端经验不足,为了快速产出,同时项目只是一个工具,对项目没有什么要求,所以我选择了Bootstrap这个框架作为Web框架. 写从零开始学Bootstrap的初 ...

  3. 从零开始学 Web 之 移动Web（七）Bootstrap

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学数据分析，什么程度可以找到工作？（ 内附20G、5000分钟数据分析工具教程大合集 ）

    从零开始学数据分析,什么程度可以找到工作?( 内附20G.5000分钟数据分析工具教程大合集 )   我现在在Coursera上面学data science 中的R programming,过去很少接 ...

  5. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...

  6. 从零开始学 Web 之 移动Web（九）微金所案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 ASP.NET Core 与 EntityFramework Core 目录

    从零开始学 ASP.NET Core 与 EntityFramework Core 介绍 我是一个目录,它旨在帮助开发者循序渐进的了解 ASP.NET Core 和 Entity Framework ...

  8. 从零开始学 Java - Spring 集成 Memcached 缓存配置（二）

    Memcached 客户端选择 上一篇文章 从零开始学 Java - Spring 集成 Memcached 缓存配置(一)中我们讲到这篇要谈客户端的选择,在 Java 中一般常用的有三个: Memc ...

  9. 从零开始学 Java - Spring 集成 ActiveMQ 配置（一）

    你家小区下面有没有快递柜 近两年来,我们收取快递的方式好像变了,变得我们其实并不需要见到快递小哥也能拿到自己的快递了.对,我说的就是类似快递柜.菜鸟驿站这类的代收点的出现,把我们原来快递小哥必须拿着快 ...

随机推荐

  1. javascript 中break、 continue、函数不能重载

    在javascript中,break与continue有着显著的差别. 如果遇到break语句,会终止最内层循环,无论后面还有多少计算. 如果遇到continue,只会终止此次循环,后面的自循环依然执 ...

  2. 安装window服务

    1 使用管理员权限启动命令提示符 2 输入 cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 3 输入installUtil.exe  服务文件所在目录 ...

  3. Daily Scrum 12.5

    今日完成任务: 对webservice进行学习,并将部分接口封装到webservice,没做完,明天继续.以便安卓组能够调用webservice的接口. 修复了大部分数据库改动后导致的异常,网站已可以 ...

  4. Odoo10尝鲜： 退货

    Odoo sale / purchase 在 v9 改进之后, 开立发票的入口 不再像之前的版本,有多个来源,例如 订单 交货单 记工单 分析分录     现在只有一个入口,只需要在 订单上开票,这样 ...

  5. PHP通过反射方法调用执行类中的私有方法

    PHP 5 具有完整的反射 API,添加了对类.接口.函数.方法和扩展进行反向工程的能力. 下面我们演示一下如何通过反射,来调用执行一个类中的私有方法: <?php //MyClass这个类中包 ...

  6. VS2005 “无法在证书存储区中找到清单签名证书”错误的解决方法

    方法一:在VS2005中出现该错误时,用记事本打开项目的.csproj文件,删除以下内容即可:    <ManifestCertificateThumbprint>B531F2CF2227 ...

  7. Hive安装与部署集成mysql

    前提条件: 1.一台配置好hadoop环境的虚拟机.hadoop环境搭建教程:稍后补充 2.存在hadoop账户.不存在的可以新建hadoop账户安装配置hadoop. 安装教程: 一.Mysql安装 ...

  8. Mysql --分区表(1)

    检查是否支持分区 通过如下命令检查的Mysql是否支持partition mysql> SHOW PLUGINS; ... | ARCHIVE | ACTIVE | STORAGE ENGINE ...

  9. git --如何撤销已放入缓存区（Index区）的修改

    修改或新增的文件通过 git add --all 命令全部加入缓存区(index区)之后,使用 git status 查看状态(git status -s 简单模式查看状态,第一列本地库和缓存区的差异 ...

  10. H3C ipsec ike 协商配置

    1. 分几步设置 (1)定义ACL (2)创建 ipsec 安全建议 1.选择认证方式 ah 选择 ah头认证方式 不配置 ipsec不能建立成功 (3)创建IKE keychain 可以写多条key ...