基于bootstrap的“简易粗糙”流程图

      需求要求将各个环节用流程图的形式展示出来，若执行到当前流程，字体就变红。由于我这只是固定的流程，颜色变化的话就改下style即可。就没有做真正的流程图（其实是不会），就自己用css拼出来了一个简易粗糙的流程图。后续有待改进

      效果如下：

代码要点：

     ①border-radius: 10%;

        给元素设置圆角边框，可以是数值或比例。

        超级详细：https://www.cnblogs.com/happymental/p/7891725.html

     ②line-height: 50px;

        设置行间的间距。可以看到整个这个div的高度是100px,设置行间距100px,字就能上下居中了，如果字数比较多，比如我这里是字占两行。就设置行间距为50px，这样就又居中了。至于像 text-align: center;这样一劳永逸，我还没有找到方法。

     ③border:1px solid black;

       border 边框样式 ：dashed（虚线）| dotted（点线）| solid（实线）

                   边框颜色：black 等

                   边框宽度：thin | medium | thick（但不是很常用），最常还是用象素（px）

代码如下:

   <style>
        <%--箭头样式--%>
        .flow-arrow{
            font-size: 60px;
            width: 100px;
            height: 100px;
            color: rgb(64, 164, 192);
            text-align: center;
        }
        <%--方框样式--%>
        .flow-box{
            width: 100px;
            height: 100px;
            text-align: center;
            font-size: 15px;
            border-radius: 10%;
            line-height: 50px;
            border:1px solid black;
        }

    </style>


    <div class="col-md-12" >
         <div class="col-md-3 flow-box">业务需求提交</div>
         <div class="col-md-2 flow-arrow">➡</div>
         <div class="col-md-3 flow-box">业务发布及反馈</div>
         <div class="col-md-2 flow-arrow">➡</div>
         <div class="col-md-3 flow-box">业务内部审核</div>
         <div class="col-md-2 flow-arrow">➡</div>
         <div class="col-md-3 flow-box">业务份额反馈</div>
         <div class="col-md-2 flow-arrow">➡</div>
         <div class="col-md-3 flow-box"  style="color:red;line-height: 100px;">份额确认</div>
         <div class="col-md-2 flow-arrow">➡</div>
         <div class="col-md-3 flow-box" style="line-height: 100px;">结束</div>
    </div>