부트스트랩을 기본 프레임워크로 사용하려면 grid를 이해 하고 넘어가야 이후 레이아웃 구상 할 떄 쉽게 화면 구성을 하실 수 있습니다.
부트스트랩은 12개의 컬럼 시스템 구조로 되어 있고 화면 사이즈에 따라 5개의 breakpoints 를 가지고 있습니다.
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Nestable | Yes | ||||
Column ordering | Yes |
breakpoints 와 연계하여 css 스타일로 레이아웃 잡으실때 아래 media 사이즈를 참고 하시기 바랍니다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
////////////////////////// mobile first | |
// Extra small devices (portrait phones, less than 576px) | |
// No media query since this is the default in Bootstrap | |
// Small devices (landscape phones, 576px and up) | |
@media (min-width: 576px) { ... } | |
// Medium devices (tablets, 768px and up) | |
@media (min-width: 768px) { ... } | |
// Large devices (desktops, 992px and up) | |
@media (min-width: 992px) { ... } | |
// Extra large devices (large desktops, 1200px and up) | |
@media (min-width: 1200px) { ... } | |
////////////////////////// pc first | |
// Extra small devices (portrait phones, less than 576px) | |
@media (max-width: 575px) { ... } | |
// Small devices (landscape phones, less than 768px) | |
@media (max-width: 767px) { ... } | |
// Medium devices (tablets, less than 992px) | |
@media (max-width: 991px) { ... } | |
// Large devices (desktops, less than 1200px) | |
@media (max-width: 1199px) { ... } | |
// Extra large devices (large desktops) | |
// No media query since the extra-large breakpoint has no upper bound on its width | |
*/ |
grid 관련해서는 zeein-yellow 테마 제작하면서 계속 나오는 부분이기 때문에 간단히 설명하고 반복되는 설명 위주와 부트스트랩 사이트를 반드시 먼저 숙지 하시고 계속 코딩을 이어가시기 바랍니다.