bootstrap

bootstrap -> 在百度翻译里面有一个解释是“引导程序”

这是一个前端框架，引用它中文官方首页的介绍：

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

好吧，因为我本身跟前后端接触都比较频繁，可能有些刚入门的初学者，对于前端框架还不是很熟悉。

其实从开发的角度来看b/s架构和c/s架构也是一样的，前端框架通常是将表现层HTML、CSS和行为层JavaScript进行了封装。

简单来说就是一个小插件，常用英语单词“wedget”来表示，意为小部件，或者我们可以理解为一个可以被单独运行的的代码集合，

而前端框架则是这些小插件的集合。

由于2次面试均有要求对此框架进行掌握，故稍微整理了一下材料。

首先，我们从蓝色字体的介绍开始剖析。

HTML、CSS、JS，最基础的前端技术，相对前两者来说，js技术可能大家掌握的程度不一。在传统web应用中，大部分只有表单提交的情况

下，确实脚本的验证比较缺乏。尤其在相对灵活的函数式编程PHP 服务器端语言中，这些验证、提交都可以通过服务端脚本语言来代替前端脚

本，怎么解释呢？

http://www.w3school.com.cn/php/php_form_validation.asp

在w3cschool中可以看php的表单验证例子，其中一个php页面可以“自提交”，自提交的意思就是提交给自己，既可以作为一个前端页面，又可

以作为一个后台服务，这就是脚本语言的魅力。

当然有人就有疑问了，那为什么还要用前端框架呢，直接用服务来验证就好了？

这也是笔者致力于开发的一个目标，几乎完全的前后台分离。当然目前在使用过程中，还是很难完全地不去使用jsp和php，用到最多的是项目路

径，project path 用来做脚本引用、css文件应用、资源文件引用。还有模块化管理（模块以文件夹区别开）。

不用后台来做验证，乃至手动去进行提交表单的动作，主要原因有：

1、减少网络资源的使用，每一次网络验证都需要占用一定的资源，而且相对于后台来说，前台是运行在个人pc上的，也就是说压力负载分摊给了客户端

2、减少语言依赖性，php和java，当然还有.NET C#，这样作为后台语言使用时候总会有些差异性。

拿笔者在做培训时候做的一个SSH框架的电信运维系统为例，当时在做PHP学习的时候直接将项目的前端部分拷过来，把jsp改成php，js和html中，

表单提交的地址改动了，除此之外完全复用。为什么可以达到这个效果？主要就在于前后端的分离。

举个例子，笔者在学习java的时候使用过java自定义的标签类，用来做分页。标签页的原理不是很难，主要是做几个参数入口，然后返回一串HTML字符串，这是题外话。

在笔者开始使用前端框架进行快速开发的过程中，已经不再使用这些依赖于服务端语言的标签了，例如struts2标签，有一天，笔者只是做一个假设，假设有那么一天，你

发现你必须更换掉当前的服务端语言，比如从.NET转成JEE的标准，你会无比庆幸当时使用了前后端分离的开发规范。

说到规范，其实我刚点进去

Bootstrap

的官方网站的时候，我先关注的不是文档、demo、api，我比较关注的是规范。作为一个多次参与二次开发和接收他人工作的开发人员，我自身致力于开发规范也希望行业

或者说是团队的开发规范。当你阅读一个框架代码的时候，如果是符合规范的，你会发现明明是多人开发的一个框架却像是一个人写的。而笔者曾经接触的二次开发，或者

是多次开发，很明显可以看出一个是面向对象、另一个是面向过程的人曾经参与开发。

由于之前使用过金蝶公司的

OperaMasks

前端框架进行开发过，所以个人并不是很关注框架的使用，因为这无非是对于API的熟练度的问题。我更关注整个框架的特性。

比如bootstrap中提及的响应式布局，这边就不再引用其他权威的解释了，笔者就用自己的一句话来概括。

响应式布局就是通过一种交过媒体查询的技术对设备的分辨率进行适配，简单来说就是判断设备的宽和高的分辨率来引入不同的CSS样式。

也就是说响应式布局的关注点在设备的分辨率和CSS样式。当然这框架一般已经封装好了，我们只是需要关注一下。

分辨率差异比较大的自然是移动端了，近年来开发的倾向也越来越向移动端靠齐了。

这边附上一个很简单的导航栏例子

<!DOCTYPE html>
<html>
<head>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
               Java 
               <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
               <li><a href="#">jmeter</a></li>
               <li><a href="#">EJB</a></li>
               <li><a href="#">Jasper Report</a></li>
               <li class="divider"></li>
               <li><a href="#">分离的链接</a></li>
               <li class="divider"></li>
               <li><a href="#">另一个分离的链接</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>


</body>
</html>

在

http://www.w3cschool.cc/bootstrap/bootstrap-tutorial.html

网上可以关注一下，是一个学习教程。具体内容我也没详细看，单看这个例子的话，bootstrap的使用和jquery-mobile很像。

就是通过onload和自定义标签属性的方式来进行渲染，简单来说就是先定义好标签的自定义扩展属性，然后通过选择器来获取节点渲染。

细心的人就会注意到上面的例子nav自定标签和其内的role自定义属性，当然和jquery-mobile不太一样，jquery-mobile主要都是div标签来渲染。

有兴趣学的人自己继续深入了解哈，笔者没有应用到开发的情况下，不会太深入学习的。