3. 부트스트랩 grid system

부트스트랩은 모바일 우선 플렉서블박스 그리드를 사용한다.

(mobile-first flexbox)

 

wrap인 .container 내부에 마치 테이블을 만들듯이 사용한다.

.container를 table로 생각하고

.container 내부에 .row로 만들고 .row 내부에 .col을 만들면 된다. 아주 쉽다.

 

.col도 .container와 마찬가지로 미디어커리를 사용해 breakpoint를 만들어놨다.

.container는 breakpoint를 만나면 픽셀에 맞춰 커지지만 .col은 최대 너비가 제한된다.

 

강제로 하나의 row에서 줄바꿈 .w-100

 

한 줄에는 총 12개의 플렉스 항목이 들어갈수 있다. 

.col-1~12까지 설정가능하고 1이면 한줄에 1/12 자리만큼 차지한다.

auto도 가능한데 column 내부 콘텐츠 크기에 맞춘다.

 

class="col-6 col-md-4" 이런식으로 섞어서 사용한다면

md 768px을 보다 크면 col-4로 작동하고 작으면 col-6으로 작동한다.

 

패딩, 마진 주는법 px-lg-5 py-lg-5 mx-lg-n5 offset-md-4

px는 pl+pr로 패딩레프트, 패딩라이트를 합친거다.

py는 pt+pb로 패딩탑, 패딩바텀을 합쳤다.

offset은 왼쪽 n/12 만큼 띄우는 기능

5는 3rem 값이다.

n5는 -3rem

 

한 row당 column수 정하기 row row-cols-2

"row row-cols-1 row-cols-sm-2 row-cols-md-4"도 가능

 

.order-1.order-md-2

vertical alignment

row는 플렉스 컨테이너이고 col은 플렉스 항목이므로

row

align-items-start

align-items-center

align-items-end

col

align-self-start

align-self-center

align-self-end

horizontal alignment

 

플렉스 컨테이너 정렬법이므로 row에 사용

justify-content-start

justify-content-center

justify-content-end

justify-content-around

justify-content-between