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

부트 스트랩 그리드 시스템

· 8년 전 · 2495

부트 스트랩 그리드 시스템

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

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


댓글 작성

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

로그인하기

게시글 목록

번호 제목
2982
2981
2980
2979
2978
2977
2976
2975
2974
2973
2972
2971
2970
2969
2968
2967
2966
2965
2964
2963
2962
2961
2960
2959
2958
2957
2956
2955
2954
2953