row - col 중첩
로그인 구역에 로그인메뉴 만들기
<div class="right col-sm-3 order-1 order-sm-2">
<!--col 안에 다시 row로 중첩 가능-->
<div class="row">
<div class="col-sm-12 ">
<input type="text" placeholder="Input your id" style="width: 100%" >
</div>
</div>
<div class="row">
<div class="col-sm-12 ">
<input type="password" placeholder="Input your pw" style="width: 100%">
</div>
</div>
<div class="row">
<div class="col-sm-6 "><a href="#">SignIn</a></div>
<div class="col-sm-6"><a href="#">SignUp</a></div>
</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
*{box-sizing: border-box;
}
div{border: 1px solid black;
/* text-align: center;*/
}
</style>
</head>
<body>
<!--bootstrap에서 높이값을 미리 정해놓으면 충돌, 높이는 들어가는 내용 사이즈에 맞춰지도록-->
<div class="container">
<div class="row">
<div class="logo col-sm-2">
Logo
</div>
<div class="title col-sm-8">
Title
</div>
<div class="reserved col-sm-2 d-none d-sm-block">
Reserved
</div>
</div>
<div class="row">
<div class="navi col-sm-12">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">navi</a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About us</a>
<a class="nav-item nav-link" href="#">Portfolio</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Contact</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="left col-sm-2 d-none d-sm-block">
Banner
</div>
<div class="left col-sm-7 order-2 order-sm-1">
Contents
</div>
<div class="right col-sm-3 order-1 order-sm-2">
<!--col 안에 다시 row로 중첩 가능-->
<div class="row">
<div class="col-sm-12 ">
<input type="text" placeholder="Input your id" style="width: 100%" >
</div>
</div>
<div class="row">
<div class="col-sm-12 ">
<input type="password" placeholder="Input your pw" style="width: 100%">
</div>
</div>
<div class="row">
<div class="col-sm-6 "><a href="#">SignIn</a></div>
<div class="col-sm-6"><a href="#">SignUp</a></div>
</div>
</div>
</div>
<div class="row">
<div class="footer col-sm-12">
Footer
</div>
</div>
</div>
</body>
</html>타이틀 이미지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
*{box-sizing: border-box;
}
div{
border: 1px solid black;
}
</style>
</head>
<body>
<!--bootstrap에서 높이값을 미리 정해놓으면 충돌, 높이는 들어가는 내용 사이즈에 맞춰지도록-->
<div class="container">
<div class="row">
<div class="logo col-sm-2">
Logo
</div>
<div class="title col-sm-8 text-center">
<img src="%EB%B9%8C%EB%93%9C%EC%9D%B4%EB%AF%B8%EC%A7%80.png" style="width: 100%">
</div>
<div class="reserved col-sm-2 d-none d-sm-block">
Reserved
</div>
</div>
<div class="row">
<div class="navi col-sm-12">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- <a class="navbar-brand" href="#">navi</a>-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About us</a>
<a class="nav-item nav-link" href="#">Portfolio</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Contact</a>
</div>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="left col-sm-2 d-none d-sm-block">
Banner
</div>
<div class="left col-sm-7 order-2 order-sm-1">
Contents
</div>
<div class="right col-sm-3 order-1 order-sm-2">
<!--col 안에 다시 row로 중첩 가능-->
<div class="row">
<div class="col-sm ">
<input type="text" placeholder="Input your id" style="width: 100%" >
</div>
</div>
<div class="row">
<div class="col-sm ">
<input type="password" placeholder="Input your pw" style="width: 100%">
</div>
</div>
<div class="row">
<div class="col-sm-6 "><a href="#">SignIn</a></div>
<div class="col-sm-6 "><a href="#">SignUp</a></div>
</div>
</div>
</div>
<div class="row">
<div class="footer col-sm-12">
Footer
</div>
</div>
</div>
</body>
</html>
'디지털 컨버전스 > Java Script' 카테고리의 다른 글
| [Bootstrap4] 퀴즈 - Cake Gallery (0) | 2020.04.09 |
|---|---|
| [Bootstrap4] 퀴즈 - 반응형 게시판 디자인 (0) | 2020.04.09 |
| [Bootstrap4] Layout : order , d-none (0) | 2020.04.09 |
| [Bootstrap4] Jumbotron (0) | 2020.04.09 |
| [Bootstrap4] Layout : Containers (0) | 2020.04.09 |