【教程分享】Bootstrap3.0学习第二轮(栅格系统原理) - bootstrap吧

level 6

红🍁叶楼主

一楼我莎

2014年02月14日 06点02分 1

level 6

红🍁叶楼主

亲爱的吧友们，因为最近工作和个人原因一直没时间更新，关于其他的一些问题我已经在第一篇帖子声明，从这里开始我不再声明；
还是声明一点，大家活跃起来，支持bootstrap、热爱编程
========================分割线==================================
前两篇帖子我们了解了bootstrap的概念和初步使用方法，现在我尽量把教程整成一系列（此教程转自博客园+楼主亲自实践跟大家一起学习），尽量为大家提供最快捷最好的学习方法。
下面开始
--栅格系统（布局）
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
行（row）必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）。
使用行（row）在水平方向创建一组列（column）。
你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。
类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
通过设置padding从而创建列（column）之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

2014年02月14日 06点02分 2

level 6

红🍁叶楼主

人工置顶。。。。。直播没收视率？ [呼~]

2014年02月14日 06点02分 3

level 6

红🍁叶楼主

楼下开始亲自动手来实践

2014年02月14日 06点02分 4

level 6

红🍁叶楼主

楼主用的DW6，因为要支持html5

2014年02月14日 06点02分 5

level 6

红🍁叶楼主

layout.html就是我刚刚创建的文件。Bootstrap.html也是之前第一贴中创建的第一个html页面。
现在可以将Bootstrap.html中的代码全部Copy到layout.html页面。
然后在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>

2014年02月14日 06点02分 8

level 6

红🍁叶楼主

添加完后layout页面全部代码如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">



</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.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

2014年02月14日 06点02分 9

level 6

红🍁叶楼主

这样的效果貌似不太爽。。。
[太开心]

来优化一下

可以发现上图的页面效果占满全屏，我们可以通过Bootstrap 样式类对上面的内容进行居中。
<div class="container"> .........之前上面添加在body标签下的代码</div>

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

2014年02月14日 06点02分 11

level 6

红🍁叶楼主

效果如下

2014年02月14日 06点02分 13

level 6

红🍁叶楼主

的确排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。是不是懂一点了，反正我自己懂了很多。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类，然后在同一排的周围进行使用带有row类的容器。
==================================分割线===============================
本帖主要学习的布局（栅格系统），通过简单的实例来理解它的工作原理。
使用过的类有:
　　1..container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。
2..col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。
其实这个布局很像HTMl中的Table布局TR行和TD列吧。
暂时的理解就这些，代码直接复制粘贴就可以看效果，当然首先要把预先的css、js文件进行准备。

2014年02月14日 06点02分 14