728x90
728x90
부트스트랩 클래스 container vs. container-fluid
화면 사이즈가 모바일 사이즈로 가면 container 클래스는 container-fluid 처럼 변한다. 부트스트랩의 클래스 container 안에 다른 container 클래스를 사용할 수 없다.
부트스트랩 Grid layout
총 12개의 칼럼을 쪼갠다고 보면 된다. 분류는 대형모니터, 일반, 태블릿, 핸드폰 정도로 나뉜다. 문법은 아래 표와 같이 쓰인다. 부트스트랩의 그리드 시스템에서는 화면사이즈가 작을때(모바일) 우선적으로 적용이 되고 설정한 화면 사이즈 이상일때 원하는 비율로 표시된다.
실습하기 1
<style>
body{
background: aqua;
}
@media screen and (min-width:576px){
body{
background: red;
}
}
@media screen and (min-width:768px){
body{
background: blue;
}
}
@media screen and (min-width:992px){
body{
background: green;
}
}
@media screen and (min-width:1200px){
body{
background: yellow;
}
}
</style>
실습하기 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>부트스트랩 시작</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body{
background: aqua;
}
@media screen and (min-width:576px){
body{
background: red;
}
}
@media screen and (min-width:768px){
body{
background: blue;
}
}
@media screen and (min-width:992px){
body{
background: green;
}
}
@media screen and (min-width:1200px){
body{
background: yellow;
}
}
</style>
</head>
<body>
<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<div class="container">
<div class="row"> 한줄
<div class="col-sm-3 col-md-5" style="background: #cff">content1</div>
<div class="col-sm-3 col-md-1 bg-danger">I am single column</div>
<div class="col-sm-3 col-md-5" style="background: #cff">content1</div>
<div class="col-sm-3 col-md-1 bg-danger">I am single column</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col bg-info">I am single column</div>
<div class="col bg-warning">I am single column</div>
<div class="col bg-dark">I am single column</div>
<div class="col bg-danger">I am single column</div>
</div>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-2" style="background:#CFF">Lorem ipsum dolor</div>
<div class="col-sm-6 col-md-3 col-lg-2" style="background:#9FC">Lorem ipsum dolor</div>
<div class="col-sm-6 col-md-3 col-lg-2" style="background:#CFF">Lorem ipsum dolor</div>
<div class="col-sm-6 col-md-3 col-lg-2" style="background:#9FC">Lorem ipsum dolor</div>
</div>
</div>728x90
728x90
'Frameworks > Bootstrap' 카테고리의 다른 글
| 부트스트랩 (6) 점보트론과 버튼 스타일 (0) | 2019.07.05 |
|---|---|
| 부트스트랩 (5) 테이블 (0) | 2019.07.05 |
| 부트스트랩 (4) margin, padding, flex (1) | 2019.07.03 |
| 부트스트랩 (2) 텍스트 서식(Typography)과 색(Colors) (0) | 2019.07.03 |
| 부트스트랩 (1) 유래와 정의, 설치하기 (0) | 2019.07.03 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
