<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
</body>
以上代码是bootstrap的基本框架代码,然后在body里添加实际操作的代码。
1.栅格系统---row
<div class="row">
<div class="span12">
parent row1
<div class="row">
<div class="span3">child row1</div>
<div class="span5">child row2</div>
</div>
</div>
</div>
以上代码嵌套的基本布局代码。span1到span12,是跨越的栅格列数。子容器里,所有的span*的和要小于等于12。
第二点可以从浏览器看出,它是与浏览器左对齐,并没有占一整行。文字也是左对齐。
2.流式栅格系统---row-fluid
<div class="row-fluid">
<div class="span12 btn-primary">
parent row1
<div class="row-fluid">
<div class="span6">child row1</div>
<div class="span6">child row2</div>
</div>
</div>
</div>
同样以嵌套的形式演示。与基本布局不同的是,子容器里,所有的span*的和要等于12。
在浏览器中,它占一整行。文字也是左对齐
3.固定布局---container
<div class="container">
123
4 5
</div>
该区域在浏览器center,左右都有margin。
浏览器显示 123 4 5
123是左对齐的,然后一个空格,4,一个空格,5。
可以分析出:div开始标签到第一个字符之间不管有多少个空格,都不算在内;第二个字符开始到下一个字符之间如果空格数大于等于1,都按一个空格来算。
4.流式布局
<div class="container-fluid btn-success">123 4
</div>
占一整行,左右有padding。
div开始标签到第一个字符之间不管有多少个空格,都不算在内;第二个字符开始到下一个字符之间如果空格数大于等于1,都按一个空格来算。
以上是我对bootstrap2官网的文档一些理解。