그리드는 사람들이 부트스트랩을 이용하는 가장 큰 이유이다.
그리드 시스템(Grid System)이란 페이지의 정보를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 디자인 시스템을 말한다.
배운 것
-
부트스트랩3에서 Grid는 기본적으로 12개의 열로 분할하여 이용된다.
-
col-lg-* 형태의 클래스로 구분한다.
-
예를 들어 col-lg-4가 3개이면 4*3=12 이므로 한줄로 표현 가능하다.
-
4개로 분할한 후 분할한 것 중 하나를 또 하나의 행을 만들어 분할 가능하다
-
예시
<div class="row"> <div class="col-md-3 col-sm-6 pink"> <div class="row"> <div class="col-lg-6 orange">FIRST HALF</div> <div class="col-lg-6 orange">OTHER HALF</div> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 pink">TOUR DATE!</div> <div class="col-lg-3 col-md-3 col-sm-6 pink">TOUR DATE!</div> <div class="col-lg-3 col-md-3 col-sm-6 pink">
-
-
초소형,소형,중간,대형 4가지 단계의 뷰가 존재하는데 각 크기마다 보여지는 모습을 다르게 할 수 있다. 예를 들어 가장클 때는 한줄에 4개, 작을 때는 2개, 가장 작을 때는 1개 만 보여주는 방식이다.
-
예시 코드
화면크기마다 배치를 다르게 설정해주었다.
-
-
한 행마다 12개의 열이 배치되어있다는 것만 알고 있다면 배치할 때 편리하게 이용할 수 있을 것 같다.
-
초소형 (스마트 폰용
.col-xs-*) -
소형 (태블릿 용
.col-sm-*) -
중간 (노트북 용
.col-md-*) -
대형 (노트북 / 데스크톱 용
.col-lg-*).
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grid</title>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<style>
.pink{
background: pink;
border: 1px solid purple;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 pink">COL-lg-4</div>
<div class="col-lg-4 pink">COL-lg-4</div>
<div class="col-lg-4 pink">COL-lg-4</div>
</div>
</div>
</body>
</html>실행결과
'IT > WEB' 카테고리의 다른 글
| [Bootstrap] 부트스트랩 프로젝트 시작하기(버전3) (0) | 2020.10.07 |
|---|---|
| [CSS] Image 갤러리 만들기 실습 (0) | 2020.10.07 |
| [CSS]Box Model,실습 (1) | 2020.10.07 |
| [CSS] 셀렉터 기초 (0) | 2020.10.07 |
| [HTML] 간단한 회원가입 양식 만들기 (0) | 2020.10.06 |
