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

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

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

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

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

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

其css样式如下

           .arrow-next {

                 height: 0px;

                 width: 0px;

                 border: solid 1.5em;

                 border-color: #fff;

                 border-left-color: #54b003;

             }

             .arrow-current {

                 height: 0px;

                 width: 0px;

                 border: 1.5em solid;

                 border-color: #54b003;

                 border-left-color: #fff;

             }

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

 <html>

     <head>

         <meta charset="utf-8">

         <meta http-equiv="X-UA-Compatible" content="IE=edge">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <title>流程导航范例</title>

         <!-- Bootstrap -->

         <link href="css/bootstrap.css" rel="stylesheet">

         <style type="text/css">

             .row.row-nav {

                 border: solid 1px #54b003;

             }

             .col-nav {

                 height: 3em;

                 padding: 0px;

                 border: 0px;

                 text-align: center;

                 font-size: 14px;

                 line-height: 3em;

             }

             .col-nav.current {

                 background-color: #54b003;

             }

             .arrow-next {

                 height: 0px;

                 width: 0px;

                 border: solid 1.5em;

                 border-color: #fff;

                 border-left-color: #54b003;

             }

             .arrow-current {

                 height: 0px;

                 width: 0px;

                 border: 1.5em solid;

                 border-color: #54b003;

                 border-left-color: #fff;

             }

         </style>

     </head>

     <body>

         <br>

         <br>

         <br>

         <br>

         <div class="container">

             <div class="row row-nav">

                 <div class="col-md-3 col-nav current" id="nav-1">

                     第一步

                 </div>

                 <div class="col-md-3 col-nav" id="nav-2">

                     第二步

                 </div>

                 <div class="col-md-3 col-nav" id="nav-3">

                     第三步

                 </div>

                 <div class="col-md-3 col-nav" id="nav-4">

                     第四步

                 </div>

             </div>

             <div class='row'>

                 <div class="arrow-next" id='arrow-next'></div>

                 <div class='arrow-current' id='arrow-current'></div>

             </div>

             <br>

             <br>

             <div class='row'>

                 <div class="col-xs-6 col-sm-4 col-md-3">

                     <button id='b1' class='btn btn-success'>第一步</button>

                 </div>

                 <div class="col-xs-6 col-sm-4 col-md-3">

                     <button id='b2' class='btn btn-success'>第二步</button>

                 </div>

                 <div class="col-xs-6 col-sm-4 col-md-3">

                     <button id='b3' class='btn btn-success'>第三步</button>

                 </div>

                 <div class="col-xs-6 col-sm-4 col-md-3">

                     <button id='b4' class='btn btn-success'>第四步</button>

                 </div>

             </div>

             <br>

             <br>

             <div class='row'>

                 <div class='col-md-4 col-md-offset-4'>

                     <button id='clear_all' class='btn btn-success form-control'>清除样式</button>

                 </div>

             </div>

         </div>

         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

         <script src="js/jquery-1.11.1.min.js"></script> 

         <script>

             $(function () {

                 $('[id^=nav-]').click(function () {

                     var position = $(this).position();

                     var str = 'left:' + position.left + ",top" + position.top;

                     str = str + ',heigth:' + $(this).height() + ',width:' + $(this).width();

                     alert(str);

                 });

                 $('button[id^=b]').click(function () {

                     clearClass();

                     var b = $(this).attr('id');

                     var index = b.substr(-1, 1);

                     var current_div = 'nav-' + index;

                     var next_div = 'nav-' + (parseInt(index) + 1);

                     $('#' + current_div).addClass('current');

                     cposition = $('#' + current_div).position();

                     nposition = $('#' + next_div).position();

                     cwidth = $('#' + current_div).width();

                     left = parseInt(cposition.left) + parseInt(cwidth);

                     if (parseInt(index) === 1)

                     {

                         $('#arrow-next').css({'position': 'absolute', 'left': left, 'top': nposition.top, 'zindex': 10}).show();

                         $('#arrow-current').hide();

                     }

                     else if (parseInt(index) === 4)

                     {

                         $('#arrow-next').css({'position': 'absolute', 'left': (left + 1) + 'px', 'top': cposition.top}).show();

                         $('#arrow-current').css({'position': 'absolute', 'left': cposition.left, 'top': cposition.top}).show();

                     } else

                     {

                         $('#arrow-next').css({'position': 'absolute', 'left': left, 'top': nposition.top, 'zindex': 10}).show();

                         $('#arrow-current').css({'position': 'absolute', 'left': cposition.left, 'top': cposition.top}).show();

                     }

                     if ($(window).width() < 992)

                     {

                         $('#arrow-next').hide();

                         $('#arrow-current').hide();

                     }

                 });

                 $('#clear_all').click(function () {

                     clearClass();

                 });

             });

             function clearClass()

             {

                 $('[id^=nav-]').each(function () {

                     $(this).removeClass('current').removeClass('arrow-current').removeClass('arrow-next');

                 });

             }

         </script>

     </body>

 </html>

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

