며칠 전에 부트 스트랩을 배웠고 그리드 시스템을 분류했습니다. 오류가 있으면 자유롭게 수정하십시오.
요약 : 그리드 시스템은 PC, 패드 및 모바일 터미널 용 응답 형 웹 페이지를 개발했으며 다른 화면 해상도를 기반으로 다양한 솔루션이 있습니다.
(0.1, 스크린 장치 크기는 1200px보다 큽니다 COL-LG
(0.2. 스크린 장치 크기는 970px에서 1200px 사이입니다 Col-MD 선택
(0.3. 스크린 장치 크기는 768px와 970px 사이입니다 Col-SM 선택
(0.4. 스크린 장치 크기는 768px 미만입니다.
1. 그리드 시스템은 페이지를 다음과 같이 12 개의 열 (최대 12 개의 열)으로 나눕니다 .
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width = device-width, feater-scale = 1, maxinum-scale, user-scalable = no"> raster system </title> <link rel = "Stylesheet" href = "Library/bootstrap.min.css"> <style> .a {높이 : 50px; 테두리 : 1px 빨간색 고체; 배경 : 분홍색; . <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>3</div> <div>9</div> </div> </div> </div> </div> </div> <script src = "library/jq.js"> </script> <script src = "library/bootstrap.min.js"> </script> </body> </html>(2.1, col-MD-1은 "수평 행"으로 덮인 총 12 개의 열이있는 열입니다.
3. 화면 해상도가 다른 장치에서 제시된 페이지는 해당 "래스터 형식 바 페이지"이며 다음과 같이 반응 형 레이아웃을 실현합니다 .
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta name = "viewport"content = "width = device-width, feater-scale = 1, maxinum-scale, user-scalable = no"> raster system </title> <link rel = "Stylesheet" href = "Library/bootstrap.min.css"> <style> .a {높이 : 50px; 테두리 : 1px 빨간색 고체; 배경 : 분홍색; . <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div> 1 </div> </div> </div> </div> <script src = "Library/jq.js"> </script> <Script src = "library/bootstrap.min.js"> </script> </body> </html>(3.1. 위의 코드는 화면 장치 크기가 1200px보다 크면 1 개의 수평 행에 4 개의 열이 있고, 큰 열은 3 개의 작은 열이 있고, 작은 열에는 총 12 개의 열이 있음을 보여줍니다.
(3.2, 화면 장치 크기가 970px와 1200px 사이 일 때 (먼저이 단계로 브라우저가 줄어든다)가 수평 행에는 3 개의 열이 있으며, 큰 열에는 총 12 개의 열이 있습니다.
(3.2, 화면 장치 크기가 768px와 970px 사이 일 때 (먼저이 단계로 브라우저가 줄어드는 브라우저를 볼 수 있음), 수평 행에는 2 개의 큰 열이 있으며, 큰 열에는 총 12 개의 열이 있습니다.
(3.2, 화면 장치 크기가 768px 미만인 경우 (먼저이 단계로 브라우저가 줄어든다), 수평 행에는 큰 열이 있으며, 큰 열에는 총 12 개의 열이 있으며 총 12 개의 열이 있습니다.
4. 래스터 시스템의 열 오프셋, 중첩 및 스왑 위치
(4.1, 열 오프셋
<div> <div> 8 </div> <div> 3 </div> <!-열은 하나씩 오른쪽으로 오프셋-> </div>
(4.2, 중첩
<div> <!-네스트링-> <div style = "padding : 0;"> <div> </div> <div> </div> <div> </div> </div> <div> 3 </div> </div>
(4.3, 스왑 위치
<div> <!-스왑 위치-> <div> 9 </div> <!-푸시, 오른쪽으로 이동-> <div> 3 </div> <!-당기고 왼쪽으로 이동-> </div>
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 플러그인 사용 튜토리얼
이 기사는 가장 간단한 사례를 사용하여 사례와 관련된 주요 레이아웃 포인트를 분석하여 모든 사람의 학습에 도움이되기를 희망합니다.