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

网友评论0