html给button赋值从零开端学Bootstrap3

从零开始学Bootstrap（1）先容了BootStrap最大略的模板，逐条阐明了每行代码的含义。

从零开始学Bootstrap（2）强调了边学边做，通过实际的例子，讲解了如何一步一步的实现自己想要的效果。

写到这里，这篇从零开始学Bootstrap（3）我想写以下几个内容：

html给button赋值从零开端学Bootstrap3 CSS

1. 基于我对Bootstrap的理解，做一个小小的总结。

2. 对从零开始学Bootstrap（2）例子进行UI美化和代码优化，紧张是说说我是怎么做出自己想要的效果的。

3. 授人以鱼不如授人以渔，以自己的例子（由于自己也是新手，写出来的东西可能更适宜初学者），讲讲代码编写过程中碰着的坑和须要把稳的点。

废话不多说，下面开始：

一、 Bootstrap的小小总结

基于以Bootstrap的官方文档（http://v3.bootcss.com/）的解释，Bootstrap分为三个大块：CSS样式，组件，Javascript插件。

首先要明确一点：Bootstrap是一个框架，意思便是别人造好了轮子，你可以直接拿来用，免去了自己去造轮子。
以是咱们须要明确两点：这些轮子是什么样的轮子，怎么样去利用这些轮子。

1. CSS样式：紧张先容了栅格系统和Bootstrap的全局样式。
通过设定Class的值实现。

1.1栅格系统：

