自举零基础入门教程(2)

什么是Bootstrap？

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的。

历史

自举是由推特的马克奥托和雅各布桑顿开发的。Bootstrap是2011年8月在GitHub上发布的开源产品。

本文重点介绍Bootstrap零基入门教程(2)。具体详情如下：

在此过程中经常查阅数据的网站：

http://www.w3school.com.cn/是W3C联盟为传播W3C标准而建立的网站。web端有很多技术，你可以把它看作是Web技术的百科全书。

不用说，http://v3.bootcss.com/bootstrap 3官方文件

事实上，http://www.runoob.com/与W3school相似，但比W3school复杂一点。很多内容都是从原W3C英文网站和原BootStrap官方英文文档翻译过来的，但我感觉他的翻译质量更高(因为前两个网站都是用纯英文翻译的)，有些Case更容易理解。

没有太多流言蜚语，让我们开始吧：

(1)明确实现目标

如下图所示，这是一个我们想要实现的简单网站。布局简单，没有炫目的效果。但是需要实现一个功能：从Json文件中读取相关信息(关于Json的知识可以在上面的网站上找到)并显示在网站上。

Json文件内容：

{ ' 001班' : { '小王' : { '性别' : '男'，'年龄' : '18 '，'兴趣' : '足球'，'家乡' : '上海' }，'小李' : { '性别' : '男'，'年龄' : '20 '，'兴趣' : '篮球'，'家乡' 3: '北京' }，'

布局：

有三个块：第一行左侧的班级列表，第一行右侧的同学名字列表，第二行的同学相关信息。

功能：

1.单击班级列表中的某个班级，动态更新班级列表中该班级的学生，并再次检查该班级。

2.点击同学列表中的某个同学，在第二行动态显示该同学的信息，一次只能显示一个同学。

(2)分析所需的技术

布局：

BootStrap:用来实现这个简单的两行布局，检查Class列，滚动条(有些可以直接用BootStrap很好的实现，有些则不能。怎么知道？去以上三个网站查找查看)

功能：

使用Javascript和Ajax实现数据采集和动态交互(以本地刷新的方式)。

(3)技术选择分析

1.实现布局。

查文档(http://www . runoob.com/Bootstrap/Bootstrap-grid-system-example 3 . html)发现Bootstrap是由网格系统布局的，通过为div设置特定的类属性就可以达到我想要的布局效果。并且可以为手机、平板、台式电脑设置不同的效果。HTML标签的类属性和什么是HTML标签可以在W3SCHOOL上找到。

值得注意的是，一个元素可以有多个类属性。

eg : div class=' BTN-group-垂直btn-group-lg col-md-6 '角色='group' aria-label=' . 'id=' BTN-组-垂直-类'

在不同属性之间使用“空格”。相信我，这将使您很容易编写Javacript脚本和调整CSS。

2.实现类号的垂直排列和多选。

查找http://www.runoob.com/bootstrap/bootstrap-button-groups.html，了解如何设置垂直按钮组。也就是将按钮组所在的DIV的类设置为btn-group-vertical，使其成为存储按钮组的容器。

查看http://www.runoob.com/bootstrap/bootstrap-button-plugin.html了解如何查看按钮组。可以通过在类属性为btn-group的DIV中添加数据属性data-toggle='buttons '来实现。

3.从圆角到直角重新定义按钮的角，向按钮组添加滚动条，并限制按钮上显示的文本，使其不超过按钮。超出的部分显示为“…”，当鼠标在按钮上移动和停止时，将显示所有文本：

少数部分(圆角变为直角，鼠标悬停显示文本)需要直接在HTML标签中设置样式和标题属性。

大部分的实现都是写一个CSS:

style type=' text/CSS ' # BTN-group-vertical-class { overflow-y : auto；overflow-x : auto；高度：150 px；} # BTN-组-垂直-同学{ overflow-y : auto；overflow-x : auto；高度：150 px；}button{text-overflow:省略号；飞越：隐藏；border-radius : 0px；}/style这个style部分的代码放在head，也就是head和/head之间。

一般的方法是用CSS选择器选择要设置CSS的标签，然后在花括号中设置对应的样式。

一个CSS选择器是上面代码中的“# BTN-group-vertical-class”和“button”，也就是花括号上面的一行代码。CSS选择器的使用方法有多种，可以在W3SCHOOL网站上找到。

因为加载CSS样式表(CSS文件；头部样式标签和HTML元素中样式属性的有效优先级顺序为：“元素上的样式”、“文件头上的样式元素”和“外部样式文件”。)，我们也参考了BootStrap的CSS，所以会涉及到覆盖，也就是说在head中的style标签中已经设置了一些CSS样式，但是不起作用(比如上面样式中button的边框半径设置不起作用)。从“会工作”和“耦合度最低(即最方便修改)”的角度出发，此时推荐两种方法：

1直接在元素标签中写入样式属性。这是重中之重，所以它肯定会起作用。

一劳永逸地修改链接的BootStrap CSS文件，然后添加新的元素，而不需要逐个重写样式属性。它要求你下载CSS文件，而不是引用链接。

由于我们的网站很小，我采用了第一种方法。

4.用Ajax实现数据采集、交互和动态加载。

问我怎么知道怎么用Ajax？百度搜索，或者问问懂前端技术的人。

Ajax的核心是可以在本地刷新，而不是刷新整个页面。这里首先要查阅Ajax技术的相关文档(以上三个网站和各种百度)。由于我们需要从Json文件中获取数据，所以我们参考了jquery的Ajax手册http://www.w3school.com.cn/jquery/Jquery_ref_ajax.asp(因为BootStrap的JS是基于Jquery的，所以Jquery的所有方法都是工作的，这个知识点也是我搜索信息的时候找到的)。getJson函数被选中。此外，参考http://www . cn blogs.com/code plus/archive/2011/07/18/2109544 . html选择每个函数作为解析方法。

如果实现代码，主要涉及遍历(for语句)、判断(If语句)、操作HTML元素、添加子元素、修改属性值等。

至于具体的页面怎么写，写的太详细就没意思了，直接贴出代码。

运行demo时注意几点：chrome似乎限制直接在本地读取文件内容，所以应该把整个项目放在Apache的htdocs文件夹中。然后跑。关于如何安装Apache，我之前的博客有非常详细的介绍。如何使用，请百度。

！DOCTYPE html html lang=' zh-CN ' hearta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' title get Claude/title！-Bootstrap-link。量滴CSS ' rel='样式表！- HTML5垫片和Respond.js，用于IE8对HTML5元素和媒体查询的支持-!-warn :响应。射流研究…如果通过文件：///-查看页面，则不起作用！-[如果lt IE 9]脚本src=' http://cdn。布斯。com/html 5 shiv/3。7 .2/html 5 shiv。量滴js /脚本脚本src=' http://cdn。布斯。com/response。js/1。4 .2/回应。量滴js /脚本！[endif]-style type=' text/CSS ' # BTN-组-垂直-类{ overflow-y : auto；overflow-x : auto；高度：150 px} # BTN-组-垂直-同学{ overflow-y : auto；overflow-x : auto；高度：150 px}按钮{text-overflow:省略号；飞越：隐藏；边界半径： 0px}/style/head dydiv class=' container ' br/brdiv class=' row ' id=' div 1-class-class ' div class=' BTN-组-垂直BTN-组-LG col-MD-6 '角色='group' aria-label=' . 'id=' BTN-集团-垂直-类'！-其中类显示-/div class=' BTN-集团-垂直BTN-集团-LG col-MD-6 ' id=' BTN-集团-垂直-同学'角色='group' aria-label=' . '！-同学展示的地方-button type=' button ' style=' border-radius : 0px；'class='btn btn-default '点击班级显示同学/button/div/div br/brdiv class=' row ' form role=' form ' div class=' form-group ' div class=' col-MD-12 ' div class=' jumbo tron ' id=' context _ div ' p click同学以显示详细信息/p/div/表单/div/div！-jQuery(引导的Java Script语言插件所必需的)-脚本src=' http : js/jQuery-3。0 .0 .量滴js /脚本！-包含所有编译的插件（如下图),或者根据需要包含单个文件-script src=' http : js/bootstrap。量滴js '/script脚本$(文档)。ready(function(){$).getJSON('资源/经典。JSON '，函数(结果){$ .每个（结果、函数(一、字段){ var tmp _ button=$(' button type=' button ' style=' border-radius : 0px；BTNBTN默认BTN类“数据开关=”按钮“选择状态=0/按钮”).文本;tmp_button.attr('title '，I)；$(' # BTN-集团-垂直-类').追加(tmp _ button)；});$('.btn.btn-default.btn-class ').点击（函数(){ var tmp _ choosed=Number($(this)).attr('chosen_state'))^1；$(这个)。attr(' choose _ state '，String(tmp _ choose))；$(' # BTN-组-垂直-同学')。empty()；var selected _ list=new Array()；$('.btn.btn-default.btn-class ').filter(function(){ judge flag=false；if($(this).attr(' choose _ state ')==' 1 '){ judge flag=true；选择列表。推($(这个)).text())；}返回判断标签；});$.每个（结果，函数(我，字段){ var choose _ list _ x；用于(选择列表中的choose _ list _ x){ if(choose _ list[choose _ list _ x]==I){ $ .每个（字段，函数(j，字段2){ var tmp _ button=$(' button type=' button ' style=' border-radius : 0px；BTNBTN默认BTN同学choose _ state=0/button’).案文(j)；tmp_button.attr('title '，j)；$(' # BTN-组-垂直-同学')。追加(tmp _ button)；});}}});$(.BTN。BTN-违约。BTN同学')。点击(函数(){ var selected _ school=$(this)).text()；定义变量同学_上下文_ item $(“# context _ div”).empty()；$.每个（结果、函数(一、字段){$。每个（字段，函数(j，字段2){ if(j==selected _ school){ $ .每个(field2，function(k，field 3){ school _ context _ item=k ' : ' field 3；var tmp_p=$('p/p ').文本（同学_上下文_项目);$('#context_div ').追加(tmp _ p)；});}});});});});});})/脚本/正文/html