Bootstrap을 사용하여 그리드 시스템을 만드는 방법

이번에 소개해드릴 내용은 Bootstrap그리드 시스템을 만드는 방법입니다. 우리는 부트스트랩에서 그리드 시스템을 만드는 것이 매우 중요하다는 것을 알고 있습니다.

Bootstrap은 HTML, CSS, JAVASCRIPT를 기반으로 하며 간단하고 유연하여 웹 개발을 더 빠르게 만듭니다.

그리드 시스템은 부트스트랩의 핵심입니다. 부트스트랩이 이렇게 강력한 반응형 레이아웃 솔루션을 가질 수 있는 것은 바로 그리드 시스템의 존재 때문입니다.

공식 문서에는 다음과 같이 나와 있습니다:

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

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

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

다음 전략이 있습니다:

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

그리드 시스템은 행과 열의 일련의 조합을 통해 페이지 레이아웃을 만드는 데 사용되며, 생성된 레이아웃에 콘텐츠를 배치할 수 있습니다.

다음과 같이 작동합니다.

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

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

콘텐츠는 "열" 안에 배치되어야 하며 "열"만 행의 직접 하위 요소가 될 수 있습니다.

.row 및 .col-xs-4와 유사 이 사전 정의된 클래스를 사용하여 그리드를 빠르게 만들 수 있습니다. Bootstrap 소스 코드에 정의된 믹스인을 사용한 레이아웃. 의미론적 레이아웃을 만드는 데에도 사용할 수 있습니다.

"열"에 대한 패딩 속성을 설정하여 열 사이에 여백을 만듭니다. .row 요소에 음수 여백을 설정하여 이는 .container 요소에 대한 패딩 세트를 오프셋하고 "행"에 포함된 "열"에 대한 패딩을 간접적으로 오프셋합니다.
음수 값 마진은 아래 예가 바깥쪽으로 튀어나온 이유입니다. 그리드 열의 내용이 정렬됩니다.

그리드 시스템의 열은 1에서 12까지의 값을 지정하여 범위를 나타냅니다. 예를 들어, 3개의 .col-xs-4 를 사용하여 3개의 동일한 너비 열을 생성할 수 있습니다.

"행"에 포함된 "열"이 12보다 큰 경우 추가 "열"의 요소는 전체적으로 다른 행에 배열됩니다.

그리드 클래스는 화면 너비가 분할 지점 크기보다 크거나 같은 장치에 적합하며, 작은 화면 장치의 경우 그리드 클래스가 재정의됩니다. 그러므로 어떤 것을 적용하더라도 .col-md-* 그리드 클래스는 중단점 크기보다 크거나 같은 화면 너비를 가진 장치에 적합하며 작은 화면 장치의 경우 그리드 클래스를 재정의합니다. 따라서 요소에 .col-lg-*를 적용하는 것은 존재하지 않습니다. 대형 화면 장치에도 영향을 미칩니다.

위의 소개를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

Vue의 사용자 정의 지침을 사용하여 드롭다운 메뉴를 완성하는 방법

HTTP/2 서버 푸시 정보

nvm이 다양한 버전의 노드를 관리하는 방법

위 내용은 Bootstrap을 사용하여 그리드 시스템을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!