让我们可以很方便的实现HTML页面的布局(http://v3.bootcss.com/css/#grid)。

我以为栅格系统很主要。
由于HTML页面的布局是很主要也很繁琐的一项任务（你看一下W3School里关于布局的先容http://www.w3school.com.cn/html/html_layout.asp，看一下例子里的代码，就明白了），并且须要考虑到不同浏览器、不同设备的兼容性。

栅格系统把这统统大大简化了。
打开上面关于栅格系统的连接，你会创造只须要根据你想要实现的效果，给HTML元素Class属性赋相应的值，就可以实现，并且还能设置针对不同屏幕大小的设备展现不同的效果。

1.2 Bootstrap全局样式：

也便是Bootstrap对常用HTML元素（eg: DIV、Button、 P、 Table、 Img等等）是若何美化的。
通过给HTML元素的Class属性赋相应的值，就可以得到自己想要的效果。

举一个最大略的例子：

如上图所示，Bootstrap可以让你仅仅改变Button元素的class的值便是改变按钮的大小，而不用很麻烦的去修正css文件，或者给元素内嵌style的值。

2. 组件：我认为组件便是Bootstrap把一些元素（HTML元素和Javascript代码）组合起来，就变成了组件，并且供应了很多很好看很实用的图标。
这些组件基本都是HTML开拓过程中常用的。
通过设定Class的值实现。
(http://v3.bootcss.com/components/)

举一个最大略的例子：

如上图所示，当我们须要实现导航功能的时候。
找到Boostrap里相应的组件，依照其给的代码模板，根据自己的需求，赋相应的class和ul、li值就可以了

3. Javascript插件：我认为Bootstrap的Javascript插件便是封装了常用网页交互功能的”轮子”。
只须要设定class属性和data属性就可以实现常用的网页交互功能，而不用自己写一大堆javascript代码。

首先说一个小插曲，新手可能误以为”javascript”和”java”有着很深的联系，乃至会认为javascript是java的变种。
实在并不是这样，javascript是网景(Netscape)公司开拓的运用于互联网的脚本措辞，实在它最先的名字”是livescript”，后来网景公司与Sun公司(也便是发明Java的公司，后来被Oracle收购)达成互助，当时Java措辞如日中天，名气很大，为了搭顺风车，就把livesript改名为javascript。
以至于有人开玩笑：”Java”和”Javascrip”的差异就好比”雷锋”和”雷峰塔”的差异一样。

言归正传，我们知道，Javascript是为了授予网页交互功能而存在的。
以是，Bootsript上丰富的Javascript插件能够让你很方便的实现常用的网页交互功能，而不用把精力放在”造轮子”上。

如上图所示，利用Bootstrap的轮播插件(http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html， Bootstrap的官方文档这里没有翻译成中文，runoob上却有很详细的中文翻译，并且可以在线修正代码提交不雅观察效果，强烈推举)，你可以很方便的实现现在很多网站都采取的图片轮播功能。
这里只须要根据上述链接里面的教程，赋相应的class和图片src值就可以了，连data值都不用设。

二、对从零开始学Bootstrap（2）例子进行UI美化和代码优化

下图是上期教程中实现的效果：

我们可以看到有以下几个缺陷须要改正：

(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显示详细信息的时候，自动隐蔽，以把大量的空间省给信息框来显示。

其余，我们可以给折叠按钮加一个好看的图标，参考http://v3.bootcss.com/components/#glyphicons的教程就可以轻松实现。

实现点击classmate显示详细信息的时候，自动隐蔽，须要修正classmate按钮的点击事宜，即相应的js代码。

我们查看Bootstrap折叠插件的用法http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html（这个更好，官方的这部分还没翻译好），查到下面的内容：

原来Class属性里的cllapse和in值掌握了隐蔽和显示功能，那我们只须要在按钮的click事宜js代码里修正相应的要进行”显示/隐蔽”操作的HTML元素的class属性就可以了，于是在classmate按钮的click函数里添加以下语句就可以了：

$(\公众#collapseOne\"大众).attr(\"大众class\"大众,\公众panel-collapse collapse\"大众);

3、改动”点击详细同学，显示其信息之后，没有处于当选中的状态”的bug。

我们通过查阅文档，http://www.runoob.com/bootstrap/bootstrap-button-plugin.html，给button的data-toggle属性设置为”button”，可以使其变成点击后自动呈现当选中的状态。

以是我们给classmate的button添加属性data-toggle=”button”。

此时又涌现了另一个问题，我想接下去点击其他classmate的时候，原来点的还是处于激活状态，怎么办？

通过查阅http://www.runoob.com/bootstrap/bootstrap-buttons.html, button的class赋值有active时，才会呈现当选中的状态，也便是说，上面的设定，也便是bootstrap做了这么一件事情：当data-toggle=”button”的按钮被点击时，自动把active添加到class里，此时呈现当选中状态，当再次被点击时，自动把active从class里移除，就呈现未当选中的状态。

也便是说，我们只要自己去做这个操作，比如在点击classmate时，我可以把所有的classmate按钮的active都从class属性里移除，这样点击完成后，只有我最新点击的Button处于active状态。

因此，只须要在classmate按钮的click函数里加入这样的语句：

$(\公众.btn-classmate\公众).attr(\"大众class\"大众,\"大众btn btn-default btn-classmate btn-info\"大众);

效果如下图：

4、美化按钮外不雅观

找到bootstrap里CSS关于按钮的部分：

按照教程修正，我这里只是大略的修正了一下按钮的颜色，大家可以按照需求自己改。
效果如下图：

5、 HTML页面和Javascript代码的分离

实在分为两步：

第一步：把javascript代码放到js文件里，并在HTML文件里链接上。

第二步：把javascript里复用，或者有明确功能的代码块，写进一个函数里，直接调用函数。

由于这两步都比较大略，任何学过编程措辞的该当都会。
我就不展开写了。

值得把稳的是，在链接JS文件时，要把稳顺序。

比如Bootstrap的JS文件，里面的代码是基于Jquery写的，用了很多Jquery的函数，以是Jquery的JS文件要在Bootstrap的JS文件之前声明链接。

同理，咱们的JS文件时基于Bootstrap，以是要在Bootstrap之后，不然代码就不起浸染了。

末了国际老例，贴一下干系的代码：

getClassmate.html:

<!DOCTYPE html>\r<html lang=\"大众zh-CN\"大众>\r <head>\r <meta charset=\公众utf-8\"大众>\r <meta http-equiv=\"大众X-UA-Compatible\公众 content=\"大众IE=edge\公众>\r <meta name=\"大众viewport\"大众 content=\公众width=device-width, initial-scale=1\"大众>\r <title>getClassmate</title>\r\r \r <link href=\"大众css/bootstrap.min.css\"大众 rel=\"大众stylesheet\公众>\r\r \r \r \r \r <style type=\"大众text/css\"大众>\r #btn-group-vertical-classes \r {\r overflow-y:auto; \r overflow-x:auto; \r height:100px;\r }\r #btn-group-vertical-classmates \r {\r overflow-y:auto; \r overflow-x:auto; \r height:500px;\r }\r button\r {\r text-overflow: ellipsis;\r overflow: hidden;\r border-radius: 0px;\r }\r #context_div\r {\r overflow-y:auto; \r overflow-x:auto; \r height:500px;\r }\r </style>\r </head>\r <body>\r <div class=\"大众container\"大众>\r <div class=\"大众panel panel-default\"大众>\r <div class=\"大众panel-heading\"大众>\r <h4 class=\"大众panel-title\"大众 style=\公众text-align:right;\公众>\r <a id=\"大众collapse_a\"大众 data-toggle=\公众collapse\"大众 data-parent=\公众#accordion\"大众 \r href=\"大众#collapseOne\"大众>\r <span class=\"大众glyphicon glyphicon-plus-sign\公众 aria-hidden=\"大众true\"大众></span> Click this to show/hide class\r </a> </h4>\r </div>\r <div id=\公众collapseOne\"大众 class=\公众panel-collapse collapse in\"大众>\r <div class=\"大众panel-body\"大众>\r <div class=\"大众row\"大众 id=\"大众div1-classes-classmates\"大众>\r <div class=\公众btn-group-lg col-md-12\"大众 role=\"大众group\公众 aria-label=\公众...\公众 id=\"大众btn-group-vertical-classes\"大众>\r \r </div>\r </div>\r </div>\r </div>\r </div>\r \r <br></br>\r <div class=\公众row\"大众>\r <div class=\"大众btn-group-vertical btn-group-lg col-md-4 \公众 id=\"大众btn-group-vertical-classmates\"大众 role=\"大众group\"大众 aria-label=\公众...\"大众> \r \r <button type=\公众button\"大众 style=\公众border-radius: 0px;\公众 class=\公众btn btn-default\"大众>Click class to show classmate.</button>\r </div>\r <div class=\公众form-group\公众>\r <div class=\公众col-md-8\"大众>\r <div class=\公众jumbotron\"大众 id=\"大众context_div\公众>\r <p>Click classmate to show details.</p>\r </div>\r </div>\r </div>\r </div>\r </div>\r\r \r <script src=\"大众js/jquery-3.0.0.min.js\公众></script> \r \r <script src=\公众js/bootstrap.min.js\"大众></script>\r <script src=\公众js/script_getClassmate.js\"大众></script>\r </body>\r</html>

script_getClassmate.js:

$(document).ready(function{\r $.getJSON(\公众resource/classmates.json\公众,function(result){\r $.each(result, function(i, field){\r var tmp_button=$('<button type=\"大众button\"大众 style=\公众border-radius: 0px; text-align:left; margin-left:0px\公众 class=\"大众btn btn-default btn-class col-md-6 btn-success\"大众 data-toggle=\"大众button\公众 chosen_state=0></button>').text(i);\r tmp_button.attr(\"大众title\"大众,i);\r $(\"大众#btn-group-vertical-classes\"大众).append(tmp_button);\r });\r $(\"大众.btn.btn-default.btn-class\"大众).click(function{\r var tmp_chosen=Number($(this).attr(\"大众chosen_state\"大众))^1;\r $(this).attr(\"大众chosen_state\公众,String(tmp_chosen));\r showClassmates(result);\r $(\"大众.btn.btn-default.btn-classmate\公众).click(function{\r $(\公众.btn-classmate\"大众).attr(\公众class\"大众,\"大众btn btn-default btn-classmate btn-info\"大众);\r $(\"大众#collapseOne\"大众).attr(\"大众class\"大众,\"大众panel-collapse collapse\"大众);\r var selected_classmate=$(this).text;\r showClassmateDetail(result,selected_classmate);\r });\r });\r });\r})\r\rfunction showClassmates(result){\r $(\"大众#btn-group-vertical-classmates\"大众).empty;\r var chosen_list=new Array;\r \r $(\"大众.btn.btn-default.btn-class\公众).filter(function{\r judgeflag=false;\r if($(this).attr(\公众chosen_state\公众)==\"大众1\"大众){\r judgeflag=true;\r chosen_list.push($(this).text);\r }\r return judgeflag; });\r $.each(result,function(i,field){\r var chosen_list_x;\r for (chosen_list_x in chosen_list){\r if(chosen_list[chosen_list_x]==i){\r $.each(field,function(j,field2){\r var tmp_button=$('<button type=\公众button\公众 style=\"大众border-radius: 0px;\"大众 class=\"大众btn btn-default btn-classmate btn-info\"大众 data-toggle=\"大众button\"大众 chosen_state=0></button>').text(j);\r tmp_button.attr(\公众title\"大众,j);\r $(\"大众#btn-group-vertical-classmates\"大众).append(tmp_button);\r });\r }\r }\r });\r}\r\rfunction showClassmateDetail(result,selected_classmate){\r var classmate_context_item;\r $(\"大众#context_div\"大众).empty;\r $.each(result,function(i,field){\r $.each(field,function(j,field2){\r if(j==selected_classmate){\r $.each(field2,function(k,field3){\r //alert(k);\r //alert(field3);\r classmate_context_item=k + \公众: \"大众 + field3;\r var tmp_p=$('<p></p>').text(classmate_context_item);\r $(\"大众#context_div\"大众).append(tmp_p);\r });\r }\r });\r });\r}

classmates.json:

{\r \"大众Class 001\公众: {\r \公众Xiao Wang\"大众: {\r \"大众Gender\"大众: \"大众Male\"大众,\r \"大众Age\"大众: \公众18\"大众,\r \公众Interest\公众: \"大众Football\"大众,\r \"大众Hometown\公众: \公众Shanghai\"大众,\r \"大众Chinese\公众: \"大众78\"大众,\r \公众Math\"大众: \公众90\公众,\r \"大众English\"大众: \公众66\"大众,\r \公众Physics\"大众: \公众81\"大众,\r \"大众Chemistry\公众: \"大众88\"大众,\r \"大众History\"大众: \"大众69\"大众,\r \公众Geography\"大众: \"大众92\公众\r },\r \"大众Xiao Li\"大众: {\r \公众Gender\公众: \"大众Male\公众,\r \"大众Age\"大众: \公众20\公众,\r \公众Interest\公众: \公众Basketball\公众,\r \公众Hometown\"大众: \"大众Beijing\公众,\r \"大众Chinese\公众: \"大众98\"大众,\r \"大众Math\"大众: \公众77\"大众,\r \"大众English\"大众: \公众97\"大众,\r \"大众Physics\公众: \公众72\公众,\r \"大众Chemistry\公众: \"大众73\"大众,\r \公众History\公众: \"大众88\"大众,\r \公众Geography\公众: \"大众81\"大众\r }\r },\r \公众Class 002\公众: {\r \"大众Xiao Cai\"大众: {\r \"大众Gender\"大众: \公众Female\"大众,\r \公众Age\公众: \"大众19\"大众,\r \"大众Interest\公众: \"大众Dance\公众,\r \"大众Hometown\"大众: \"大众Gaoxiong\公众,\r \公众Chinese\"大众: \"大众93\"大众,\r \"大众Math\"大众: \"大众80\"大众,\r \公众English\公众: \公众92\公众,\r \公众Physics\"大众: \"大众82\公众,\r \"大众Chemistry\公众: \公众77\公众,\r \公众History\"大众: \"大众89\公众,\r \"大众Geography\"大众: \"大众83\"大众\r }\r },\r \公众Class 003\公众: {\r \"大众Xiao Ma\公众: {\r \公众Gender\"大众: \公众Male\"大众,\r \"大众Age\"大众: \公众18\公众,\r \"大众Interest\"大众: \"大众Reading\"大众,\r \"大众Hometown\公众: \"大众Taibei\"大众,\r \"大众Chinese\公众: \公众91\"大众,\r \"大众Math\"大众: \"大众93\公众,\r \"大众English\"大众: \"大众96\"大众,\r \"大众Physics\"大众: \"大众97\"大众,\r \"大众Chemistry\"大众: \"大众100\公众,\r \"大众History\"大众: \"大众94\公众,\r \公众Geography\公众: \公众92\公众\r }\r },\r \公众Class 005\"大众: {\r \公众Xiao Zhang\公众: {\r \公众Gender\"大众: \公众Male\"大众,\r \公众Age\公众: \"大众20\公众,\r \"大众Interest\"大众: \"大众Running\"大众,\r \"大众Hometown\"大众: \"大众Guangzhou\"大众,\r \公众Chinese\"大众: \"大众67\"大众,\r \"大众Math\公众: \公众70\"大众,\r \"大众English\"大众: \"大众66\"大众,\r \"大众Physics\公众: \"大众80\公众,\r \公众Chemistry\"大众: 68,\r \"大众History\公众: \"大众79\"大众,\r \"大众Geography\"大众: \公众93\"大众\r }\r }\r}

紧张参考链接：

[1].Bootstrap中文官方文档

http://v3.bootcss.com/

[2].Runoob.com的Bootstrap教程

http://www.runoob.com/bootstrap/bootstrap-tutorial.html