1-3. 그리드 시스템
■ 부트스트랩 그리드 시스템
부트스트랩의 그리드 시스템은 가변 박스인 플렉스박스(flexbox)와 12 열 그리드를 사용합니다.
< div class=" container-sm mt-3" >
< h3> 부트스트랩 그리드 시스템< /h3>
< div class=" row text-center" >
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< div class=" col-1 p-2 border" > 열< /div>
< /div>
< div class=" row text-center" >
< div class=" col-6 p-2 border" > 열< /div>
< div class=" col-6 p-2 border" > 열< /div>
< /div>
< div class=" row text-center" >
< div class=" col-4 p-2 border" > 열< /div>
< div class=" col-4 p-2 border" > 열< /div>
< div class=" col-4 p-2 border" > 열< /div>
< /div>
< div class=" row text-center" >
< div class=" col-3 p-2 border" > 열< /div>
< div class=" col-3 p-2 border" > 열< /div>
< div class=" col-3 p-2 border" > 열< /div>
< div class=" col-3 p-2 border" > 열< /div>
< /div>
< div class=" row text-center" >
< div class=" col-2 p-2 border" > 열< /div>
< div class=" col-2 p-2 border" > 열< /div>
< div class=" col-2 p-2 border" > 열< /div>
< div class=" col-2 p-2 border" > 열< /div>
< div class=" col-2 p-2 border" > 열< /div>
< div class=" col-2 p-2 border" > 열< /div>
< /div>
< div class=" row text-center" >
< div class=" col-4 p-2 border" > 열< /div>
< div class=" col-8 p-2 border" > 열< /div>
< /div>
< div class=" row text-center" >
< div class=" col-9 p-2 border" > 열< /div>
< div class=" col-3 p-2 border" > 열< /div>
< /div>
< /div>
ex1-6.html의 실행 결과
새 창에서 보기
위의 브라우저 결과를 보면 각 열의 합이 12가 되어야 함을 알 수 있습니다. 경우에 따라서는 12 열 미만을 사용할 수도 있습니다.
■ 동일 너비의 3 열
< div class=" container-sm mt-3" >
< h3> 동일한 열 너비< /h3>
< div class=" row text-center" >
< div class=" col p-3 border bg-light" > 열< /div>
< div class=" col p-3 border bg-light" > 열< /div>
< div class=" col p-3 border bg-light" > 열< /div>
< /div>
< /div>
ex1-7.html의 실행 결과
새 창에서 보기
■ 반응형 열 : col-sm-, col-lg-, col-xxl-
< div class=" container-xxl mt-3" >
< h3> col-xxl-3< /h3>
< div class=" row text-center" >
< div class=" col-xxl-3 p-2 border bg-light" > 열< /div>
< div class=" col-xxl-3 p-2 border bg-light" > 열< /div>
< div class=" col-xxl-3 p-2 border bg-light" > 열< /div>
< div class=" col-xxl-3 p-2 border bg-light" > 열< /div>
< /div>
< h3 class=" mt-4" > col-lg-3< /h3>
< div class=" row text-center" >
< div class=" col-lg-3 p-2 border bg-light" > 열< /div>
< div class=" col-lg-3 p-2 border bg-light" > 열< /div>
< div class=" col-lg-3 p-2 border bg-light" > 열< /div>
< div class=" col-lg-3 p-2 border bg-light" > 열< /div>
< /div>
< h3 class=" mt-4" > col-sm-3< /h3>
< div class=" row text-center" >
< div class=" col-sm-3 p-2 border bg-light" > 열< /div>
< div class=" col-sm-3 p-2 border bg-light" > 열< /div>
< div class=" col-sm-3 p-2 border bg-light" > 열< /div>
< div class=" col-sm-3 p-2 border bg-light" > 열< /div>
< /div>
< /div>
ex1-8.html의 실행 결과
새 창에서 보기
■ 반응형 열 사용 예
< div class=" container-xxl mt-3" >
< h3 class=" mt-4" > 부트스트랩의 특징< /h3>
< div class=" row" >
< p class=" col-sm-4 p-3 border" > 부트스트랩은 웹사이트의 디자인 요소가 화면
< /p>
< p class=" col-sm-4 p-3 border" > 부트스트랩은 웹사이트의 디자인 요소가 화면
< /p>
< p class=" col-sm-4 p-3 border" > 부트스트랩은 웹사이트의 디자인 요소가 화면
< /p>
< /div>
< h3 class=" mt-5" > 부트스트랩의 특징< /h3>
< div class=" row" >
< div class=" col-sm-4 p-3 border" > 부트스트랩은 웹사이트의 디자인 요소가 화면
< /div>
< div class=" col-sm-4 p-3 border" > 부트스트랩은 웹사이트의 디자인 요소가 화면
< /div>
< div class=" col-sm-4 p-3 border" > 부트스트랩은 웹사이트의 디자인 요소가 화면
< /div>
< /div>
< /div>
ex1-9.html의 실행 결과
새 창에서 보기
위의 결과에서 브라우저의 창의 너비를 최소로 해보면 부트스트랩에서는 p 요소에는 기본 하단 마진(mb)이 사용됨을 알 수 있습니다.
