부트 스트랩의 그리드 시스템을 보는 방법

Bootstrap의 메쉬 시스템은 컨테이너 (컨테이너), 행 (행) 및 col (열)의 세 가지 주요 클래스로 구성된 반응 형 레이아웃을 빠르게 구축하기위한 규칙입니다. 기본적으로 12 열 그리드가 제공되며 각 열의 너비는 COL-MD-와 같은 보조 클래스를 통해 조정하여 다양한 화면 크기에 대한 레이아웃 최적화를 달성 할 수 있습니다. 오프셋 클래스와 중첩 메시를 사용하면 레이아웃 유연성을 확장 할 수 있습니다. 그리드 시스템을 사용하는 경우 각 요소에 올바른 중첩 구조가 있는지 확인하고 성능 최적화를 고려하여 페이지 로딩 속도를 향상시킵니다. 심층적 인 이해와 실습에 의해서만 부트 스트랩 그리드 시스템을 능숙하게 마스터 할 수 있습니다.

Bootstrap의 그리드 시스템에 대해 알고 싶으십니까? 문서를 보면 간단히 할 수 없습니다. 당신은 그 본질을 깊이 이해해야합니다. 이 기사에서는 포기하기 시작하는 것을 막을 것입니다 ... 아 아니요, 그것은 숙달입니다! 그것을 읽은 후에는 오래된 드라이버처럼 부트 스트랩의 레이아웃을 쉽게 제어 할 수 있으며 더 이상 대머리 기둥과 줄에 고문을받지 못할 수 있습니다.

코드를 먼저 읽기 위해 서두르지 마십시오. 부트 스트랩 그리드 시스템이 무엇을하는지 알아 내야합니다. 간단히 말해서, 반응 형 레이아웃을 신속하게 구축하는 데 도움이되는 일련의 규칙으로, 다양한 크기의 화면에 완벽한 페이지 효과를 제시 할 수 있습니다. 과거에는 다양한 화면 크기에 대해 다른 CSS를 작성해야했지만 이제는 부트 스트랩 그리드 시스템을 쉽게 처리하기 위해 적용하면됩니다. 별로 좋지 않습니까?

핵심은 container , row 및 col 세 가지 범주에 있습니다. container 는 전체 레이아웃 용 컨테이너이고 row 행을 정의하고 col 각 열의 너비를 정의합니다. Bootstrap은 기본적으로 12 개의 열 그리드를 제공하며 필요에 따라 각 열의 너비를 할당 할 수 있습니다. 예를 들어, col-md-4 이 열이 중간 스크린 크기에서 총 폭의 1/4을 차지한다는 것을 의미합니다. 이것은 단순한 분열이 아니며, 그 뒤에 유연한 반응 형 디자인 메커니즘이 있습니다.

이 예를 살펴보고 느끼십시오.

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4">第一列，四分之一宽度</div> <div class="col-md-8">第二列，二分之一宽度</div> </div> <div class="row"> <div class="col-md-3">第三列，八分之一宽度</div> <div class="col-md-9">第四列，四分之三宽度</div> </div> </div></code>

매우 간단하지 않습니까? 그러나 그게 전부라고 생각하지 마십시오. Bootstrap은 또한 col-sm- , col-lg- 등과 같은 다양한 보조 클래스를 제공하며, 이는 각각 소형 및 큰 화면에 해당합니다. 이를 통해 다양한 화면 크기에 대해 다른 레이아웃 조정을 할 수 있으므로 반응이 좋은 디자인이 가능합니다.

더 깊어지면 약간의 함정이 발생할 수 있습니다. 예를 들어, row 클래스를 잊어 버리거나 col 클래스의 너비가 12 개가 추가되면 잘못 배치 된 레이아웃이 발생합니다. 현재 브라우저 개발자 도구가 좋은 친구이며 문제를 찾는 데 도움이 될 수 있습니다. HTML 구조를 다시 확인하여 각 col row 내부에 올바르게 중첩되어 있고 row container 내부에 중첩되어 있는지 확인하십시오.

더 진보 된 플레이를 원하십니까? 부트 스트랩에서 제공 한 오프셋 클래스 ( offset-md- )를 사용하여 열의 오프셋을 제어하거나 중첩 메쉬를 사용하여보다 복잡한 레이아웃을 만들 수 있습니다. 이러한 기술을 사용하려면 진정으로 마스터하기 위해 연습하고 더 많은 노력을 기울여야합니다.

성능 최적화 측면에서 불필요한 클래스를 최소화하고 그리드 시스템의 과도한 사용을 피하면 페이지 로딩 속도를 향상시킬 수 있습니다. 또한 코드를 작성할 때 코드의 가독성과 유지 관리에주의를 기울이십시오. 이는 향후 코드를 수정하고 유지하는 데 매우 도움이됩니다. 단순하고 우아한 코드는 왕이라는 것을 기억하십시오!

요컨대, Bootstrap의 그리드 시스템은 강력한 도구이지만 조심스럽게 배우고 이해해야합니다. 시도하고 연습하는 것을 두려워하지 말고 부트 스트랩 그리드 시스템의 마스터가 될 수 있습니다! 어서 해봐요!

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