grid 이해

부트스트랩을 기본 프레임워크로 사용하려면 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 사이즈를 참고 하시기 바랍니다.

	/*
	////////////////////////// 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
	*/

view raw media.css hosted with ❤ by GitHub

grid 관련해서는 zeein-yellow 테마 제작하면서 계속 나오는 부분이기 때문에 간단히 설명하고 반복되는 설명 위주와 부트스트랩 사이트를 반드시 먼저 숙지 하시고 계속 코딩을 이어가시기 바랍니다.

zeein