부트스트랩은 매일 그리드 시스템(레이아웃)을 배워야 합니다_javascript 기술
- WBOY원래의
- 2016-05-16 15:30:071662검색
1. 그리드 시스템(레이아웃)
Bootstrap에는 반응형 모바일 우선 유동 그리드 시스템이 내장되어 있습니다. 화면 장치 또는 뷰포트 크기가 증가하면 시스템이 자동으로 최대 12개의 열로 분할됩니다.
여기에서는 Bootstrap의 그리드 시스템을 레이아웃이라고 부릅니다. 일련의 행과 열 조합을 통해 페이지 레이아웃을 생성한 다음 생성한 레이아웃에 콘텐츠를 배치할 수 있습니다. 다음은 Bootstrap 그리드 시스템의 작동 원리에 대한 간략한 소개입니다.
그리드 시스템의 구현 원리는 매우 간단합니다. 컨테이너 크기를 정의하고 이를 12등분으로 나누고(24 또는 32등분도 있지만 12개가 가장 일반적임) 내부 크기를 조정하면 됩니다. 외부 여백을 추가하고 마지막으로 미디어 쿼리를 결합하여 강력한 반응형 그리드 시스템을 만듭니다. Bootstrap 프레임워크의 그리드 시스템은 컨테이너를 12개의 동일한 부분으로 나눕니다.
사용시 LESS(혹은 Sass) 소스코드를 재컴파일하여 12라는 값을 실제 상황에 맞게 수정(즉, 24나 32로 변경 가능)할 수 있습니다. 물론 더 나누어서 사용할 수도 있습니다. , 그러나 이 방법은 사용하지 않는 것이 좋습니다.)
2. 이용규칙
Bootstrap에는 반응성이 뛰어나고 모바일 친화적인 기능 세트가 내장되어 있습니다.
1. 적절한 정렬과 패딩을 제공하려면 데이터 행(.row)이 컨테이너(.container)에 포함되어야 합니다. 예:
<div class="container"> <div class="row"></div> </div>
2. 행(.row)에 열(.column)을 추가할 수 있지만, 열 수의 합은 균등하게 분할된 열의 총 수(예: 12)를 초과할 수 없습니다. 예:
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>
3. 특정 내용은 열 컨테이너(column) 내에 배치되어야 하며, 열(column)만 행 컨테이너(.row)의 직계 하위 요소로 사용할 수 있습니다
4. 패딩을 설정하여 열 사이의 간격을 만듭니다. 그런 다음 첫 번째 열과 마지막 열에 음수 여백을 설정하여 패딩 효과를 상쇄합니다.
부트스트랩 프레임워크의 그리드 시스템이 어떻게 작동하는지 더 잘 이해하기 위해 스케치를 살펴보겠습니다.
사진에 대한 간략한 설명:
1. 가장 바깥쪽 테두리에는 브라우저의 보이는 영역과 동일한 넓은 흰색 영역이 있습니다. 네 가지 유형의 브라우저(초소형 화면, 소형 화면, 중형 화면, 대형 화면)와 함께 제공되는 부트스트랩 프레임워크의 그리드 시스템에는 반응형 효과가 있습니다. 중단점(픽셀 분할 지점)은 768px, 992px 및 1220px입니다.
2. 두 번째 테두리(1)는 컨테이너(.container)와 동일합니다. 브라우저 해상도가 다르면 너비가 자동, 750px, 970px 및 1170px로 다릅니다. bootstrap.css의 736~756행에 설정:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 768px) {
.container {
width: 750px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
3번과 2번 가로 막대는 컨테이너의 행(.row)이 12개의 동일한 부분, 즉 열로 나누어져 있음을 나타냅니다. 각 열에는 "padding-left:15px"(그림에서 분홍색 부분) 및 "padding-right:15px"(그림에서 보라색 부분)이 있습니다. 이로 인해 첫 번째 열의 왼쪽 패딩과 마지막 열의 오른쪽 패딩이 전체 너비의 30px을 차지하게 되어 페이지가 보기 흉해집니다. 물론 일정한 간격을 두어야 하는 경우에는 이 접근 방식이 좋습니다. bootstrap.css의 767~772행에 표시된 대로:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
4. 3번 가로 막대는 행 컨테이너(.row)로, 왼쪽을 오프셋하는 데 사용되는 "margin-left" 및 "margin-right" 값을 "-15px"로 정의합니다. padding 및 마지막 열의 오른쪽 패딩입니다. bootstrap.css의 763~767번째 줄에서 이를 볼 수 있습니다:
.row {
margin-right: -15px;
margin-left: -15px;
5、将行与列给合在一起就能看到横条4的效果。也就是我们期望看到的效果，第一列和最后一列与容器（.container）之间没有间距。
横条５只是想向大家展示，你可以根据需要，任意组合列与列，只是他们的组合数之和不要超过总列数。
3、栅格选项
通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。
从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理解：如果在一个元素上使用多个不同的上面的样式类，那么元素会根据在不同尺寸选择最合适（匹配最理想的）的样式类。简单的举例进行说明：比如在一个元素上我们使用了两个样式类：.col-md-和.col-lg。可以对照上面的截图来看
第一种情况：尺寸》=1200px;那么会选择.col-lg。
第二种情况：尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。
第三种情况：如果尺寸《992px;那么这两个样式类都将不会作用于元素上。
4、基本用法
网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式，在这一节中所涉及到的示例，我们都以中屏（970px）为例进行介绍，其他屏幕的使用也类似这一种。
1）、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性，例如：
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-6">.col-md-6</div> <div class="col-md-3">.col-md-3</div> </div> </div>
使用上面的结构，你将看到下图的效果：
实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。在bootstrap.css文件的第1088行～1126行：
/*确保所有列左浮动*/
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
/*定义每个列组合的宽度（使用的百分比）*/
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
5、列偏移
有的时候，我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div> <div class="col-md-2">.col-md-3</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div> </div> </div>
如上面的示例代码，得到的效果如下
实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。在bootstrap.css中第1205行～1241行所示：
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
注意：
不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示，如：
39bbc163833ae4e036fa5108a4263823
16ecfe3539b844ce687c27cdaf266e84.col-md-316b28748ea4df4d9c2150843fecfba68
bf5bfe97e3d3689f860a8c8f5029911fcol-md-offset-316b28748ea4df4d9c2150843fecfba68
73d7fb51e5466eba95fd51d69eca064acol-md-416b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
上面代码中列和偏移列总数为3+3+3+4 = 13>12，所以发生了列断行。
如上面的示例代码，得到的效果如下
6、列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
我们来看一个简单的示例：
<div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div>
默认情况之下，上面的代码效果如下：
“col-md-4”居左，“col-md-8”居右，如果要互换位置，需要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“e58b8c04eee469969a34b2677761cf58”添加类名“col-md-push-8”，调用其样式。
也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“c90c57cf1a19b62ea8a1aeefa477f708”上添加类名“col-md-pull-4”：
Bootstrap仅通过设置left和right来实现定位效果。在boostrap.css文件的第1127行~第1204行可以看到具体的代码：
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}
7、列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。来看一个简单示例：
<div class="container"> <div class="row"> <div class="col-md-8"> 我的里面嵌套了一个网格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> 我的里面嵌套了一个网格 <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>
效果如下：
注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。
本文都是通过最简单的案例，来剖析案例中涉及到的布局要点，希望对大家的学习有所帮助。