이 기사는 주로 부트 스트랩의 그리드 시스템을 소개합니다.
그리드 시스템의 구현은 컨테이너 크기를 정의하고 12 개의 부품 (또는 24 개의 부품 또는 32 개의 부품을 나누지만 12 개의 부품이 가장 일반적입니다)을 나누고 내부 및 외부 마진을 조정하고 최종적으로 미디어 쿼리를 결합하여 강력한 반응 형 그리드 시스템을 만듭니다.
부트 스트랩의 그리드 시스템은 컨테이너를 12 부로 나누는 것입니다.
부트 스트랩의 그리드 시스템은 실제로 열의 조합 인 레이아웃에 사용됩니다. 4 가지 기본 사용법이 있습니다.
1. 열 조합
숫자를 병합 열을 변경하십시오 (원칙 : 열의 합은 12를 초과 할 수 없습니다).
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 열 조합의 기본 사용 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/3.1.1.1.1.1/css/bootstrap.min.min 스타일-> <tyle> [class *= col-] {배경색 : #eee; 국경 : 1px Solid #CCC; . <div> .col-md-4 </div> </div> <div> <!-이 라인은 1 : 2 : 1-> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div> </div> </html> </html>에 의해 균등하게 분리됩니다.렌더링은 다음과 같습니다.
2. 열 오프셋
열 요소에 클래스 이름 "col-md-offesset-*"를 추가하면 (여기서 별표는 오프셋이 될 열 조합 수를 나타냅니다),이 클래스 이름의 열이 오른쪽으로 오프셋됩니다.
<div> <!-오른쪽으로 이동하는 4 개의 열의 간격-> <div> <div> .col-md-4 </div> <div> 오른쪽으로 이동하는 4 개의 열의 간격 </div> <div> .col-md-3 </div> </div> <!-오른쪽으로 이동하는 4 개의 열의 간격 </div> </div>. 발생-> <div> <div> <div> .col-md-4 </div> <div> 오른쪽으로 이동하는 4 개의 열의 간격 </div> <div> .col-md-3 </div> </div> <div> <div> .col-md-3 </div> <div> <div> .col-md-3 </div> <col-md-3 </div> <col-md-3 </div> <col-md-3 </div> <div> col-md-4 </div> </div> </div>
렌더링은 다음과 같습니다.
3. 열 정렬
열 정렬은 열의 방향을 변경하고 떠 다니는 왼쪽과 오른쪽을 변경하고 부동 거리를 설정하는 것입니다. 부트 스트랩은 클래스 이름 "col-md-push-"및 "col-md-pull-"을 추가하여 달성됩니다 (여기서 별표는 움직이는 열 조합의 수를 나타냅니다).
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 기본 사용법 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1/css/boottrap.min. [class *= col-] {배경색 : #eee; 국경 : 1px Solid #CCC; }4. 열의 둥지
<! docType html> <html> <head> <meta charset = "utf-8"> <title> 기본 사용법 </title> <link rel = "stylesheet"href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1/css/boottrap.min. [class *= col-] {배경색 : #eee; 국경 : 1px Solid #CCC; } [class *= col-] [class *= col-] {배경색 : #f36; 국경 : 1px 점선 #ffff; 색상 : #ffff; .렌더링은 다음과 같습니다.
여전히 심도있게 배우고 싶다면 여기를 클릭하여 두 가지 흥미로운 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서 부트 스트랩 실용 튜토리얼
일련의 기사 :
Magical Bootstrap 기본 레이아웃 //www.vevb.com/article/89278.htm에 처음 접촉했습니다.
마법의 부트 스트랩 양식 //www.vevb.com/article/89330.htm에 처음 접촉했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.