php+bootstrap 编写简易的步骤进度条

个人笔记记录，步骤进度条。

版本一：

初始版本，
当前版本单纯的根据bootstrap+CSS进行完成的简易版本。这个比较简单
样式我放在了最底下。
在这里插入图片描述

  <div class="form-group steps"><div class="steps-height"><div class="step-line step-completed"></div><div class="step step-completed"><div class="step-text">1</div><div class="step-main"><p>1.立项信息</p><p>1.立项信息</p><p>1.立项信息</p><p>1.立项信息</p><p>1.立项信息</p></div></div><div class="step-line step-completed"></div></div><div class="steps-height"><div class="step-line "></div><div class="step"><div class="step-text">2</div><div class="step-main">2.项目成员</div></div><div class="step-line "></div></div><div class="steps-height"><div class="step-line"> </div><div class="step "><div class="step-text">3</div><div class="step-main">3.合作单位</div></div><div class="step-line "></div></div><div class="steps-height"><div class="step-line"> </div><div class="step"><div class="step-text">4</div><div class="step-main">4.项目预算</div></div><div class="step-line "></div></div><div class="steps-height"><div class="step-line"> </div><div class="step"><div class="step-text">5</div><div class="step-main">5.项目文档</div></div><div class="step-line "></div></div><div class="steps-height"><div class="step-line"></div><div class="step"><div class="step-text">6</div><div class="step-main">6.完成登记</div></div><div class="step-line"></div></div></div>

版本二

这个版本加入了php，从数据库读取内容。然后加载到前端。
框架用的是thinkphp。

从数据库进行加载内容

    <div class="form-group steps">{volist name="steps" id="step"  key="k"}<div class="steps-height"><div class="step-line  step-completed"></div><div class="step step-completed"><div class="step-text">{$k}</div><div class="step-main"><p>{$k}.{$step.name}</p><p>数量：{$step.number}</p>
