需求說明
- 使用模態框佈局登錄框的頁面結構和樣式
- 使用柵格系統佈局登錄的表單內容
- 通過點擊“登錄”按鈕觸發彈出登錄框。並且彈出的登錄框是小型的
運行效果
參考代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百度登錄框</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<style>
body{
padding: 30px;
}
.myMP{
margin: 20px;
}
.myB{
margin-bottom: 20px;
}
.myBtn{
margin-left: 80%;
}
</style>
</head>
<body>
<!--按鈕-->
<button class="btn btn-primary myBtn" data-toggle="modal" data-target="#mymodal">登錄</button>
<div class="container" style="margin-top: 40px">
<div class="row">
<div class="col-md-6 col-md-offset-3" >
<div class="input-group">
<input type="text" class="form-control" placeholder="" >
<span class="input-group-btn" > <!-- 容易出錯點：寫成input-group-addon-->
<button class="btn btn-primary" type="button">百度一下</button>
</span>
</div>
</div>
</div>
</div>
<!--彈出的模態框-->
<div id="mymodal" class="modal fade bs-examlpe-modal-sm"><!-- modal固定佈局，上下左右都是0表示充滿全屏，支持移動設備上使用觸摸方式進行滾動。。-->
<div class="modal-dialog modal-sm"><!-- modal-dialog默認相對定位，自適應寬度，大於768px時寬度600，居中-->
<div class="modal-content"><!-- modal-content模態框的邊框、邊距、背景色、陰影效果。-->
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">登錄百度賬號</h4>
</div>
<div class="media-body">
<form action="#">
<div class="col-md-10 col-md-offset-1 myMP">
<input class="form-control" type="text" placeholder="手機/郵箱/用戶名"/>
</div>
<div class="col-md-10 col-md-offset-1 myMP">
<input class="form-control" type="text" placeholder="密碼"/>
</div>
<div class="col-md-10 col-md-offset-1 myMP">
<input type="checkbox" />下次自動登錄
</div>
<div class="col-md-12 myB">
<input class="btn btn-primary form-control" type="submit" value="登錄"/>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js'></script>
<script>
// 默認彈出
// $('.modal').modal();
</script>
</body>
</html>
超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習地址
歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。