학습 노트 4 - boottstrap 의 격자 시스템

(기타: 열 오프셋, 열 내장, 열 정렬 등 문 제 는 boottstrap 중국어 홈 페이지 의 css 스타일 의 격자 시스템 을 참조 합 니 다)
관련 링크: http://v3.bootcss.com/css/#grid
1. Bootstrap 은 응답 식, 모 바 일 장치 우선 스 트림 격자 시스템 을 제공 합 니 다. 화면 이나 뷰 포트 (viewport) 크기 가 증가 함 에 따라 시스템 은 자동 으로 최대 12 열 로 나 눌 수 있 습 니 다.
2. 격자 시스템 은 일련의 줄 (row) 과 열 (column) 의 조합 을 통 해 페이지 레이아웃 을 만 드 는 데 사 용 됩 니 다. 만 든 레이아웃 에 내용 을 넣 을 수 있 습 니 다.
3. Bootstrap 격자 시스템 의 작업 원리:
"줄 (row)"은 반드시 포함 되 어야 합 니 다.  .container  (고정 너비) 또는  .container-fluid  (100% 너비) 에서 적당 한 배열 (aligment) 과 내 보 (padding) 을 부여 할 수 있 습 니 다.
'행 (row)' 을 통 해 수평 방향 으로 '열 (column)' 그룹 을 만 듭 니 다.
당신 의 내용 은 '열 (column)' 에 놓 아야 하 며, '열 (column)' 만 줄 (row) 의 직접 하위 요소 로 사용 할 수 있 습 니 다.
유사 하 다  .row  화해시키다  .col-xs-4  미리 정 의 된 클래스 는 격자 레이아웃 을 빠르게 만 드 는 데 사용 할 수 있 습 니 다.Bootstrap 소스 코드 에서 정 의 된 mixin 도 의미 화 된 레이아웃 을 만 드 는 데 사용 할 수 있 습 니 다.
'열 (column)' 설정 을 통 해  padding  속성 으로 열 과 열 사이 의 간격 (gutter) 을 만 듭 니 다.통과 하 다  .row  원소 설정 마이너스 margin 상쇄 하 다  .container  요소 설정 의  padding 도 간접 적 으로 '행 (row)' 에 포 함 된 '열 (column)' 을 상쇄 했다 padding.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three  .col-xs-4 .
'행 (row)' 에 포 함 된 '열 (column)' 이 12 보다 크 면 나머지 '열 (column)' 이 있 는 요 소 는 전체 다른 줄 로 배 열 됩 니 다.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any  .col-md-  class to an element will not only affect its styling on medium devices but also on large devices if a  .col-lg-  class is not present.
4. 미디어 조회:
  1) 미디어 조 회 는 특정한 조건 을 바탕 으로 하 는 CSS 에 만 적 용 됩 니 다.그 조건 을 충족 시 키 면 해당 스타일 을 적용 한다.
격자 시스템 에서, 우 리 는 Less 파일 에서 다음 미디어 조회 (media query) 를 사용 하여 관건 적 인 경계 점 한도 값 을 만 듭 니 다.

/*     （  ，   768px） */
/* Bootstrap              */

/*    （  ，     768px） */
@media (min-width: @screen-sm-min) { ... }
  
/*     （     ，     992px） */
@media (min-width: @screen-md-min) { ... }
  
/*    （      ，     1200px） */
@media (min-width: @screen-lg-min) { ... }
  
2) 
저희 도 가끔 미디어 조회 코드 에 포 함 됩 니 다.  max-width  따라서 CSS 의 영향 을 더 작은 범위 의 화면 크기 로 제한 합 니 다.
미디어 조 회 는 두 가지 부분 이 있 는데 먼저 장치 규범 이 고 그 다음 에 크기 규칙 이다.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }  //       min-width: @screen-sm-min    ,             @screen-sm-max，        。
 
 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
  
 
 
3)Bootstrap                    。
  
  
  
  

   
   
   
   
 
    
 
     
 
      
 
 
      
        (<768px)
 
      
       (≥768px)
 
      
           (≥992px)
 
      
           (≥1200px)
 
     
 
    
 
    
 
     
 
      
      
 
      
      
 
      
         ，               C
 
     
 
     
 
      
.container     
 
      
None （  ）
 
      
750px
 
      
970px
 
      
1170px
 
     
 
     
 
      
   
 
      
.col-xs-
 
      
.col-sm-
 
      
.col-md-
 
      
.col-lg-
 
     
 
     
 
      
 （column） 
 
      
12
 
     
 
     
 
      
   （column） 
 
      
  
 
      
~62px
 
      
~81px
 
      
~97px
 
     
 
     
 
      
 （gutter） 
 
      
30px （       15px）
 
     
 
     
 
      
   
 
      
 
 
     
 
     
 
      
  （Offsets）
 
      
 
 
     
 
     
 
      
   
 
      
 
 
     
 
    
 
   
4)
   
   
   
       Bootstrap        ：
  
  
  
  
  
  
  
  

   
   
   
   
<!----  div    12       ----> 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
 
<!---   8 ，     --->
<div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div>
 
<!---      ，  4   -->
<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-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
 
 
   
   
   
   5）      ：.container-fluid
  
  
  
   와  
  
  
  
  

   
   
   
   
   
   
   
    
<div class="container-fluid"> //         .container    .container-fluid                 100%     。 <div class="row"> ... </div> </div> 
 
   
   
   
   6)
   
   
   
            
  
  
  
  
  
  
  
  

   
   
   
                      ， .col-xs-* .구체 적 인 실례 는 다음 과 같다.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
.col-xs-12 .col-md-8 
.col-xs-6 .col-md-4 
.col-xs-6 .col-md-4 
.col-xs-6 .col-md-4 
.col-xs-6 .col-md-4 
.col-xs-6 
.col-xs-6 
미디어 조 회 는 두 가지 부분 이 있 는데 먼저 장치 규범 이 고 그 다음 에 크기 규칙 이다.