<!--                    <div>2.项目成员</div>--></div></div><div class="step-line  step-completed"></div></div>{/volist}</div>

    public function index(){//设置过滤方法$this->request->filter(['strip_tags', 'trim']);$todayStart = date('Y-m-d 00:00:00'); // 今天开始的时间戳$todayEnd = date('Y-m-d 23:59:59');   // 今天结束的时间戳//获取当前日期的步骤栏$steps =Db::name("step")->where('createtime', '>=', $todayStart)->where('createtime', '<=', $todayEnd)->select();// 将数据传递给视图$this->assign('steps', $steps);return $this->view->fetch();}

版本3

这个版本比较完善了。根据下拉框，进行刷新需要的步骤进度条。
并且步骤条通过 js 进行动态生成。


<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><link href="steps.css" rel="stylesheet" /><link rel="stylesheet" href="__CDN__/assets/libs/steps/steps.css">
</head>
<body>
<div class="panel panel-default panel-intro"><div  class="form-group"><form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""><div class="form-group"><label class="control-label col-xs-12 col-sm-2">下拉框:</label><div class="col-xs-12 col-sm-8"><select  id="c-fi_Sub" data-rule="required" class="form-control" name="row[title]"><!--   <option value="0" >请选择状态</option>--></select></div></div></form></div><div class="form-group steps">
<!--        步骤条位置--></div>
</div></body>
</html>

js

//获取 步骤条内容function steps(rc_name){Fast.api.ajax({url: 'step/step/select_step',data: {rc_name: rc_name},}, function (data, ret) {//清楚 容器上的内容$('.steps').empty();//通过foreach构造 div$.each(data.html, function(index, step) {//创建divvar stepDiv = $('<div></div>').addClass('steps-height');var lineDiv=$('<div></div>').addClass('step-line  step-completed');var completed=$('<div></div>').addClass('step step-completed');var lineDiv2=$('<div></div>').addClass('step-line  step-completed');// ... 根据 step 对象创建 DOM 元素并添加到 stepDiv 中completed.append('<div class="step-text">' + (index+1) + '</div>');completed.append('<div class="step-main"><p>' + (index+1) + ' . '+ step.pi_name + '</p><p>数量：' + step.number + '</p></div>');stepDiv.append(lineDiv);stepDiv.append(completed);stepDiv.append(lineDiv2);// 将创建好的 stepDiv 添加到页面上$('.steps').append(stepDiv); // 将步骤添加到 .steps 容器中});return false;}, function (data, ret) {alert(ret.msg);return false;});}

			//加载成功时刷新下拉框$(document).ready(function() {Fast.api.ajax({url: 'step/step/select_rc_name',data: {},}, function (data, ret) {//将内容挂到下拉选择框$("#c-fi_Sub").html(data.html);// 获取选中的idvar rc_name = $("#c-fi_Sub").val();//刷新步骤条steps(rc_name);return false;}, function (data, ret) {alert(ret.msg);return false;});});//选择下拉框时$(document).on("change", "#c-fi_Sub", function () {// 获取选中的idvar rc_name = $("#c-fi_Sub").val();//刷新步骤条steps(rc_name);});

以下就是样式了。不是很难的内容

.steps {/*position: relative;*//*padding: 25px 0 25px 20px;*/position: relative;display: flex;flex-wrap: wrap; /* 允许子元素换行 */align-items: flex-start; /* 垂直居中对齐子元素 */padding: 25px 0 25px 20px;
}.step,
.step-line {float: left;
}
.steps-height{height: 150px;
}
.step {display: block;width: 21px;height: 21px;border-radius: 50%;line-height: 21px;text-align: center;/*font-size: 15px;*/border: 1px solid #cdcdcd;background: #cdcdcd;font: 16px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;
}.step-line {width: 50px;position: relative;top: 9px;height: 5px;background-color: #cdcdcd;/*display: none; !* 如果不需要线连接每个步骤，可以隐藏它 *!*//* 如果需要线，则需要重新设计其显示方式，因为flex布局下自动换行会打破线的连续性 */
}
.step-text {font-size: 15px;color: #fff;background-color: #cdcdcd;border-radius: 50%;width: 21px;height: 21px;line-height: 21px;text-align: center;margin-bottom: 5px; /* 与下面的文本保持一定距离 */}.step-main {font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif;text-align: center;color: #313131;margin-top: 8px; /* 适当的间距 */
}
.step-completed .step-text {background: #327ab7;border-color: #327ab7;
}
.step-completed .step-main {/* 如果需要，可以添加特定于已完成步骤的样式 */
}/* 如果需要，可以为第一个步骤添加特殊处理，例如没有线条 */
.step:first-child::after {display: none;
}.step::before {content: '';position: absolute;top: 50%;left: -40px; /* 线条从步骤的左侧开始 */width: 30px; /* 线条的长度 */height: 2px; /* 线条的粗细 */background-color: #cdcdcd;transform: translateY(-50%); /* 垂直居中线条 */
}.step-main {font: 14px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;padding: 8px 0;display: block;width: 80px;text-align: center;position: relative;left: -34px;color: #313131;
}.steps > .step-completed {background: #327ab7;border-color: #327ab7;
}/*.step-completed > .step-main {color: #2f318e;
}*/.step-completed > .step-circle {background-color: #2f318e;
}.step-completed.step-line {background-color: #327ab7;
}
/* 响应式设计，可以根据需要调整 */
@media (max-width: 600px) {/*.step {*//*    width: 50px; !* 在小屏幕上减小步骤宽度 *!*//*    margin-right: 10px; !* 减小间距 *!*//*}*/.step-text {font-size: 12px; /* 减小文本大小以适应小屏幕 */}.step-main {font-size: 12px; /* 同样减小主文本大小 */}.steps-height{height: 50px;}/*.step {*//*    margin-right: 15px; !* 减小间距以适应小屏幕 *!*//*    min-width: 40px; !* 减小最小宽度 *!*//*}*/.step::before {left: -20px; /* 减小线条的起始位置 */width: 15px; /* 减小线条的长度 */}
}/* 假设你在步骤中添加了一个 p 标签 */
.step p {/* 这里的样式将控制 p 标签的显示，它会自动增加 .step 的高度 */margin: 4px 0; /* 适当的间距 */font-size: 14px; /* 或其他适当的字体大小 */
}