一、bootstrap的文件结构
Bootstrap下载文件包括三个文件夹：css，js和img，只需要把这些文件放在你工程的根目录下。这里也包含简化版的css和js文件。没有必要同时使用未压缩版和简化版。通常在开发的时候可以使用为压缩版本，发布时切换到简化版。
二、使用Bootstrap
<!DOCTYPE html>
<html>
<head>
<title> Bootstrap example </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1> Hello, Bootstrap! </h1>
<script src="js/bootsrtap.min.js"> </script>
</body>
</html>
三、全局样式
使用Bootstrap，可以预建很多组件。BootStrap2.0使用Normalize.css。它被包含在bootstrap.css文件中。
1、margin被从body中移除，内容可以扩展到浏览器窗口的边缘。
2、background－color：white，被应用在body。
3、Bootstrap使用@baseFontFamily, @baseFontSize,以及@baseLineHeight属性作为排版基础。它允许网站标题和其他内容的高度维持一个相同的行高。
4、Bootstrap通过@linkColor来设置全局的链接颜色，而且只在：hover状态下给链接添加下划线。
如果你想改变默认的颜色，你可以修改.less文件的全局变量，修改scaffolding.css文件或者在你的shtylesheet中覆盖颜色。
四、默认的网格系统
默认的Bootstrap网格系统包含12列，组成一个宽度940px的容器，不支持响应式布局。当增加响应式的css文件时，网格会
根据你的视口，在724px或者1170px之间伸缩。
低于767px的视口，应该是平板或者更小的设备，布局中的列会垂直叠加。在默认的宽度下，每一列宽60px，向左平移20px。
要创建一个简单的界面，使用<div>创建一个容器，赋予.row类，并且合适的.span*列。由于网格有12列，所以需要保证列数总和是12就行。例如8和4，如下面的代码所示：
<div class="row">
<div class="span8"> ...</div>
<div class="span4"> ...</div>
</div>
你也可以使用.offset*类来将列移动到右边。＊代表移动的列数，例如offset2会向右边移动2列。
为了在默认的网格中嵌套内容，可以在.span*中增加一个新的.row。确保该行的列数是父容器的总和，例如下列代码：
<div class="row">
<div class="span9">
<div class="row">
<div class="span8"> ...</div>
<div class="span4"> ...</div>
</div>
</div>
</div>
五、流式网格系统
流式网格系统使用百分比来替代列宽的像素。它与固定的网格系统有同样的响应式布局能力，保证在不容分辨率下的合适比例。你可以将.row修改为.row-fluid。列类几乎是相同的，这样在固定和流式网格之间，可以很容易的切换。对列的偏移来说，和固定网格系统是一样的，在要偏移的列上使用.offset*。
在流式网格下嵌套有一些区别，由于我们使用百分比，每个.row设置列数总和为12。例如，你外层的列宽是.span8，你想把内容从中间分开，你应该使用.span6，而不是.span4。
要新建一个固定宽度，页面居中的布局，只需要简单的把内容包含在<div class="container">...</div>中。你要是想使用流式的布局，把所有东西都包含在一个容器中，使用<div class="container-fluid">...</div>。
六、响应式布局
<html>
<head>
<title>Amazing Bootstrap !</title>
<meta name ="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
</head>
</html>
响应式设计让所有页面的内容适应设备的方法。Bootstrap支持5种不同的布局：
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
