标签：style http io ar os 使用 sp for strong
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我们在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
先来个简单的例子：
<span style="font-size:18px;"><!DOCTYPE html>
<head>
<title>
Bootstrap
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file://
-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">
</script>
<![endif]-->
</head>
<body>
<h1>
Hello, world!
</h1>
<h2 class="page-header">
区域一
</h2>
<p>
Bootstrap has a few easy ways to quickly get started, each one appealing
to a different skill level and use case. Read through to see what suits
your particular needs.
</p>
<h2 class="page-header">
区域二
</h2>
<p>
If you work with Bootstrap's uncompiled source code, you need to compile
the LESS files to produce usable CSS files. For compiling LESS files into
CSS, we only officially support Recess, which is Twitter's CSS hinter based
on less.js.
</p>
<h2 class="page-header">
区域三
</h2>
<p>
Within the download you'll find the following directories and files, logically
grouping common resources and providing both compiled and minified variations.
</p>
<script src="js/jquery-2.0.3.js">
</script>
<script src="js/bootstrap.min.js">
</script>
</body>
</span>
优化一：可以发现上图的页面效果占满全屏，我们可以通过Bootstrap 样式类对上面的内容进行居中。
<div class="container">.........之前上面添加在body标签下的代码</div>
可以发现container这个类设置了宽度，并且可以让内容显示在页面的中间。
优化二：将三个区域显示在同一排，并且平均分成三栏。
首先为三个区域添加一个容器，可以使用div，并且为div添加一个类 <div class="row">.
然后我们为每个小的区域也添加一个容器div，并且为div添加一个类<div class="col-xs-4">
简单代码实现如下
<pre><code><div <span class="class"><span class="keyword">class</span>="<span class="title">container</span>">
<<span class="title">h1</span>>
<span class="title">Hello</span>, <span class="title">world</span>!
</<span class="title">h1</span>>
<<span class="title">div</span> <span class="title">class</span>="<span class="title">row</span>">
<<span class="title">div</span> <span class="title">class</span>="<span class="title">col</span>-<span class="title">xs</span>-4">
<<span class="title">h2</span> <span class="title">class</span>="<span class="title">page</span>-<span class="title">header</span>">
区域一
</<span class="title">h2</span>>
<<span class="title">p</span>>
<span class="title">Bootstrap</span> <span class="title">has</span> <span class="title">a</span> <span class="title">few</span> <span class="title">easy</span> <span class="title">ways</span> <span class="title">to</span> <span class="title">quickly</span> <span class="title">get</span> <span class="title">started</span>, <span class="title">each</span> <span class="title">one</span> <span class="title">appealing</span>
<span class="title">to</span> <span class="title">a</span> <span class="title">different</span> <span class="title">skill</span> <span class="title">level</span> <span class="title">and</span> <span class="title">use</span> <span class="title">case</span>. <span class="title">Read</span> <span class="title">through</span> <span class="title">to</span> <span class="title">see</span> <span class="title">what</span> <span class="title">suits</span>
<span class="title">your</span> <span class="title">particular</span> <span class="title">needs</span>.
</<span class="title">p</span>>
</<span class="title">div</span>>
<<span class="title">div</span> <span class="title">class</span>="<span class="title">col</span>-<span class="title">xs</span>-4">
<<span class="title">h2</span> <span class="title">class</span>="<span class="title">page</span>-<span class="title">header</span>">
区域二
</<span class="title">h2</span>>
<<span class="title">p</span>>
<span class="title">If</span> <span class="title">you</span> <span class="title">work</span> <span class="title">with</span> <span class="title">Bootstrap</span>'<span class="title">s</span> <span class="title">uncompiled</span> <span class="title">source</span> <span class="title">code</span>, <span class="title">you</span> <span class="title">need</span> <span class="title">to</span> <span class="title">compile</span>
<span class="title">the</span> <span class="title">LESS</span> <span class="title">files</span> <span class="title">to</span> <span class="title">produce</span> <span class="title">usable</span> <span class="title">CSS</span> <span class="title">files</span>. <span class="title">For</span> <span class="title">compiling</span> <span class="title">LESS</span> <span class="title">files</span> <span class="title">into</span>
<span class="title">CSS</span>, <span class="title">we</span> <span class="title">only</span> <span class="title">officially</span> <span class="title">support</span> <span class="title">Recess</span>, <span class="title">which</span> <span class="title">is</span> <span class="title">Twitter</span>'<span class="title">s</span> <span class="title">CSS</span> <span class="title">hinter</span> <span class="title">based</span>
<span class="title">on</span> <span class="title">less</span>.<span class="title">js</span>.
</<span class="title">p</span>>
</<span class="title">div</span>>
<<span class="title">div</span> <span class="title">class</span>="<span class="title">col</span>-<span class="title">xs</span>-4">
<<span class="title">h2</span> <span class="title">class</span>="<span class="title">page</span>-<span class="title">header</span>">
区域三
</<span class="title">h2</span>>
<<span class="title">p</span>>
<span class="title">Within</span> <span class="title">the</span> <span class="title">download</span> <span class="title">you</span>'<span class="title">ll</span> <span class="title">find</span> <span class="title">the</span> <span class="title">following</span> <span class="title">directories</span> <span class="title">and</span> <span class="title">files</span>, <span class="title">logically</span>
<span class="title">grouping</span> <span class="title">common</span> <span class="title">resources</span> <span class="title">and</span> <span class="title">providing</span> <span class="title">both</span> <span class="title">compiled</span> <span class="title">and</span> <span class="title">minified</span> <span class="title">variations</span>.
</<span class="title">p</span>>
</<span class="title">div</span>>
</<span class="title">div</span>>
</<span class="title">div</span>></span></code><div class="container"> <h1> Hello, world! </h1> <div class="row"> <div class="col-xs-4"> <h2 class="page-header"> 区域一 </h2> <p> Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case.
Read through to see what suits your particular needs. </p> </div> <div class="col-xs-4"> <h2 class="page-header"> 区域二 </h2> <p> If you work with Bootstrap‘s uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling
LESS files into CSS, we only officially support Recess, which is Twitter‘s CSS hinter based on less.js. </p> </div> <div class="col-xs-4"> <h2 class="page-header"> 区域三 </h2> <p> Within the download you‘ll find the following directories and files, logically
grouping common resources and providing both compiled and minified variations. </p> </div> </div> </div>
效果如下
的确排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类，然后在同一排的周围进行使用带有row类的容器。
本节主要学习的布局（栅格系统），通过简单的实例来理解它的工作原理。
使用过的类有:
.container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。
.col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。
其实这个布局很像HTMl中的Table布局TR行和TD列吧。
标签：style http io ar os 使用 sp for strong
原文地址：http://blog.csdn.net/yyt602037504/article/details/41485675