Bootstrap学习笔记（二）---常见工具和流程导航范例的更多相关文章

  1. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. bootstrap学习笔记<二>（标题，段落样式）

    标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...

  3. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  4. bootstrap学习笔记<十>（按钮组，导航）

    1)按钮组.样式:class="btn-group" <div class="btn-group"> <button class=" ...

  5. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  6. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  7. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  8. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  9. python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码

    python3.4学习笔记(二十三) Python调用淘宝IP库获取IP归属地返回省市运营商实例代码 淘宝IP地址库 http://ip.taobao.com/目前提供的服务包括:1. 根据用户提供的 ...

随机推荐

  1. Storm入门之第一章

    Storm入门之第一章 1.名词 spout龙卷,读取原始数据为bolt提供数据 bolt雷电,从spout或者其他的bolt接收数据,并处理数据,处理结果可作为其他bolt的数据源或最终结果 nim ...

  2. springMVC初探

    MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—>封装响应的数据 d,将响应的数据进行渲染 sp ...

  3. tensorflow 从入门到上天教程一

    tensorflow 是一个google开源的深度学习的框架,执行性能良好,值得使用. caffe,caffe2 通过配置就可以拼凑一个深度学习框架,大大简化流程但也依赖大量的开源库,性能也不错.20 ...

  4. unity android相互调用

    简介 有一些手机功能,Unity没有提供相应的接口,例如震动,例如不锁屏,例如GPS,例如... 有太多的特殊功能Unity都没有提供接口,这时候,我们就需要通过使用Android原生的ADT编辑器去 ...

  5. 十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

    上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台 ...

  6. android扫描网页二维码进行网页登录

    转载请标明出处: http://www.cnblogs.com/dingxiansen/: 本文出自:丁先森-博客园 周六和朋友去网吧开黑,开机打开TGP,朋友那边开始输入账号密码,我看了他一眼low ...

  7. ThinkPHP中处理模板引擎的volist标签

    Volist标签主要用于在模板中循环输出数据集或者多维数组 必须得属性有:name属性,要输出的数据模板变量,id是循环变量. 其他属性参见开发手册. 通常模型的select方法返回的结果是一个二维数 ...

  8. MVC文件夹及文件说明

    一个典型的 ASP.NET MVC Web 应用程序的文件夹内容如下所示: 所有的 MVC 应用程序的文件夹名称都是相同的.MVC 框架是基于默认的命名.控制器写在 Controllers 文件夹中, ...

  9. PAT B1045 快速排序(25)

    1045. 快速排序(25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 著名的快速排序算法里有一个经典的划分 ...

  10. 项目实战8—tomcat企业级Web应用服务器配置与会话保持

    tomcat企业级Web应用服务器配置与实战 环境背景:公司业务经过长期发展,有了很大突破,已经实现盈利,现公司要求加强技术架构应用功能和安全性以及开始向企业应用.移动APP等领域延伸,此时原来开发w ...