Bootstrap 격자 시스템 사용 상세 설명

앞.  말.
Bootstrap 은 HTML,CSS,JAVASCRIPT 를 바탕 으로 간결 하고 유연 하 며 웹 개발 을 더욱 빠르게 한다.
그리고 격자 시스템 은 Bootstrap 의 핵심 입 니 다.바로 격자 시스템 이 존재 하기 때문에 Bootstrap 은 이렇게 강력 한 응답 식 레이아웃 방안 을 가 질 수 있 습 니 다.
1.격자 시스템 이 무엇 입 니까?
공식 문서 에서 이렇게 말 했다.
Bootstrap 은 응답 식,모 바 일 장치 우선 스 트림 격자 시스템 을 제공 합 니 다.화면 이나 뷰 포트(viewport)크기 가 증가 함 에 따라 시스템 은 자동 으로 최대 12 열 로 나 눌 수 있 습 니 다.간단 한 레이아웃 옵션 에 사용 할 미리 정 의 된 클래스 도 포함 되 어 있 으 며,더 많은 의미 레이아웃 을 만 드 는 기능 이 강 한 혼합 클래스 도 포함 되 어 있 습 니 다.
이 말 을 이해 해 보면 가장 중요 한 부분 은 모 바 일 기기 가 우선 이라는 것 을 알 수 있다.그렇다면 모 바 일 기기 가 우선 하 는 것 은 무엇 일 까?
Bootstrap 의 기본 CSS 코드 는 기본적으로 작은 화면 장치(예 를 들 어 모 바 일 장치,태 블 릿 PC)에서 시작 한 다음 에 미디어 조 회 를 사용 하여 대형 화면 장치(예 를 들 어 노트북,데스크 톱 컴퓨터)의 구성 요소 와 격자 로 확장 합 니 다.
다음 과 같은 전략 이 있 습 니 다.
내용:무엇이 가장 중요 한 지 결정 합 니 다.
레이아웃:더 작은 폭 을 우선 설계 합 니 다.
점진 적 강화:화면 크기 가 증가 함 에 따라 요 소 를 추가 합 니 다.
2.작업 원리
 격자 시스템 은 일련의 줄(row)과 열(column)의 조합 을 통 해 페이지 레이아웃 을 만 드 는 데 사 용 됩 니 다.만 든 레이아웃 에 내용 을 넣 을 수 있 습 니 다.
작업 원 리 는 다음 과 같다.
'행(row)'은.container(고정 너비)나.container-fluid(100%너비)에 포함 되 어야 합 니 다.적당 한 배열(aligment)과 내 보(padding)를 부여 할 수 있 습 니 다.

<div class="container"><!--     ，   margin，     ，      -->
 <div class="row"></div>
</div>
<!--    -->
<div class="container-fluid"><!--             -->
 <div class="row"></div>
</div>

'행(row)'을 통 해 수평 방향 으로'열(column)'그룹 을 만 듭 니 다.그러나 열의 합 은 평 점 을 초과 할 수 없 는 총 열 수(초과 할 때 나머지 부분 은 줄 을 바 꾸 어 표시 합 니 다),기본 값 은 12 입 니 다.(Less 나 Sass 를 사용 하여 사용자 정의 설정 을 할 수 있 습 니 다).다음 과 같 습 니 다.

<div class="container">
 <div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-6"></div>
  <div class="col-md-4"></div>
 </div>
</div>

당신 의 내용 은'열(column)'에 놓 아야 하 며,'열(column)'만 줄(row)의 직접 하위 요소 로 사용 할 수 있 습 니 다.
.row 와.col-xs-4 와 같은 미리 정 의 된 클래스 는 격자 레이아웃 을 빠르게 만 들 수 있 습 니 다.Bootstrap 소스 코드 에서 정 의 된 mixin 도 의미 화 된 레이아웃 을 만 드 는 데 사용 할 수 있 습 니 다.
'열(column)'에 padding 속성 을 설정 하여 열 과 열 사이 의 간격(gutter)을 만 듭 니 다.'row 요소 에 마이너스 margin 을 설정 함으로써'container 요소 로 설 정 된 padding'을 상쇄 하고'행(row)'에 포 함 된'열(column)'을 간접 적 으로 상쇄 합 니 다.
마이너스 의 margin 은 바로 아래 의 예제 가 왜 밖으로 튀 어 나 온 원인 입 니까?격자 열 에 있 는 내용 을 한 줄 로 배열 하 다.
격자 시스템 의 열 은 1 에서 12 의 값 을 지정 하여 뛰 어 넘 는 범 위 를 나타 낸다.예 를 들 어 세 개의 등 폭 열 은 세 개의.col-xs-4 를 사용 하여 만 들 수 있다.
'행(row)'에 포 함 된'열(column)'이 12 보다 크 면 나머지'열(column)'이 있 는 요 소 는 전체 다른 줄 로 배 열 됩 니 다.
격자 류 는 화면 너비 가 크 거나 경계 점 크기 와 같은 장치 에 적합 하 며 작은 화면 장치 에 격자 류 를 덮어 씁 니 다.따라서 요소 에 있어 서 모든.col-md-*격자 류 는 화면 너비 가 크 거나 분계 점 크기 와 같은 장치 에 적용 되 고 작은 화면 장치 에 격자 류 를 덮어 씁 니 다.따라서 요소 에 어떠한.col-lg-*도 존재 하지 않 고 스크린 장치 에 도 영향 을 줍 니 다.
2.1 미디어 조회
 격자 시스템 에서,우 리 는 Less 파일 에서 다음 미디어 조회(media query)를 사용 하여 관건 적 인 경계 점 한도 값 을 만 듭 니 다.

