driver.js实现页面引导层新手教程指引示例代码-html代码-BFW代码库

driver.js实现页面引导层新手教程指引示例代码

代码语言：html

代码描述：driver.js实现页面引导层新手教程指引示例代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/driver.min.css">

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Work+Sans:wght@400;600&display=swap");
        body {
        	background: #bc4e9c;
        	background: -webkit-gradient(
        		linear,
        		left top,
        		right top,
        		from(#f80759),
        		to(#bc4e9c)
        	);
        	background: -o-linear-gradient(left, #f80759, #bc4e9c);
        	background: linear-gradient(to right, #f80759, #bc4e9c);
        }
        h1,
        h4 {
        	font-family: "Lato", sans-serif;
        }
        p,
        span,
        input[type="text"],
        button {
        	font-family: "Work Sans", sans-serif !important;
        }
        p {
        	line-height: 26px;
        }
        input[type="text"] {
        	width: 100%;
        	padding: 10px;
        	-webkit-box-sizing: border-box;
        	box-sizing: border-box;
        	border-radius: 3px;
        	border: 1px solid #dadada;
        	font-size: 16px;
        	margin-top: 10px;
        }
        .container {
        	width: 80%;
        	padding: 40px 80px;
        	-webkit-box-sizing: border-box;
        	box-sizing: border-box;
        	background: #fff;
        	margin: auto;
        	margin-top: 3rem;
        }
        #start {
        	background: #f953c6;
        	padding: 10px 20px;
        	color: #fff;
        	border: none;
        	margin-bottom: 20px;
        }
        .flex_div {
        	display: -webkit-box;
        	display: -ms-flexbox;
        	display: flex;
        	-webkit-box-pack: justify;
        	-ms-flex-pack: justify;
        	justify-content: space-between;
        	-ms-flex-wrap: wrap;
        	flex-wrap: wrap;
        }
        .three_fourth {
        	width: 70%;
        }
        .one_half {
        	width: 45%;
        }
        .one_fourth {
        	width: 20%;
        }
        .step_indicator {
        	color: #808080;
        }
        .divider {
        	width: 100%;
        	height: 1px;
        	background: #dadada;
        }
        .spacer {
        	width: 100%;
        	height: 20px;
        }
        .bolder {
        	font-weight: 600;
        }
        .gray_text {
        	color: #808080;
        }
        .visibility {
        	font-size: 14px;
        }
        .private,
        .public {
        	border: 1px solid #0575e6;
        	padding: 20px;
        	-webkit-box-sizing: border-box;
        	box-sizing: border-box;
        	border-radius: 5px;
        	text-align: center;
        }
        .public {
        	border: 1px solid #ff00cc;
        }
        .theme_color {
        	width: 100%;
        	height: 15px;
        	border-radius: 10px;
        	margin-top: 10px;
        }
        .theme_blue {
        	background: #333399;
        	margin-top: 20px;
        }
        .theme_orange {
        	background: #fc4a1a;
        }
        .theme_green {
        	background: #38ef7d;
        }
        .save_board {
        	padding-top: 20px;
        	padding-bottom: 20px;
        }
        .save_button {
        	background: #276ff9;
        	border-radius: 30px;
        	padding: 15px 20px;
        	border: none;
        	color: #fff;
        	width: 100%;
        	font-size: 16px;
        }
        .driver-popover-title {
        	font-family: "Lato", sans-serif !important;
        }
        .driver-popover-description {
        	font-family: "Work Sans", sans-serif !important;
        }
        @media (max-width: 900px) {
        	.three_fourth {
        		width: 100%;
        	}
        	.one_half {
        		width: 100%;
        		margin-bottom: 20px;
        	}
        	.one_fourth {
        		width: 100%;
        	}
        }
        @media (max-width: 500px) {
        	.container {
        		padding: 40px 20px 0px 20px;
        		width: 90%;
        	}
        }
    </style>


</head>

<body>
    <div class="container">
        <button id="start">Board registration process - Start the tour</button>
        <div class="flex_div">
            <div class="three_fourth">
                <div class="board_name">
                    <span class="step_indicator">Create your first board</span>
                    <h1>Create Your Personalize Board</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
                    <input type=&quo.........完整代码请登录后点击上方下载按钮下载查看