bootstrap3.0의 그리드 시스템 원리에 대하여-CSS 튜토리얼-php.cn

이 글은 주로 부트스트랩 3.0의 그리드 시스템 원리를 소개합니다. 이제 이를 여러분과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Bootstrap에는 반응형 모바일 세트가 내장되어 있습니다. 장치 우선 흐름 그리드 시스템은 화면 장치 또는 뷰포트(viewport)의 크기가 증가함에 따라 시스템이 자동으로 최대 12개의 열로 분할됩니다. 여기서는 Bootstrap의 그리드 시스템을 레이아웃이라고 부릅니다.

그리드 시스템(레이아웃)

Bootstrap에는 반응형 모바일 장치 우선 유동 그리드 시스템이 내장되어 있습니다. 화면 장치 또는 뷰포트(뷰포트)를 사용하면 크기가 증가합니다. 시스템이 자동으로 최대 12개의 열로 나눕니다.

여기서 Bootstrap의 그리드 시스템을 레이아웃이라고 부릅니다. 일련의 행과 열 조합을 통해 페이지 레이아웃을 생성한 다음 생성한 레이아웃에 콘텐츠를 배치할 수 있습니다. 다음은 부트스트랩 그리드 시스템의 작동 방식에 대한 간략한 소개입니다.

행에 적절한 정렬 및 패딩을 제공하려면 행을 .container에 포함해야 합니다. 행을 사용하여 가로로 열 집합(cpumn)을 만듭니다. 콘텐츠는 열(cpumn) 내에 배치되어야 하며 열(cpumn)만 행(row)의 직계 하위 항목이 될 수 있습니다. .row 및 .cp-xs-4와 같은 사전 정의된 그리드 클래스를 사용하여 그리드 레이아웃을 빠르게 생성할 수 있습니다. Bootstrap 소스 코드에 정의된 믹스인을 사용하여 의미 체계 레이아웃을 생성할 수도 있습니다. 패딩을 설정하여 열(cpumn) 사이에 간격(여백)을 만듭니다. 그런 다음 첫 번째와 마지막 여백에 음수 값을 설정하여 패딩 효과를 상쇄합니다. 그리드 시스템의 열은 1에서 12까지의 값을 지정하여 범위를 나타냅니다. 예를 들어, 3개의 .cp-xs-4를 사용하여 3개의 동일한 너비 열을 생성할 수 있습니다. margin从而抵消掉padding的影响。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.cp-xs-4来创建。

DW6编码实现

Okay勒，下面开始写代码了额。首先上一张图看看我使用的编辑器，之前在学校学习Html+CSS的时候使用较多的工具。

然后新建一个HTML文档，选择类型HTML5

创建好后，另存为与上一节的讲解中js、css文件夹的同一目录下。

layout.html就是我刚刚创建的文件。Bootstrap.html也是上一节中创建的第一个html页面。

现在可以将Bootstrap.html中的代码全部Copy到layout.html页面。

然后在body标签下添加如下代码

<h1>Hello, world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>

로그인 후 복사

这几个标签大家应该都能看的明白，最基础最简单的。

添加完后layout.html页面所有代码如下

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<!--Bootstrap-->
<linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen"></p>
<p><!--HTML5ShimandRespond.jsIE8supportofHTML5elementsandmediaqueries-->
<!--WARNING:Respond.jsdoesn&#39;tworkifyouviewthepageviafile://-->
<!--[ifltIE9]>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<scriptsrc="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body>
<h1>Hello,world!</h1>
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery-2.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>

로그인 후 복사

当然效果也很简单，我还是把截图放上，可以进行对比。

优化一：可以发现上图的页面效果占满全屏，我们可以通过Bootstrap 样式类对上面的内容进行居中。

<p class="container">
 .........之前上面添加在body标签下的代码
</p>

로그인 후 복사

效果如下

可以发现container这个类设置了宽度，并且可以让内容显示在页面的中间。

优化二：将三个区域显示在同一排，并且平均分成三栏。

首先为三个区域添加一个容器，可以使用p，并且为p添加一个类

然后我们为每个小的区域也添加一个容器p，并且为p添加一个类

简单代码实现如下

<p class="container">
<h1>Hello,world!</h1>
<pclass="row">
<pclass="col-xs-4">
<h2class="page-header">区域一</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域二</h2>
<p>IfyouworkwithBootstrap&#39;suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter&#39;sCSShinterbasedonless.js.</p>
</p>
<pclass="col-xs-4">
<h2class="page-header">区域三</h2>
<p>Withinthedownloadyou&#39;llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</p>
</p>
</p>