/*     （  ，   768px） */
/*              ，     Bootstrap      （    Bootstrap          ？） */
/*    （  ，     768px） */
@media (min-width: @screen-sm-min) { ... }
/*     （     ，     992px） */
@media (min-width: @screen-md-min) { ... }
/*    （      ，     1200px） */
@media (min-width: @screen-lg-min) { ... }

 저 희 는 가끔 미디어 조회 코드 에 max-width 를 포함 하여 CSS 의 영향 을 더 작은 범위 의 화면 크기 로 제한 합 니 다.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... } 

2.2 기본 용법
 천만 마디 말 보다 직접 그림 을 그 리 는 것 이 낫다.

다음 표를 통 해 Bootstrap 의 격자 시스템 이 어떻게 다양한 스크린 장치 에서 작 동 하 는 지 자세히 볼 수 있 습 니 다.사용 방법 은 더 이상 말 할 필요 가 없 을 것 같 습 니 다.다음은 실례 를 좀 봅 시다.
이 방식 은 가장 기본 적 인 용법 이다.

<div class="container">
 <div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
 </div>
 <div class="row">
  <div class="col-md-2">.col-md-2</div>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-4">.col-md-4</div>
 </div>
</div>

Bootstrap 은 응답 식 프레임 워 크 로 서 당연히 그렇게 간단 한 기능 만 있 는 것 은 아 닙 니 다.계속 하 겠 습 니 다.
2.3 응답 열 초기 화
 제 시 된 격자 class 가 있 더 라 도 일부 문제 에 부 딪 힐 수 있 습 니 다.예 를 들 어 특정한 한도 값 이 있 을 때 어떤 열 은 다른 열 보다 높 은 상황 이 발생 할 수 있 습 니 다.이 문 제 를 극복 하기 위해 서 는.clearfix 와 응답 식 도구 류 를 공동으로 사용 하 는 것 을 권장 합 니 다.

<div class="row">
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <!-- Add the extra clearfix for only the required viewport -->
 <div class="clearfix visible-xs-block"></div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

분계 점 에서 응답 을 지 우 는 것 을 제외 하고 오프셋 을 리 셋 하거나 뒤로 밀 거나 앞으로 끌 어 당 겨 야 할 수도 있 습 니 다.이 격자 실례 를 보십시오.

<div class="row">
 <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
 <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
 <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
 <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

2.4 열 오프셋 
어떤 경우 에 우 리 는 인접 한 열 이 서로 붙 어 있 는 것 을 원 하지 않 습 니 다.만약 에 추가 적 인 margin 이나 다른 수단 을 통 해 이 루어 지지 않 기 를 원한 다 면 Bootstrap 내장 은 우리 에 게 열 오프셋(offset)을 제공 합 니 다.이런 일련의 유형 은 우리 가 원 하 는 효 과 를 실현 하 는 데 도움 을 줍 니 다.
오프셋 이 필요 한 열 요소 에 클래스 이름 col-md-offset-*(별표 대표 가 오프셋 할 열 조합 수)를 추가 하면 이 클래스 이름 을 가 진 열 은 오른쪽으로 이동 합 니 다.
이러한 종 류 는 실제 적 으로*선택 기 를 사용 하여 현재 요소 에 왼쪽 여백(margin)을 추가 합 니 다.예 를 들 어 열 요소 에.col-md-offset-6 종 류 를 추가 하여.col-md-6 요 소 를 오른쪽으로 6 개의 열(column)의 폭 을 옮 겼 습 니 다.

<div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

2.5 열 내장
 Bootstrap 프레임 워 크 의 격자 시스템 은 열의 끼 워 넣 기 를 지원 합 니 다.한 열 에 하나 이상 의 줄(row)용 기 를 추가 한 다음 이 줄 용기 에 열 을 삽입 할 수 있 습 니 다.그러나 열 용기 에 있 는 줄 용기(row),너비 가 100%일 때 현재 외부 열의 너비 입 니 다.

<div class="row">
 <div class="col-sm-9">
 Level 1: .col-sm-9
 <div class="row">
  <div class="col-xs-8 col-sm-6">
  Level 2: .col-xs-8 .col-sm-6
  </div>
  <div class="col-xs-4 col-sm-6">
  Level 2: .col-xs-4 .col-sm-6
  </div>
 </div>
 </div>
</div>

2.6 열 정렬
 열 정렬 은 열의 방향(순서)을 바 꾸 는 것 이다.좌우 로 움 직 이 고 움 직 이 는 거 리 를 설정 하 는 것 이다.Bootstrap 프레임 워 크 의 격자 시스템 에 서 는 클래스 이름 col-md-push-*와 col-md-pull-*를 추가 합 니 다.

<div class="row">
 <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
 <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

 

총결산
위 에서 말 한 것 은 소 편 이 소개 한 Bootstrap 격자 시스템 의 사용 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!