5장: BootStrap Grid System_javascript 기술

Twitter의 Bootstrap은 현재 가장 인기 있는 프런트엔드 프레임워크입니다. Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하며 간단하고 유연하여 웹 개발을 더 빠르게 만듭니다.

학습 포인트:

1. 모바일 기기 우선
2. 레이아웃 컨테이너
3. 그리드 시스템

이번 강의에서는 반응형 모바일 우선 유동 그리드 시스템을 제공하는 부트스트랩의 그리드 시스템에 대해 주로 알아봅니다.

1. 모바일 우선

HTML5 프로젝트에서는 모바일 프로젝트를 만들었습니다. 화면과 기기와 동일한 너비, 사용자 스케일링 실행 여부, 스케일링 비율을 설정하는 데 사용되는 매우 중요한 메타가 있습니다.

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 

2. 레이아웃 컨테이너

Bootstrap에는 페이지 콘텐츠와 그리드 시스템을 래핑하기 위해 .container 컨테이너가 필요합니다. 패딩과 같은 속성으로 인해 이러한 두 컨테이너 클래스는 서로 중첩될 수 없습니다.

//固定宽度
<div class="container">
...
</div> 
//100%宽度
<div class="container-fluid">
...
</div>

그리드 시스템에서는 화면 크기가 커지거나 작아짐에 따라 브라우저가 자동으로 최대 12개의 열을 할당합니다. 일련의 행과 열을 통해 페이지 레이아웃을 만듭니다. 작동 방식은 다음과 같습니다.

1. "행"은 적절한 정렬 및 패딩을 제공하기 위해 .container(고정 너비) 또는 .container-fluid(100% 너비)에 포함되어야 합니다.

2. "행"을 통해 가로 방향으로 "열" 그룹을 만듭니다.

3. 콘텐츠는 "열" 내에 배치되어야 하며 "열"만 행의 직계 하위 요소가 될 수 있습니다.

4. .row 및 .col-xs-4와 같은 사전 정의된 클래스를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다.
Bootstrap 소스 코드에 정의된 믹스인을 사용하여 의미 체계 레이아웃을 생성할 수도 있습니다.

5. "열"에 패딩 속성을 설정하여 열 사이에 여백을 만듭니다. .row 요소에 음수 값을 설정하여

margin은 .container 요소에 설정된 패딩을 상쇄하고 "행"에 포함된 "열"에 대한 패딩을 간접적으로 상쇄합니다.

6. 아래 예가 바깥쪽으로 튀어나온 이유는 여백의 음수 값 때문입니다. 그리드 열의 내용이 정렬됩니다.

7. 그리드 시스템의 열은 1에서 12까지의 값을 지정하여 범위를 나타냅니다. 예를 들어, 3개의 .col-xs-4를 사용하여 3개의 동일한 너비 열을 생성할 수 있습니다.

8. "행"에 12개 이상의 "열"이 포함된 경우 추가 "열"의 요소는 전체적으로 다른 행에 배열됩니다.

9. 그리드 클래스는 화면 너비가 분할 지점 크기보다 크거나 같은 장치에 적합하며 작은 화면 장치의 경우 그리드 클래스가 재정의됩니다. 따라서 요소에 .col-md-* 래스터 클래스를 적용하면 중단점 크기보다 크거나 같은 화면 너비를 가진 장치에서 작동하며 작은 화면 장치에서는 래스터 클래스를 재정의합니다. 따라서 요소에 .col-lg-*를 적용하는 것은 존재하지 않으며 대형 화면 장치에도 영향을 미칩니다.

//创建一个响应式行
<div class="container">
<div class="row">
...
</div>
</div> 
//创建最多 12 列的响应式行
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
</div> 
//为了显示明显的 CSS
.a {
height: 100px;
background-color: #eee;
border: 1px solid #ccc;
} 
//总列数都是 12，每列分配多列
<div class="container">
<div class="row">
<div class="col-md-4 a">1-4</div>
<div class="col-md-4 a">5-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="row">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
</div> 

래스터 매개변수 테이블

위 그림과 같이 그리드 시스템의 가장 바깥쪽 레이어는 초소형 화면(=768px), 중형 화면(>=992px), 네 가지 브라우저 너비를 구분합니다. 대형 화면(>=1200px). 내부 .container 컨테이너의 적응형 너비는 자동, 750px, 970px 및 1170px입니다. 자동이란 휴대폰 화면에 있는 경우 디스플레이 한 줄을 차지한다는 의미입니다.

//四种屏幕分类全部激活
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div>
</div>
</div> 
//有时我们可以设置列偏移，让中间保持空隙
<div class="container">
<div class="row">
<div class="col-md-8 a">8</div>
<div class="col-md-3 col-md-offset-1 a">3</div>
</div>
</div> 
//也可以嵌套，嵌满也是 12 列
<div class="container">
<div class="row">
<div class="col-md-9 a">
<div class="col-md-8 a">1-8</div>
<div class="col-md-4 a">9-12</div>
</div>
<div class="col-md-3 a">
11-12
</div>
</div>
</div> 
//可以把两个列交换位置，push 向左移动，pull 向右移动
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3 a">9</div>
<div class="col-md-3 col-md-pull-9 a">3</div>
</div>
</div>

위 내용은 BootStrap 그리드 시스템에 관한 정보입니다. 모든 분들께 도움이 되었으면 좋겠습니다!