bootstrap初步认识1
产生背景：
1.作者为公司内部提供一套标准化的前端开发工具
2.为了完成前端开发任务，工程师们几乎尝试了自己熟悉的所有库。应用之间的不一致性导致它们难以扩展和维护。Bootstrap最初就是这个问题的一个解决方案，而且在Twitter内部第一次Hackweek上得到了认可。Hackweek结束后，我们手头上的项目已经相当稳定，可以在公司内部部署使用了。
3.从最初CSS驱动的项目，发展到内置了很多JavaScript插件和图标，并且涵盖了表单和按钮元素。
4.Bootstrap本身支持响应式Web设计，而且拥有一个非常稳健的12列、940像素宽的网格布局系统。
对于新项目，Bootstrap则提供了一整套有用的基本要素。
一般来说，我在着手开发新项目的时候，都会整合Eric Meyer的Reset CSS（http://meyerweb.com/eric/tools/css/reset/） 等一些工具。
自从有了Bootstrap，只要在网站中引入bootstrap.css这个CSS文件，或者再加上bootstrap.js这个JavaScript文件，整个项目的基础平台就搭建好了。
一般开发时使用未压缩版，而在发布时使用压缩版本。
全局样式
Bootstrap预定义了一些样式。Bootstrap 1.0使用的是以前的重置样式表。
但Bootstrap 2.0则使用Nicolas Gallagher写的Normalize.css（http://necolas.github.com/normalize.css/）。
HTML5 Boilerplate（http://html5boilerplate.com/）使用的也是这个样式表。
这个样式表包含在bootstrap.css 中。
特别值得注意以下几种默认样式，它们专门针对排版和链接：
1.从body中去掉了margin，这样内容就会紧贴浏览器窗口边缘；
2.为body应用了background-color: white;；
3.Bootstrap以@baseFontFamily、@baseFontSize和@baseLineHeight属性作为排版的基准，确保整个网站的标题及其他内容的行高一致；
4.Bootstrap通过@linkColor设置全局链接颜色，只在:hover状态下给链接添加下划线。
记住，要修改默认颜色，可以直接修改相应.less文件中的全局变量值。要么修改scaffolding.less文件，要么修改你自己的样式表。
默认网格系统
Bootstrap默认的网格布局（图1-1）包含12列，940像素宽，不支持响应式布局。
加载响应式CSS文件后，网格布局会根据视口（viewport）宽度在724像素到1170像素之间伸缩。
视口宽度小于767像素时，说明是平板电脑或更小的设备，布局中的列会垂直堆叠起来。
默认宽度下，每列宽60像素，且向左平移20像素。
基本网格的HTML
创建简单布局时，给作为行的<div>添加.row类，给作为列的<div>添加表示横跨多少列的.span*类即可。因为网格布局可以包含12列，所以.span*中的*加起来必须等于12。这样，可以设计出3-6-3、4-8、3-5-4、2-8-2……布局，你懂了吧？
下面的代码使用了.span8和.span4，总共横跨12列：
<div class="row">
<div class="span8">...</div>
<div class="span4">...</div>
</div>
平移列
使用.offset*类可以向右平移列，*用于指定平移的列数。比如，下面代码中的.offset2会导致.span7向右平移2列（见图1-2）：
<div class="row">
<div class="span2">...</div>
<div class="span7 offset2">...</div>
</div>
嵌套列
要嵌套列，只要在相应的.span*中再增加一个.row，然后在其中包含与父容器列数相等的.span*即可（见图1-3）：
<div class="row">
<div class="span9">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
流式网格系统
流式网格系统的列宽定义使用百分比，而不是像素。
流式网格系统与固定网格系统一样都具有响应能力，可适应不同的屏幕和设备。
只要把某一行的.row改为.row-fluid，这一行就会成为流式的。不改变列的类，是为了简化固定和流式网格的切换。想平移列？跟固定网格中一样，在要平移的列中添加.offset*类即可：
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>
流式网格中的嵌套有点不一样。原因是在使用百分比的情况下，每个.row都会把列数重置为12。举个例子，要想在一个.span8中嵌套两个等宽的列，不能使用两个.span4（尽管两个4平分8），而应该使用两个类为.span6的<div>（见图1-4）。这是为保证内容具有响应性，因为我们希望内容100%填满容器：
<div class="row-fluid">
<div class="span8">
<div class="row">
<div class="span6">...</div>
<div class="span6">...</div>
</div>
</div>
</div>
容器布局
要在页面中实现固定宽度、居中的布局，只要把内容统统放到<div class="container">...</div>中即可。
如果既想实现流式布局，又想把所有内容都封装到一个容器里，可以使用<div class="container-fluid">...</div>。流式布局适合很多应用、管理界面及其他项目。
<div class="container claearfix">
<div class="col5 column mln">5</div>
<div class="col11 column">11</div>
</div>
<div class="container claearfix">
<div class="col4 column mln">4</div>
<div class="col8 column">8</div>
<div class="col4 column">4</div>
</div>
其中clearfix是用来滁浮动的，而在第一列中加入一个mln是让第一列不具有左边距，如果不用考虑ie6的话，还可以使用:first-child来设置
.container {
margin: 0 auto;
width: 940px;
}
.column {
display: inline;
float:left;
margin-left: 20px;
}
.col1 {
width: 40px;
}
.col2 {
width: 100px;
}
.col3 {
width: 160px;
}
.col4 {
width: 220px;
}
.col5 {
width: 280px;
}
.col6 {
width: 340px;
}
.col7 {
width: 400px;
}
.col8 {
width: 460px;
}
.col9 {
width: 520px;
}
.col10 {
width: 580px;
}
.col11 {
width: 640px;
}
.col12 {
width: 700px;
}
.col13 {
width: 760px;
}
.col14 {
width: 820px;
}
.col15 {
width: 880px;
}
.col16 {
width: 940px;
}
固定布局：960水平居中布局是我们见过最多的布局风格，但随着显屏的增大，1140s布局越来越多，如果使用960s布局的话，那么这种固定布局就很像上面说的Grids。我们来看一个模板
<div class="container clearfix">
<div id="left" class="sidebar column col4 mln">left sidebar</div>
<div id="main" class="column col8">main section</div>
<div id="right" class="sidebar column col4">right sidebar</div>
</div>
响应式设计
要让Bootstrap支持响应式布局，必须在<head>标签中添加一个<meta>标签。另外，如果你下载的文件中没有响应式CSS文件，也要单独下载。响应式布局必需的标签和文件如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My amazing Bootstrap site!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
</head>
如果发现Bootstrap没有响应能力，请确保这些标签一个也不少。目前，响应能力还不是默认就有的，因为不是所有网站都需要响应式布局。Bootstrap的作者选择了让开发人员需要时添加，而不是不需要时删除响应功能。
不过，就算你想找的是移动开发框架，Bootstrap仍然是值得考虑的。
浏览器的兼容性
现代主流浏览器都支持Bootstrap，比如说Safari,Google Chrome,Firefox4+,IE7+等