CSS/Bootstrap 3 自定义进度跟踪器

Posted 2023-03-06

【中文标题】CSS/Bootstrap 3 自定义进度跟踪器

【英文标题】：CSS/Bootstrap 3 custom Progress Tracker

【发布时间】：2019-12-10 11:50:09

【问题描述】：

我正在开发一个使用 Bootstrap 3/CSS 和可能 Jquery 的自定义进度跟踪器。我已经设法取得了一些进展，但无法使其与要求完全相同。 提前感谢您的帮助...

我无法完成的两件主要事情是： 1. 任务完成时的绿/蓝过渡（我已附上显示所需结果的图像）。 2. CSS 更改，以便我的 jsfiddle 看起来像附加的图像。

.stepwizard-step p 
margin-top: 0px;
color: #337ab7;


.stepwizard-row 
display: table-row;


.stepwizard 
display: table;
width: 100%;
position: relative;


.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard 
fieldset[disabled] .btn 
opacity: 1 !important;
color: #337ab7;


.stepwizard-row:before 
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 5px;
background-color: #337ab7;
z-index: 0;
left: 0;



.stepwizard-step 
display: table-cell;
text-align: center;
position: relative;


.btn-circle 
width: 30px;
height: 30px;
text-align: center;
padding: 4px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
border-color:#337ab7;


    <div id="wizard-content">
    <div class="stepwizard">
        <div class="stepwizard-row setup-panel">
            <div class="stepwizard-step col-xs-3" id="link1">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-info-sign" ></span></a>
                <p><small>Customer Info</small></p>
            </div>
            <div class="stepwizard-step col-xs-3" id="link2">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-map-marker"></span></a>
                <p><small>Site Info</small></p>
            </div>
            <div class="stepwizard-step col-xs-3" id="link3">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-upload"></span></a>
                <p><small>Measure Info & Document Upload</small></p>
            </div>
            <div class="stepwizard-step col-xs-3" id="link4">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-check"></span></a>
                <p><small>Final Steps</small></p>
            </div>
        </div>
    </div>
</div>

我的小提琴：https://jsfiddle.net/q3k29tx5/ 样品要求：

【问题讨论】：

尝试将问题分解为更小的步骤。例如。编写将“客户信息”变为绿色的 CSS。

是的，基于我有限的 CSS 经验，我设法获得了一个有点绿色的完整过渡。此处示例：jsfiddle.net/u75vyz32

我已添加代码以在按下按钮后更改颜色：jsfiddle.net/uy70z2f6希望能给你一些想法。

【参考方案1】：

我已经设法回答了我自己的问题：

 /* Wizard CSS Begin */

.page-header 
padding-bottom: 9px;
margin: 0;
border-bottom: 1px solid #eee;


.text-center 
text-align: center;


#progressbar 
margin: 0 0 30px 0;
padding: 0;
overflow: hidden;
/*counter-reset: step;*/


#progressbar li 
    font-family: 'Roboto', Helvetica;
    list-style-type: none;
    color: #797979;
    text-transform: uppercase;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 500;


    #progressbar li:first-child:before 
        font-family: "Glyphicons Halflings";
        content: "\e086";
        font-size:27px;
    

    #progressbar li:nth-child(2):before 
        font-family: "Glyphicons Halflings";
        content: "\e062";
        font-size: 27px;
    

    #progressbar li:nth-child(3):before 
        font-family: "Glyphicons Halflings";
        content: "\e027";
        font-size: 27px;
    

    #progressbar li:last-child:before 
        font-family: "Glyphicons Halflings";
        content: "\e067";
    

    #progressbar li:before 
        /*content: counter(step);*/
        /*counter-increment: step;*/
        width: 36px;
        height: 36px;
        font-family: Ionicons;
        font-size: 25px;
        line-height: 32px;
        border-radius: 50%;
        border: 2px solid #797979;
        background-color: white;
        display: block;
        margin: 0 auto 5px auto;
    

    #progressbar li:after 
        content: '';
        width: 100%;
        height: 15px;
        background-color: #797979;
        position: absolute;
        top: 11px;
        z-index: -1;
        left: -50%;
    

    #progressbar li:first-child:after 
        content: none;
    

    #progressbar li.active:before, #progressbar li.active:after, #progressbar li.active 
        border-color: #78AB46;
        color: #78AB46;
    

        #progressbar li.active + li:after 
            background-color: #78AB46;
            content: '';
        

        #progressbar li.active:before 
            font-family: "Glyphicons Halflings";
            /*content: '\e008';*/
        

/* Wizard CSS End */

 <div class="page-header text-center">
            <ul id="progressbar">
                <li class="active">Customer Info</li>
                <li>Site Info</li>
                <li>Measure Info & Document Upload</li>
                <li>Final Steps</li>
            </ul>
        </div>

菲德尔：https://jsfiddle.net/yLo07ktq/

我找到了这个链接：http://fbfriends.nailfashionsweden.se/default.html#//profile 真正有用