bootstrap登錄注冊(cè)表單切換頁(yè)面

使用方法：

1、head引入css文件

<!--圖標(biāo)庫(kù)-->
<link rel='stylesheet' >

<!--響應(yīng)式框架-->
<link rel='stylesheet' href='css/bootstrap.min.css'>

<!--主要樣式-->
<link rel="stylesheet" href="css/style.css">

2、body引入HTML代碼

<div class="container">

	<div class="card-wrap">
	
		<div class="card border-0 shadow card--welcome is-show" id="welcome">
			<div class="card-body">
				<h2 class="card-title">歡迎光臨</h2>
				<p>歡迎進(jìn)入登錄頁(yè)面</p>
				<div class="btn-wrap"><a class="btn btn-lg btn-register js-btn" data-target="register">注冊(cè)</a><a class="btn btn-lg btn-login js-btn" data-target="login">登錄</a></div>
			</div>
		</div>
		
		<div class="card border-0 shadow card--register" id="register">
			<div class="card-body">
				<h2 class="card-title">會(huì)員注冊(cè)</h2>
				<p class="card-text">第三方注冊(cè)</p>
				<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
				<p>或者使用您的電子郵箱進(jìn)行注冊(cè)</p>
				<form>
					<div class="form-group">
						<input class="form-control" type="text" placeholder="名稱" required="required"/>
					</div>
					<div class="form-group">
						<input class="form-control" type="email" placeholder="郵箱" required="required"/>
					</div>
					<div class="form-group">
						<input class="form-control" type="password" placeholder="密碼" required="required"/>
					</div>
					<button class="btn btn-lg">注冊(cè)</button>
				</form>
			</div>
			<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
		</div>
		
		<div class="card border-0 shadow card--login" id="login">
			<div class="card-body">
				<h2 class="card-title">歡迎登錄！</h2>
				<p>第三方登錄</p>
				<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
				<p>或用郵箱登錄</p>
				<form>
					<div class="form-group">
						<input class="form-control" type="email" placeholder="郵箱" required="required"/>
					</div>
					<div class="form-group">
						<input class="form-control" type="password" placeholder="密碼" required="required"/>
					</div>
					<p><a href="#">忘記密碼?</a></p>
					<button class="btn btn-lg">登錄</button>
				</form>
			</div>
			<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
		</div>
		
	</div>
	
</div>
  
<script src="js/index.js"></script>