부트스트랩 래스터 분석

Center(컨테이너)

1. Center: 클래스 이름이 .container인 컨테이너입니다. 컨테이너의 너비는 각 화면 장치마다 다른 값을 갖습니다. 컨테이너 양쪽에 공백이 있습니다.
   각 크기의 중앙 너비는 다음과 같습니다.

   screen device	center width
   max-width:768px	xs는 상위 요소의 너비를 상속합니다(예: 너비:100%).
   최소 너비:768px	sm 750px
   최소 너비:992px	md 970px
   최소 너비:1200px	lg 1170px

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}@media (min-width: 768px) {
  .container {
    width: 750px;
  }}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

1. 화면 너비에 관계없이 컨테이너.컨테이너에는 콘텐츠가 브라우저 가장자리에 직접 닿는 것을 방지하기 위해 항상 왼쪽과 오른쪽에 15px의 패딩이 있습니다. 컨테이너 내에 다른 컨테이너를 중첩하지 마세요.

2. 컨테이너 유체의 컨테이너는 768px보다 작은 화면의 컨테이너와 동일하며 고정 너비 값을 설정하지 않으며 상위 요소의 너비를 상속합니다.

3. .container 컨테이너는 반응형 너비에 대한 너비 제한을 제공하는 데 사용됩니다. 크기 변경에 따라 컨테이너가 실제로 변경됩니다. 행과 열은 백분율을 기반으로 하므로 변경할 필요가 없습니다.

Row(row)

1. Row: 클래스 이름이 .row인 컨테이너입니다. 열(col)을 위한 전체 공간이 있으며 총 12개의 열로 나뉩니다.

2. 컨테이너 양쪽의 패딩 값을 상쇄하기 위해 행 양쪽 끝에 두 개의 음수 15px 여백 값이 있습니다. .row는 컨테이너 외부에서 사용될 때 유효하지 않습니다.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Column

1. 각 열의 양쪽 패딩 값은 15px입니다. .row 컨테이너 외부에서 col을 사용하지 마십시오. 그렇지 않으면 col이 유효하지 않습니다.

2. 각 열 열의 패딩 값은 내용에 간격을 제공하여 내용이 브라우저 가장자리에 달라붙지 않고 열이 서로 붙지 않도록 합니다.

3. ==열은 백분율에 따라 할당됩니다(페이지 중앙 너비의 백분율을 기준으로 하므로 페이지 중앙이 넓을수록 각 열의 너비도 커집니다)==.

//五列的宽度
.col-xs-5 {
  width: 41.66666667%;
}// 四列的宽度
.col-xs-4 {
  width: 33.33333333%;
}// 三列的宽度
.col-xs-3 {
  width: 25%;
}// 占两列的宽度
.col-xs-2 {
  width: 16.66666667%;
}// 每列的宽度是版心宽度的8.33333333%
.col-xs-1 {
  width: 8.33333333%;
}...
// 如果是中等屏幕 类名为.col-md-1
//       小屏幕   类名为：.col-sm-1
//       大屏幕   类名为：.col-lg-1
@media (min-width:768px) {
    .col-sm-1 {
        width: 8.33333333%;
    }
    .col-sm-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width: 992px) {
    .col-md-1 {
        width: 8.33333333%;
    }
    .col-md-2 {
        width: 16.66666667%;
    }
    ...
}
@media (min-width:1200px) {
    .col-lg-1 {
        width: 8.33333333%;
    }
    .col-lg-2 {
        width: 16.66666667%;
    }
    ...
}

栅格嵌套

1. 컨테이너/행/열을 설정한 후 해당 열에 새로운 그리드 시스템을 생성하면 되며, 열에 직접 행을 추가하면 됩니다. 컨테이너를 설정할 필요가 없습니다. 왜냐하면 열 양쪽의 패딩 값은 행 양쪽의 음수 여백 값을 정확히 상쇄할 수 있고 열은 컨테이너와 동일하기 때문입니다.

오프셋

1. 오프셋은 주로 열의 왼쪽 여백 값에 따라 결정됩니다. 한 열의 오프셋은 왼쪽 여백: 8.3333333%(1/12), 두 열의 오프셋은 왼쪽 여백: 16.66666667%(예: 2/12)

.col-xs-offset-0 {
    margin-left: 0;
}.col-xs-offset-1 {
    margin-left: 8.33333333%;
}...
@median (min-width:768px) {
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    ...
}
...

열 정렬(푸시 및 풀) )

1. 실제 응용 프로그램에서는 위치 호출 및 정렬에 더 중점을 두어 HTML에서 p의 고정 레이아웃을 위에서 아래로, 왼쪽에서 오른쪽으로 나눌 수 있습니다.

2. pull과 push는 position의 right 값과 left 값을 통해 구현됩니다. pull-1 값 right:8.33333333%(1/12); > 왼쪽:8.33333333%( 1/12);

// push 距离左边的距离（向右推的列数）以最小屏为例
.col-xs-push-2 {
  left: 16.66666667%;
}.col-xs-push-1 {
  left: 8.33333333%;
}.col-xs-push-0 {
  left: auto;
}...

// pull 距离右边的距离（向左拉的列数）以最小屏为例
.col-xs-pull-2 {
  right: 16.66666667%;
}.col-xs-pull-1 {
  right: 8.33333333%;
}.col-xs-pull-0 {
  right: auto;
}

위 내용은 부트스트랩 래스터 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!