로그인 후 복사

效果如下

的确排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个cp-xs-6的类、占用四个网格就添加一个cp-xs-4的类，然后在同一排的周围进行使用带有row类的容器。

总结

本节主要学习的布局（栅格系统），通过简单的实例来理解它的工作原理。

使用过的类有:

1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width

DW6 인코딩 구현

자, 코드 작성을 시작해 보겠습니다. 먼저, 마지막 사진에서 제가 사용하는 편집기를 보세요. 저는 학교에서 Html+CSS를 배울 때 많은 도구를 사용했습니다. 🎜🎜

🎜🎜그런 다음 새 HTML 문서를 만들고 HTML5를 입력하세요 🎜🎜

🎜🎜생성 후 동일하게 저장 이전 항목과 마찬가지로 해당 섹션의 설명에서는 js 및 css 폴더와 동일한 디렉터리에 있습니다. 🎜🎜

🎜🎜layout.html은 제가 방금 만든 파일입니다 . Bootstrap.html은 이전 섹션에서 생성된 첫 번째 HTML 페이지이기도 합니다. 🎜🎜이제 Bootstrap.html의 모든 코드를layout.html 페이지에 복사할 수 있습니다. 🎜🎜그런 다음 body 태그 아래에 다음 코드를 추가하세요
🎜rrreee🎜모두가 이 태그를 이해할 수 있어야 하며 가장 기본적이고 간단합니다. 🎜🎜layout.html 페이지의 모든 코드를 추가한 후의 내용은 다음과 같습니다🎜rrreee🎜물론 효과는 매우 간단하기 때문에 비교를 위해 스크린샷을 올려둡니다. 🎜🎜

🎜🎜최적화 1: 가능 그림의 페이지 효과는 전체 화면을 차지하며 Bootstrap 스타일 클래스를 통해 위 콘텐츠를 중앙에 배치할 수 있습니다. 🎜rrreee🎜효과는 다음과 같습니다🎜🎜

🎜🎜 컨테이너 클래스는 너비를 설정하고 페이지 중앙에 콘텐츠가 표시되도록 하는 것을 확인할 수 있습니다. 🎜🎜최적화 2: 세 영역을 같은 행에 표시하고 세 열로 균등하게 나눕니다. 🎜🎜먼저 세 영역에 대한 컨테이너를 추가하고 p를 사용할 수 있으며 p

에 대한 클래스를 추가할 수 있습니다.🎜🎜그런 다음 각 작은 영역 p에 대한 컨테이너도 추가합니다. p

🎜🎜간단한 코드 구현은 다음과 같습니다
🎜rrreee🎜효과는 다음과 같습니다🎜🎜🎜🎜는 실제로 한 줄로 늘어선 다음 세 개의 열로 나뉩니다. 위의 그리드 시스템의 6가지 원칙을 결합해 보겠습니다. 조금은 이해가 가시나요? 아무튼 많이 이해가 되네요. 더 복잡한 그리드 레이아웃 페이지도 같은 방법으로 만들 수 있습니다. 레이아웃에서 사용하는 컨테이너에 해당 그리드 레이아웃 클래스를 추가하기만 하면 됩니다. 예를 들어 콘텐츠가 6개의 그리드를 차지하는 경우 cp-xs-6 클래스를 추가하고, 4개의 그리드를 차지하는 경우 cp-xs-4 클래스를 추가한 다음 동일한 행 컨테이너 주위에 행 클래스를 사용합니다. 🎜🎜요약🎜🎜이 섹션에서는 주로 레이아웃(그리드 시스템)을 연구하고 간단한 예를 통해 작동 원리를 이해합니다. 🎜🎜사용된 클래스는 다음과 같습니다.🎜🎜1..container: .container를 사용하여 페이지의 콘텐츠를 감싸서 중앙 정렬을 구현합니다. max-width는 그리드 시스템과 일치하도록 다양한 미디어 쿼리 또는 값 범위의 컨테이너에 대해 설정됩니다. 🎜🎜2..cp-xs-4: 이 클래스는 "-"를 통해 세 부분으로 구분됩니다. 세 번째 부분의 숫자는 일반적인 참조로 사용되며 범위는 1~12입니다. 즉, 영역을 12개의 열로 나눌 수 있으며 이는 행 클래스와 함께 사용해야 합니다. 🎜