티스토리 뷰

Bootstrap4

[Bootstrap] 레이아웃 / container 클래스

에스파니아 2020. 3. 28. 16:46
728x90
반응형

 

.
container 클래스

부트스트랩에서 가장 기본적인 레이아웃 엘리먼트
중앙으로 위치
breakpoint에 따라 width 값이 변경 됨
부트스트랩의 기본 그리드 시스템을 이용할 때 필요
기본 그리드 시스템은 엘리먼트로써 container, row column 으로 순차적으로 구성
col은 12개로 나누어 크기를 지정
하나의 row 안에 들어가는 엘리먼트의 클래스를 col-숫자로 나우어 합이 12가 되도록 함.

-> row는 가로 방향의 열을 의미 ,column은 세로 방향의 단을 의미

* 어떤 엘리먼트의 가장 외각의 가장 큰 틀

 

.
breakpoint

브라우저의 최소 폭 값 (min-width) 값을 부트스트랩에서는 break point라고 한다.

breakpoint 에 따라 element의 max-width 값이 정해져 있다.(xl, lg, md, xs)

 

.
container-fluid 클래스

브라우저 화면 폭을 전부 사용
break point 에 상관없이 항상 max-width 100%로 되어 있음
컨테이너 속에 작은 엘리먼트 들을 만들어야 함.
이때는, 반드시 row 라고 하는 클래스 값을 가진 div 엘리먼트가 필요

 

 

 

참고





728x90
댓글
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2026/01   »
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함