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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看