부트스트랩 그리드 시스템의 단위는 무엇입니까

1. Bootstrap이란

Bootstrap은 반응성이 뛰어난 모바일 우선 유동 그리드 시스템을 제공합니다. 화면 또는 뷰포트 크기가 증가하면 시스템은 자동으로 최대 12개의 열을 나눕니다. 간단한 레이아웃 옵션을 위한 사전 정의된 클래스와 더 의미 있는 레이아웃을 생성하기 위한 강력한 믹스인 클래스가 포함되어 있습니다.

이 단락을 이해하면 가장 중요한 부분이 모바일 장치 우선 순위라는 것을 알 수 있습니다. 그렇다면 모바일 장치 우선 순위는 무엇입니까?

Bootstrap의 기본 CSS 코드는 기본적으로 작은 화면 장치(예: 모바일 장치, 태블릿)에서 시작한 다음 미디어 쿼리를 사용하여 큰 화면 장치(예: 노트북, 데스크톱 컴퓨터)의 구성 요소 및 그리드로 확장됩니다.

다음 전략이 있습니다:

내용: 무엇이 가장 중요한지 결정하세요.
레이아웃: 너비가 작은 디자인을 우선적으로 고려하세요.
점진적 향상: 화면 크기가 커짐에 따라 요소가 추가됩니다.

관련 권장 사항: "Bootstrap 시작 튜토리얼"

2. 작동 원리

그리드 시스템은 행과 열의 일련의 조합을 통해 페이지 레이아웃과 콘텐츠를 만드는 데 사용됩니다. 이러한 레이아웃이 생성되었습니다.

이 작업은 다음과 같이 작동합니다.

"행"은 적절한 정렬 및 패딩을 제공하기 위해 .container(고정 너비) 또는 .container-fluid(100% 너비)에 포함되어야 합니다.

<div class="container"><!-- 水平居中，两边有margin，最小屏幕时，充满父元素 -->
 <div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
 <div class="row"></div>
</div>

"행"을 통해 가로 방향으로 "열" 세트를 만듭니다. 단, 열 개수의 합은 균등 분할된 총 열 개수를 초과할 수 없으며(초과 시 새 줄에 표시됨), 기본값은 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 및 .col-xs-4를 사용하면 부트스트랩 소스 코드에 정의된 믹스인을 사용하여 의미 있는 레이아웃을 만들 수도 있습니다. "Column"은 열 사이에 간격(여백)을 생성하는 속성을 설정합니다. .container 요소에 설정된 패딩을 오프셋하기 위해 .row 요소에 음수 여백을 설정하면 간접적으로 "행()"이 됩니다. "행"에 포함된 "열"이 패딩을 오프셋하는 이유입니다.

그리드 시스템 의 열은 범위로 표시됩니다. 예를 들어 3개의 .col-xs-4

을 사용하여 3개의 동일한 너비 열을 만들 수 있습니다. "행"에 포함된 "열"이 12보다 크면 추가 "열"을 포함하는 요소가 전체적으로 새로운 행에 배열됩니다.

그리드 클래스는 너비가 더 큰 화면에 적합합니다. 분할 지점 크기 이상이며 작은 화면 장치의 그리드 클래스를 재정의합니다. 따라서 요소에 .col-md-* 그리드 클래스를 적용하면 화면 너비가 중단점보다 크거나 같은 장치에 적용됩니다. 크기를 가지며 작은 화면 장치 클래스의 그리드를 재정의합니다. 따라서 요소에 .col-lg-*를 적용해도 큰 화면 장치에는 영향을 미치지 않습니다.

위 내용은 부트스트랩 그리드 시스템의 단위는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!