栅格数据系统软件（合理布局）
Bootstrap内嵌了1套回应式、挪动机器设备优先选择的流式的栅格数据系统软件，伴随着显示屏机器设备或视口（viewport）规格的提升，系统软件会全自动分成数最多12列。
我在这里是把Bootstrap中的栅格数据系统软件叫做合理布局。它便是根据1系列的行（row）与列（column）的组成建立网页页面合理布局，随后你的內容便可以放入到你建立好的合理布局之中。下面就简易详细介绍1下Bootstrap栅格数据系统软件的工作中基本原理：
行（row）务必包括在.container中，便于为其授予适合的排序（aligment）和内补（padding）。应用行（row）在水平方位建立1组列（cpumn）。你的內容理应置放于列（cpumn）内，并且，仅有列（cpumn）能够做为行（row）的立即子元素。相近Predefined grid classes like .row and .cp-xs⑷margin从而相抵掉padding的危害。栅格数据系统软件中的列是根据特定1到12的值来表明其超越的范畴。比如，3个等宽的列可使用3个.cp-xs⑷来建立。
DW6编号完成
Okay勒，下面刚开始写编码了额。最先上1张图看看我应用的编写器，以前在院校学习培训Html+CSS的情况下应用较多的专用工具。
随后新建1个HTML文本文档，挑选种类HTML5
建立好后，另存为与上1节的解读中js、css文档夹的同1文件目录下。
layout.html便是我不久建立的文档。Bootstrap.html也是上1节中建立的第1个html网页页面。
如今能够将Bootstrap.html中的编码所有Copy到layout.html网页页面。
随后在body标识下加上以下编码
<h1>Hello, world!</h1>
<h2class="page-header">地区1</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">地区2</h2>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h2class="page-header">地区3</h2>
<p>Withinthedownloadyou'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'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">地区1</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
<h2class="page-header">地区2</h2>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
<h2class="page-header">地区3</h2>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
<scriptsrc="js/jquery⑵.0.3.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>
自然实际效果也很简易，我還是把截图放上，能够开展比照。
提升1：能够发现上图的网页页面实际效果占满全屏，大家能够根据Bootstrap 款式类对上面的內容开展垂直居中。
<div class="container">
.........以前上面加上在body标识下的编码
</div>
实际效果以下
能够发现container这个类设定了宽度，而且可让內容显示信息在网页页面的正中间。
提升2：将3个地区显示信息在同1排，而且均值分为3栏。
最先为3个地区加上1个器皿，可使用div，而且为div加上1个类 <div class="row">.
随后大家为每一个小的地区也加上1个器皿div，而且为div加上1个类<div class="cp-xs⑷">
简易编码完成以下
<div class="container">
<h1>Hello,world!</h1>
<divclass="row">
<divclass="col-xs⑷">
<h2class="page-header">地区1</h2>
<p>Bootstraphasafeweasywaystoquicklygetstarted,eachoneappealingtoadifferentskilllevelandusecase.Readthroughtoseewhatsuitsyourparticularneeds.</p>
</div>
<divclass="col-xs⑷">
<h2class="page-header">地区2</h2>
<p>IfyouworkwithBootstrap'suncompiledsourcecode,youneedtocompiletheLESSfilestoproduceusableCSSfiles.ForcompilingLESSfilesintoCSS,weonlyofficiallysupportRecess,whichisTwitter'sCSShinterbasedonless.js.</p>
</div>
<divclass="col-xs⑷">
<h2class="page-header">地区3</h2>
<p>Withinthedownloadyou'llfindthefollowingdirectoriesandfiles,logicallygroupingcommonresourcesandprovidingbothcompiledandminifiedvariations.</p>
</div>
</div>
</div>
实际效果以下
确实排成1列，随后分为3栏。再融合1下上面栅格数据系统软件的6部基本原理。是否懂1点了，总之我自身懂了许多。根据一样的方法能够建立出较为繁杂的网格合理布局网页页面。只必须在合理布局应用的器皿上面加上相应的网格合理布局的类。例如说假如內容占有6个网格，那末就加上1个cp-xs⑹的类、占有4个网格就加上1个cp-xs⑷的类，随后在同1排的周边开展应用带有row类的器皿。
总结
本节关键学习培训的合理布局（栅格数据系统软件），根据简易的案例来了解它的工作中基本原理。
应用过的类有:
1..container:用.container包裹网页页面上的內容便可完成垂直居中对齐。在不一样的新闻媒体查寻或值范畴内都为container设定了max-width，用以配对栅格数据系统软件。
2..cp-xs⑷:这个类根据"-"分成3个一部分，第3个一部分的数据做为1个泛指，它的范畴是1到12。便是能够把1个地区分成12个栏，这个要和row类协同应用。
实际上这个合理布局很像HTMl中的Table合理布局TR行和TD列吧。
临时的了解就这些，编码立即拷贝粘贴便可以看实际效果，自然最先要把预先的css、js文档开展提前准备。
