bootstrap实现多步骤切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：bootstrap实现多步骤切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
    .container{width: 600px;margin-top: 100px;}
.step-slide{
    text-align: center;
    font-weight: bold;
}
.modal-steps{
    display: flex;
}

.dot:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    -webkit-transform: scale(.75);
    -ms-transform: scale(.75);
    transform: scale(.75);
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background-color: #EAEAEA;

}

.dot {
    background-color: #EAEAEA;
    height: 20px;
    width: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    display: inline-block;
    position: relative;
    top: .125em;
    z-index: 2;
    margin: auto;
    border: 1px solid;
    border-color: #EAEAEA;

}
.step::before {
    position: absolute;
    border: 1px solid;
    height: 1px;
    display: block;
    z-index: 1;
    top: 11px;
    content: '';
    border-color: #EAEAEA;
}
/* .step::before {
  
} */
.step::before{
    width:100%;
    z-index: -1;
}
.step:last-child::before{
    width: 50% !important;
}
.step:nth-child(2)::before{
    width: 100%;
}
.step::after{
    width: 0%;
}
.completed .dot::before{
    /* width: 200%; */
    background-color: #39c0ba;


}
.current .dot{
    border-color:#39c0ba;
}
.step::after{
    position: absolute;
    /* border: 1px solid; */
    height: 2px;
    display: block;
    z-index: 1;
    top: 11px;
    content: '';
    /* border-color: #EAEAEA; */
    background-color: #39c0ba;
}
.step::after{
    /* width: 50%; */
    left: 0;
    transition: 0.2s linear;
    width: 0%;
}
.step:first-child::before,.step:first-child::after{
    /* width: 50%!important; */
    left: unset;
    right: unset;
    -webkit-transform: translateX(51%);
    -ms-transform: translateX(51%);
    transform: translateX(51%);

}
.step:last-child::before,.step:last-child::after{
    /* width: 50%!important; */
    left: 0;
}
.step-title{
    text-align: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    font-size: .8rem;
}
.step {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* -webkit-box-pack: center; */
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.label {
    font-size: 12px;
    display: block;
    margin: .5em 0;
    text-align: center;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
}
.step-main>.step-slide{
    display: none;
}
.step-main{
    width: 100%;
    position: relative;
}
.step-slide{
    position: absolute;
    width: 100%;
}
/* .step-slide{
    height: 400px;
} */
.modal-steps .step.completed::after{
    width: 100% !important;
}   
.modal-steps .step.current::after{
    width: 50%;
}   
.step.current:first-child:after{
    width: 0%;
}
.step.completed:first-child:after{
    width: 50% !important;
}

.unVisible{
    opacity: 0;
}
</style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.actual.min.js"></script>
    <script type="text/javascript">



        $(function() {

            step_();
        })
        function step_() {
            let howLong = $(".modal-steps ").actual("width")/3;
            console.log(howLong)
            let current = 0;
            $('.step-main').css("height", getMaxHeight());
            $('.step-slide').eq(current).fadeIn(500)
            $('.step').eq(current).addClass("current");

            let preventResponse = false;
            $('#next').click(function() {
                if (!preventResponse) {
                    if (current != ($('.step-slide').length-1)) {

                        $('.step').eq(current).addClass("completed");

                        current++;

                        let timeOut = null;
                        clearTimeout(timeOut);
                        timeOut = setTimeout(function() {
                            console.log(current)
                            $('.step').eq(current).addClass("current");
                        }, 200);

                        console.log(current);
                        $('.step-slide').eq.........完整代码请登录后点击上方下载按钮下载查看