부트스트랩은 최대 몇 개의 열로 나눌 수 있나요?

부트스트랩에서는 페이지를 최대 12개의 열로 나눌 수 있습니다. 부트스트랩의 그리드 시스템은 비교적 유연하며 페이지를 1, 2, 3, 4, 6 및 12개의 열로 나눌 수 있습니다. 기본적으로 목록은 12개입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터

부트스트랩을 최대 몇 개의 열로 나눌 수 있는지

이 그리드 레이아웃 시스템은 스캐폴딩( 프레임워크, 레이아웃) 부분입니다. 스캐폴딩에는 (고정) 그리드 레이아웃(Grid System)과 유동 그리드 레이아웃(Fluid Grid System)이 있습니다. 이 문서에서는 첫 번째 고정 그리드 레이아웃에 대해 설명합니다.

Bootstrap은 12열 레이아웃 형식을 사용합니다. 즉, 페이지의 한 행 내에 최대 12열을 배열할 수 있습니다.

12는 숫자 "1, 2, 3, 4, 6"의 최소 공배수이기 때문에 부트스트랩은 기본적으로 12개 열만 지정할 수 있습니다. 따라서 12열 그리드 시스템은 비교적 유연하며 행을 1열로 나누는 것을 지원합니다. 2열, 3열, 4열, 6열.

Bootstrap은 페이지의 총 너비가 940px이라고 규정하고 있는데, 이는 다른 CSS 프레임워크와 다릅니다(일부는 960px(960grid 등)이고 일부는 950px(blueprint 등)). 이 940px는 컨테이너라는 클래스에 지정됩니다. 세부 사항은 다음과 같습니다

.container,
{
  width: 940px;
}

또한 이 컨테이너의 페이지가 중앙에 위치하도록 지정됩니다

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

(여기에는 다양한 브라우저에서 div가 동일하게 표시되도록 하는 트릭이 있습니다. 센터링 효과를 위해서는 margin-left와 margin-right의 값을 auto로 설정하는 것이 가장 간단한 방법입니다. *zoom CSS 해킹은 ie6 및 7과의 호환성을 위한 것이지만, Zoom=1을 사용하는 구체적인 이유는 알 수 없습니다. )

동시에 CSS 의사 요소 선택기도 사용했습니다. 이 클래스에서는 이전 내용과 이후 내용이 지워졌고 뒤쪽의 플로팅 콘텐츠도 지워졌습니다.

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

다중 열 레이아웃은 불가능합니다. 이때 행을 2차 수준 컨테이너로 사용해야 하는데 행 컨테이너의 스타일이 꽤 흥미롭습니다

.row {
  margin-left: -20px;
  *zoom: 1;
}

왼쪽 여백은 -20px이며 음수 20입니다. 이는 행의 너비가 외부 컨테이너를 20픽셀 초과한다는 의미입니다. 왜? 나중에 알게 될 것입니다. 물론 콘텐츠를 비우고 플로팅하는 설정과 연속으로 플로팅 스타일을 설정하는 것도 컨테이너와 유사하므로 여기서는 자세히 설명하지 않겠습니다.

Row에는 수행하려는 특정 다중 열 레이아웃에 대한 범위 클래스가 포함되어 있습니다. 레이아웃을 구체적으로 사용할 때 코드는 다음과 같습니다.

    <div class="container">
        <div class="row">
            <div class="span4">
                span4</div>
            <div class="span8">
                span8</div>
        </div>
    </div>

왜 스팬을 컨테이너에 직접 배치할 수 없나요? 행에 margin-left=-20px가 필요한 이유는 무엇입니까? 저자가 “세련된 그리드 레이아웃”을 이야기하는 이유이기도 합니다.

실제로 부트스트랩에는 총 12개의 스팬 클래스(span1,span2,...span12)가 있습니다. 해당 정의는 매우 간단합니다

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

물론 의사 클래스 선택기를 사용하여 플로팅 스타일로 균일하게 설정할 수도 있습니다.

[class*="span"] {
  float: left;
}

플로팅은 또 다른 이론입니다. 우리는 그것을 누르지 않습니다. 스팬1부터 스팬12까지 자세히 살펴보니 스팬이 증가할 때마다 80px씩 증가한다는 패턴을 발견했습니다. 단지 스팬1이 60부터 계산을 시작한다는 것뿐입니다. 스팬1이 80부터 계산을 시작하도록 하면 각 스팬은 80의 배수가 됩니다. 기억하기도 더 쉽습니다. 실제로 스팬은 실제로 80부터 계산되기 시작합니다. 단지 보이는 부분은 60이고 나머지 20은 스타일에서 margin-left=20으로 설정되어 있습니다. 즉, 모든 스팬 사이에 20px의 간격을 두어 서로 달라붙지 않고 최종 사용자가 분리하기 어렵게 만듭니다.

관련 권장 사항:

부트스트랩 튜토리얼

위 내용은 부트스트랩은 최대 몇 개의 열로 나눌 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!