Bootstrap을 사용하여 그리드 시스템을 만드는 방법-JS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2017-12-31 10:15:00

원래의

2049명이 탐색했습니다.

이번에 소개해드릴 내용은 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!