使用bootstrap框架避免不了写CSS，当CSS文件较大时，会发现维护起来很麻烦，一些默认值，如行高、背景色、标注颜色、字号等信息往往反复出现，还有一些大体上一致，只有小部分不同的样式定义，这就需要css预处理器的帮助，常见的有两种Sass和Less，前者使用ruby写的，需要安装ruby，后者似乎是用js开发，用npm直接安装就可以了。考虑到安装过程，我比较喜欢less。

    less最好先安装nodejs，使用其带的npm来安装，nodejs从nodejs.org下载，这是一个服务器端的JS框架，可以用来提供Web服务和做后端开发。less入门可以参考，这里有较为详细的描述。这里就不描述了。

    安装之后，我在netbeans里使用less，它会调用系统的lessc来生成的css程序，当保存less文件时，会自动生成css文件。这需要配置一下，在项目上右键-》属性-》css预处理程序，将保存时编译LESS文件打勾，就可以了。

    在开发过程中，发现一个较长的流程操作，需要分步来执行，我感觉微信公众平台的处理方式比较好，其界面如下：

    要实现这个效果，本来打算用图片来实现的，后来发现用CSS+JS也可以实现，我实现的效果如下

    这里实现的也非常简单，用了框架的属性来生成了箭头，实际上是两个div，生成了两个类似箭头的东西，下面可以看到效果

其css样式如下

1           .arrow-next { 2                 height: 0px; 3                 width: 0px; 4                 border: solid 1.5em; 5                 border-color: #fff; 6                 border-left-color: #54b003; 7             } 8             .arrow-current { 9                 height: 0px;10                 width: 0px;11                 border: 1.5em solid;12                 border-color: #54b003;13                 border-left-color: #fff;14             }

 

    arrow-next产生一个箭头，arrow-current产生一个凹陷，原理也很简单，一个长宽为0的div，border很宽，通过其颜色配置，产生这种效果，剩下的就是通过js将这两个div的位置移动到相应的步骤前后，注意处理一下第一步，就可以了，所有代码如下

1   2       3         
       4         
       5         
       6           7         
       8         
        9          39      40      41         
 42         
 43         
 44         
 45         
     
       46             
      
        47                 
       
         48                     第一步 49                 
       
 50                 
       
         51                     第二步 52                 
       
 53                 
       
         54                     第三步 55                 
       
 56                 
       
         57                     第四步 58                 
       
 59             
      
 60  61             
      
        62                 
       
 63                 
       
 64             
      
 65             
      
 66             
      
 67             
      
        68                 
       
         69                     
        第一步 70                 
       
 71                 
       
         72                     
        第二步 73                 
       
 74                 
       
         75                     
        第三步 76                 
       
 77                 
       
         78                     
        第四步 79                 
       
 80             
      
 81             
      
 82             
      
 83             
      
        84                 
       
         85                     
        清除样式 86                 
       
 87             
      
 88         
     
 89  90         
       91           92  93         150       151 

 

这段代码也挺简单了，虽然花了我一下午的时间，水平有限，努力学习吧。