지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 부트스트랩 튜토리얼 > 본문

부트스트랩 그리드 시스템은 무엇을 의미합니까?

尚
풀어 주다： 2019-07-19 14:06:10
원래의
4312명이 탐색했습니다.

부트스트랩 그리드 시스템은 무엇을 의미합니까?

그리드 시스템이란

그리드 시스템이란 페이지 레이아웃을 동일한 너비의 열로 나눈 다음 열 수를 정의하여 페이지 레이아웃을 모듈화하는 것을 말합니다. Bootstrap의 그리드 시스템은 1-12 열 패턴을 사용하고 비례 계산을 사용하여 정의한 열 너비를 설정합니다. 예를 들어 이 행에 2열 레이아웃 모드를 사용하려는 경우 각 열의 너비는 탐색에 사용하는 장치에 관계없이 이 비율로 표시됩니다. 그러나 장치 너비가 설정한 최소 너비보다 작은 경우 두 열이 나란히 하나의 열이 됩니다.

Bootstrap의 그리드 시스템

Bootstrap에서 그리드 시스템을 사용하는 것은 매우 간단하고 편리합니다. 이미 정의된 클래스를 div에 추가하기만 하면 됩니다.

먼저 Bootstrap에서 사용할 수 있는 여러 그리드 클래스를 살펴보겠습니다.

1. .col-xs-* 휴대폰 및 기타 장치와 유사한 초소형 화면 클래스(

2. .col-sm-* 태블릿 장치와 유사한 작은 화면 장치 클래스(≥768px 및

3. .col-md-* 중간 장치 클래스입니다(≥992px 및

4. .col-lg-* 이는 대형 장치 클래스(≥1200px)입니다.

부트스트랩 그리드 시스템 사용 방법

기기에 해당하는 그리드 클래스를 사용하여 다양한 기기에 적용하려는 레이아웃 스타일을 결정할 수 있습니다. 예:

기타 정보

위의 사용 방법 외에도 "열 오프셋 클래스"를 사용하여 자신만의 그리드 위치를 빠르게 지정할 수도 있습니다. 사용 방법은

이 작성 방법에 따르면 이 div는 PC 측에서 오른쪽으로 3열만큼 오프셋됩니다.

Bootstrap과 관련된 더 많은 기술 기사를 보려면

Bootstrap Tutorial

칼럼을 방문하여 알아보세요!

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

관련 라벨：
bootstrap栅格系统
원천：php.cn
이전 기사：부트스트랩 템플릿을 무료로 다운로드하는 방법 다음 기사：부트스트랩의 원리는 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
부트스트랩 그리드 시스템이 적용되지 않습니다. 내 프로젝트에서 문제가 다시 발생합니다. 홈 구성 요소에 렌더링하는 구성 요소 ProductCard가 있습니다. 이것은 ProductCard 구성요소 <di...
에서 2024-04-03 18:23:18
0
2
308
Rasberry pi에서 Uibuilder(Node-red)를 열 수 없습니다. Rasberrypi에 Node-RED를 성공적으로 설치했으며 시스템에 필요한 프로세스도 가져왔습니다. 하지만 Vue 및 Bootstrap-vue 파일을 사용할 수...
에서 2024-03-31 23:25:51
0
1
347
Google Sheets API를 사용하여 2차원 배열 데이터를 읽는 방법은 무엇입니까? 저는 GoogleSheetsAPI를 처음 접했고 현재 Google Sheets로 데이터를 보내는 시스템을 개발 중입니다. 데이터를 보내려고 하면 다음과 같은 오류...
에서 2024-03-30 16:24:35
0
1
368
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