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

부트 스트랩 그리드 시스템

· 8년 전 · 2496

부트 스트랩 그리드 시스템

부트 스트랩의 그리드 시스템은 페이지 전체에 최대 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 개가되어야합니다.

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


댓글 작성

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

로그인하기

게시글 목록

번호 제목
2952
2951
2950
2949
2948
2947
2946
2945
2944
2943
2942
2941
2940
2939
2938
2937
2936
2935
2934
2933
2932
2931
2930
2929
2928
2927
2926
2925
2924
2923