使用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. [转载] Linux curl命令详解

    转载自http://www.linuxdiyf.com/linux/2800.html 命令:curl在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的htt ...

  2. JSON Web Tokens（JWT）

    现在API越来越流行,如何安全保护这些API? JSON Web Tokens(JWT)能提供基于JSON格式的安全认证.它有以下特点: JWT是跨不同语言的,JWT可以在 .NET, Python, ...

  3. Python 日志处理（一） 按Nginx log_format 分割日志记录

    要求:不使用正则 根据nginx 默认的日志记录格式,分割日志记录. log_format main '$remote_addr - $remote_user [$time_local] " ...

  4. ssh密钥登录

    一.生成密钥对(两种方式)并配置 方式1:使用ssh-keygen(1)生成并配置 (1)生成密钥对 [root@iZwz9catu2mrq92b07d1d0Z ~]# ssh-keygen -t r ...

  5. 快速增加controller节点

    # controller1节点部署成功后,再添加controller节点,复制配置文件并修改即可openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p ...

  6. [C#]使用Process的StandardInput与StandardOutput写入读取控制台数据

    本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...

  7. 深入解析Java垃圾回收机制

    引入垃圾回收 哪些内存需要回收? 引用计数法 可达性分析 如何回收 Marking 标记 Normal Deletion 清除 Deletion with Compacting 压缩 为什么需要分代收 ...

  8. PDFBox创建并打印PDF文件, 以及缩放问题的处理.

    PDFBox带了一些很方便的API, 可以直接创建 读取 编辑 打印PDF文件. 创建PDF文件 public static byte[] createHelloPDF() { ByteArrayOu ...

  9. Python的列表

    1. Python的列表简介 1. 1 列表的定义 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 ,即它的 ...

  10. Effective Java 第三版——3. 使用私有构造方法或枚类实现Singleton属性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...