bootstrap：User Interface Framework用户页面架构
bootstrap 是什么：
Sleek,intuitive,and powerful front-end framework for faster and easier web development. 点击打开链接 英文
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 点击打开链接 中文网站
打开官网，查看各个导航栏中的内容：
官网下载：http://twitter.github.io/bootstrap/ 点击打开链接
解压：
文件结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
其中带有 min 字眼的文件是压缩后的版本，文件体积比较小，适合发布时用。
responsive 为响应式
下载jquery:
地址： http://code.jquery.com/jquery-1.7.2.min.js 点击打开链接
将它解压到bootstrap 目录下的 js 文件夹下。
下载 html5shiv文件，解压到相应目录：
编写第一个 start.html文件：
引入bootstrap的css,js 文件，和引入 html5shiv文件（适应IE浏览器某版本不支持html5技术），引入jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Learning</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
栅格系统示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bootstrap 布局</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
<p>Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。</p>
<h2 class="page-header">区块一</h2>
<p>对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>
<h2 class="page-header">区块二</h2>
<p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。</p>
<h2 class="page-header">区块三</h2>
<p>在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
效果：
让页面居中显示：
加入div container 类 <div class="container">，刷新页面即可：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bootstrap 布局</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
<p>Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。</p>
<h2 class="page-header">区块一</h2>
<p>对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。</p>
<h2 class="page-header">区块二</h2>
<p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。</p>
<h2 class="page-header">区块三</h2>
<p>在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。</p>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
效果图：
使用栅格系统：
三个区块，平均分成三栏，所以每栏占四个风格的宽度。
在布局容器上，添加相应的网格的类。
对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
效果图：
========================================================
嵌套：
在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bootstrap 布局
</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">布局<small> 使用Bootstrap的网格系统布局网页</small></h1>
<p>Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。
</p>
<div class="row">
<div class="span4">
<h2 class="page-header">区块一</h2>
<p>对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
</p>
</div>
<div class="span4">
<h2 class="page-header">区块二</h2>
<p>把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。
</p>
</div>
<div class="span4">
<h2 class="page-header">区块三</h2>
<p>在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
</p>
<div class="row">
<div class="span2">
在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
</div>
<div class="span2">
在默认的栅格系统里,在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>效果图：
流式栅格系统案例
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。
代码：
效果图片：（任意缩小、放大浏览器页面，就可以看到“流动”效果了）
注意：
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。
动手做：
将区块三中的两个 .span2 改为 span6，再查看效果，是不是现在比较整齐均匀了呢？
=============响应式=======================================
Media queries允许在一些条件基础上自定义CSS
@media (max-width: 767px) {}
上面代码的意思是：当浏览器窗口小于767px时，就应用 {} 里的样式
代码：居然不引入(link href="")也可以使用啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>
Media queries允许在一些条件基础上自定义CSS
</title>
<!--<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> -->
<style>
body{background:#000;}
@media(max-width:767px) {body{background:#f00;}}
</style>
</head>
<body>
<!-- <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> -->
<!-- <script src="../bootstrap/js/bootstrap.min.js"></script> -->
</body>
</html>缩小放大浏览器窗口，就可以看到效果了。
/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
启用响应式特性
通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap,那么只需添加一个meta标签。
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
例子：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Bootstrap 布局
</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script>
<![endif]-->
</head>
响应式布局辅助class
为了更快的针对移动设备做开发,下面列出的辅助class用于针对不同设备显示和隐藏内容。下表是可用的class列表,以及它们在各个media query布局下的效果。这些class可以在 responsive.less 文件中找到。
参考：
官方文档
中文文档：http://www.bootcss.com/scaffolding.html
前端工程师一般用的是Bootstrap的框架而不是样式，样式一般自...
（1）modal声明一个模态框（2）modal-dialog定义模态框尺寸（...
图片在Bootstrap版本3中，通过为图片添加 .img-responsive ...
目录bootstrap-treeview使用小记零、写在前面的话一、功能说...