부트스트랩 그리드 시스템을 사용해야 하는 경우

부트스트랩을 사용하여 웹 페이지를 만들고 웹 페이지를 다양한 해상도의 장치에 적용하려면 그리드 시스템을 사용해야 합니다. (추천 학습: 부트스트랩 비디오 튜토리얼)

그리드 시스템은 가로로 배열할 수 있는 블록 수준 요소의 집합이며, 블록 수준 요소의 스타일은 다양한 화면 해상도에 따라 변경될 수 있습니다.

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

부트스트랩 그리드 시스템의 작동 방식은 다음과 같습니다.

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

"행"을 통해 가로 방향으로 "열" 집합을 만듭니다.

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

.row 및 .col-xs-4와 유사 그리드를 빠르게 생성하는 데 사용할 수 있는 사전 정의된 클래스입니다. 레이아웃 부트스트랩 소스 코드에 정의된 믹스인은 열을 생성하기 위해 "열"에 대한 패딩 속성을 설정하여 .row 요소에 음수 여백을 설정하여 의미 있는 레이아웃을 생성하는 데에도 사용할 수 있습니다. .container 요소에 대한 패딩 세트를 오프셋하면 "행"에 포함된 "열"도 간접적으로 오프셋됩니다.

여백의 음수 값은 다음 예가 강조 표시되는 이유입니다. 1에서 12까지의 값을 지정하여 표시됩니다. 예를 들어 3개의 .col-xs-4를 사용하여 3개의 동일한 너비 열을 생성할 수 있습니다.

"행"에 12개 이상의 "열"이 포함된 경우 "열"이 위치한 요소는 전체적으로 새로운 행에 배열됩니다.

그리드 클래스는 화면 너비가 분할 지점 크기보다 크거나 같은 장치에 적합하며 그리드 클래스는 다음과 같습니다. 작은 화면 장치에 대해 재정의됩니다. 요소에 .col-md-* 래스터 클래스를 적용하면 중단점 크기보다 크거나 같은 화면 너비를 가진 장치에 작동하고 작은 화면 장치에 대해 래스터 클래스를 재정의하면 모든 .col-lg-가 적용됩니다. * 존재하지 않으며 대형 화면 장치에도 영향을 미칩니다.

Bootstrap 관련 기술 기사를 더 보려면

Bootstrap Tutorial

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

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