Bootstrap은 반응 형 모바일 우선 스트리밍 그리드 시스템을 제공합니다. 화면 또는 뷰포트 크기가 증가함에 따라 시스템은 자동으로 최대 12 개의 열로 나뉩니다.
그리드 시스템은 행과 열이있는 테이블과 유사합니다. 컨테이너로 설정된 컨테이너에 배치해야합니다. div 일 수 있고 내용은 열에 배치됩니다. 웹 디자인의 그리드는 콘텐츠를 레이아웃하는 데 사용되어 웹 사이트를 쉽게 찾아 볼 수 있습니다. 다음은 부트 스트랩 그리드 레이아웃을 사용하는 예입니다.
<div> <div> col2 </div> <div> col10 </div> </div>
디스플레이 효과는 다음과 같습니다.
클래스의 스타일 = "행"은 행을 나타 내기 위해 추가되며 클래스 스타일 = "col-sm-2"가 추가되어 열을 나타냅니다. 시스템은 전체 화면을 12 개의 부품으로 나누고 Col-SM-2는 열이 2 부분에 걸쳐 있고 Col-SM-10 비율은 열이 10 개의 부분에 걸쳐 있음을 의미합니다. 표시된 효과는 위 그림과 같이 표시되며, 한 행에는 두 개의 열이 있고 첫 번째 열은 2 개의 부분을 차지하고 두 번째 열은 10 부분을 차지합니다.
Bootstrap은 반응 형 프론트 엔드 프레임 워크로, 그리드 시스템에 반영되어 있으며, 이는 다른 디스플레이 크기에 해당하는 장치이며 다른 디스플레이 효과를 나타낼 수 있습니다. 아래 그림과 같이 :
<div> <div> .col-xs-12 .col-md-8 </div> <div> .col-xs-6 .col-md-e4 </div> </div>
COL-MD-8 은이 목록이 일반 데스크톱 및 랩톱과 같은 중간 크기의 화면에서 8 개의 부품을 차지한다는 것을 의미합니다. COL-XS-12는이 열이 정제와 같은 작은 화면에서 12 개의 사본을 차지한다는 것을 의미합니다. 위의 코드는 행에 두 개의 열이 있고 다음의 일반 데스크탑 및 랩톱이 있음을 보여줍니다. 첫 번째 열은 8 개의 부분을 차지하고 두 번째 열은 4 개의 부분을 차지하고 다음 행은 2 개의 열을 차지하고 첫 번째 열은 12 개의 부분을 차지하고 두 번째 열은 6 개의 부분을 차지합니다. 이러한 방식으로, 다른 디스플레이 장치에서 다른 효과가 달성됩니다. 브라우저 크기를 조정 하여이 두 가지 상황을 시뮬레이션 할 수 있습니다.
다음 그림은 Bootstrap의 그리드 시스템이 여러 화면 장치에서 어떻게 작동하는지 보여줍니다.
위는 편집기가 소개 한 세 번째 부트 스트랩 그리드 기본 사항에 대한 완전한 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!