트위터의 부트 스트랩은 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다.
학습의 핵심 사항 :
1. 모바일 장치가 선호됩니다
2. 레이아웃 컨테이너
3. 그리드 시스템
이 레슨에서는 주로 Bootstrap의 그리드 시스템에 대해 배우고 반응 형 모바일 우선 스트리밍 그리드 시스템을 제공합니다.
하나. 모바일 장치가 선호됩니다
HTML5 프로젝트에서는 모바일 프로젝트를 수행했습니다. 화면 및 장치 쿼드 너비를 설정하는 데 매우 중요한 메타가 있으며 사용자 스케일링 및 스케일링을 실행할지 여부.
// 화면 너비는 장치, 초기 확장 가능, 최대 확장 가능 및 사용자 스케일링 금지와 일치합니다.
둘. 레이아웃 컨테이너
부트 스트랩에는 페이지 컨텐츠 및 래스터 시스템을위한 .Container 컨테이너가 필요합니다. 패딩과 같은 속성으로 인해이 두 컨테이너 클래스는 서로 중첩 될 수 없습니다.
// 고정 너비 <div> ... </div> // 100% 너비 <div> ... </div>
래스터 시스템에서 브라우저는 화면 크기가 증가하거나 감소함에 따라 최대 12 개의 열을 자동으로 할당합니다. 일련의 행과 열을 결합하여 페이지 레이아웃을 만듭니다. 작업 원칙은 다음과 같습니다.
1. "행"은 .Container (고정 너비) 또는 .Container-Fluid (100% 너비)에 포함되어야합니다.
2. "행"을 통해 "열"세트를 수평으로 만듭니다.
3. 콘텐츠는 "열"에 배치해야하며 "열"만 행의 직접적인 자식 요소로 사용할 수 있습니다.
4. .row 및 .col-xs-4와 같은 사전 정의 된 클래스를 사용하여 래스터 레이아웃을 신속하게 생성 할 수 있습니다.
부트 스트랩 소스 코드에 정의 된 믹스 인을 사용하여 시맨틱 레이아웃을 생성 할 수도 있습니다.
5. "열"의 패딩 속성을 설정하여 열 사이의 거터를 만듭니다. .ROW 요소에 대한 음수 값을 설정하여
따라서 마진은 .container 요소의 패딩 세트를 오프셋하며, "행"에 포함 된 "열"에 대한 패딩을 간접적으로 상쇄합니다.
6. 음수 마진은 다음 예제가 바깥쪽으로 강조하는 이유입니다. 래스터 컬럼의 내용은 연속으로 배열됩니다.
7. 래스터 시스템의 열은 1에서 12까지의 값을 지정함으로써 스파인 범위를 나타냅니다. 예를 들어, 3 개의 .col-xs-4를 사용하여 동일한 너비의 3 개의 열을 생성 할 수 있습니다.
8. "행"에 포함 된 "열"이 12보다 큰 경우, 여분의 "열"이 위치한 요소는 전체적으로 다른 행으로 배열됩니다.
9. 그리드 클래스는 화면 너비가 분할 지점의 크기보다 크거나 같은 장치에 적합하며 작은 화면 장치의 그리드 클래스를 포함합니다. 따라서, 요소에 .col-md-* 래스터 클래스를 적용하는 것은 스크린 너비가 분할 지점의 크기보다 크거나 같은 장치에 적합하며 작은 스크린 장치의 래스터 클래스를 덮어 씁니다. 따라서 요소에 .col-lg-*를 적용하는 것은 존재하지 않으므로 대형 스크린 장치에도 영향을 미칩니다.
// 응답 행 생성 <div> <div> ... </div> </div> // 최대 12 개의 열로 응답 행을 만듭니다. <div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> <div> 7 </div> <div> 8 </div> <div> 9 </div> <div> 10 </div> </div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> css.a {height : 100px; back <div> <div> <div> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> 9-12 </div> </div >> </div >> 9-12 </div> </div >>래스터 매개 변수 테이블
위의 그림과 같이 그리드 시스템의 가장 바깥 층은 브라우저의 너비를 4 개로 구별합니다 : 초소형 화면 (<768px), 작은 화면 (> = 768px), 중간 화면 (> = 992px) 및 큰 화면 (> = 1200px). 내부 컨테이너 컨테이너의 적응성 폭은 자동, 750px, 970px 및 1170px입니다. 자동이면 휴대폰 화면에있는 경우 한 줄만 전적으로 표시됩니다.
// 4 개의 화면을 모두 활성화합니다 categories<div><div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div></div> // 때때로 우리는 열 오프셋을 중간에 유지하기 위해 열 오프셋을 설정할 수 있습니다. <div> <div> <div> 8 </div> <div> 3 </div> </div> </div> </div> // 삽입 될 수도 있고 삽입도 12입니다. 열 <div> <div> <div> 1-8 </div> 9-12 </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> 두 열을 교체하고 왼쪽으로 밀고 오른쪽으로 당겨 <div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
위의 내용은 부트 스트랩 그리드 시스템의 관련 정보입니다. 모든 사람에게 도움이되기를 바랍니다.