테스트 사이트 - 개발 중인 베타 버전입니다

부트 스트랩 그리드 시스템

부트 스트랩 그리드 시스템

부트 스트랩의 그리드 시스템은 페이지 전체에 최대 12 개의 컬럼을 허용합니다.

12 개의 열을 모두 개별적으로 사용하지 않으려면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.

스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1스팬 1
 기간 4 기간 4 기간 4
기간 4스팬 8
기간 6기간 6
스팬 12

부트 스트랩의 그리드 시스템이 반응하며 화면 크기에 따라 열이 자동으로 재 배열됩니다.


그리드 클래스

부트 스트랩 그리드 시스템에는 네 가지 클래스가 있습니다.

  • xs (전화 용)
  • sm (태블릿 용)
  • md (데스크톱 용)
  • lg (대형 데스크탑의 경우)

위의 클래스를 결합하여보다 동적이고 유연한 레이아웃을 만들 수 있습니다.


부트 스트랩 그리드의 기본 구조

다음은 부트 스트랩 그리드의 기본 구조입니다.

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

먼저; 행 ( <div class="row">)을 만듭니다 그런 다음 원하는 수의 열 (적절한 .col-*-*클래스가있는 태그)을 추가하십시오 에있는 숫자는 .col-*-*각 행에 대해 항상 최대 12 개가되어야합니다.

아래에서는 기본적인 부트 스트랩 그리드 레이아웃 예제를 수집했습니다.


댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3056
3055
3054
3051
3050
3049
3046
3045
3044
3043
3042
3041
3040
3039
3038
3034
3033
3032
3027
3026
3025
3024
3023
3022
3021
3020
3019
3018
3017
3016