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

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

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