Bootstrap使用

使用bootsteap框架首先进入官方网站http://twitter.github.io/bootstrap/或者中文的网站http://www.bootcss.com/，下载相关文件。

下载BootStrap

官网的文件很详细简单，对于下载来说也有多种方式。对于我们开发者来说，估计最简单的方式就是直接下载编译和压缩后的CSS、JavaScript文件，另外还包含字体文件，但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。

这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

因为bootstrap是个轻量级的框架，所以很容易理解，主要有用的就是三个文件，bootstrap.js,bootstrap.css,bootstrap-responsive.css(是响应是布局才需要引入的css)。很简单，要用所有的功能，就全部引入自己的html页面里面。然后还可以看一看它官方给出的一些模版，当然模版我们参考就是了，copy是没有意义的。

研究框架

这个是bootstrap的布局相关的，bootstrap的布局很简单，只要在你的div里面加上class属性，然后再把bootstrap.css里的class加上去就能够实现布局了，很简单，介绍两种很流行的布局，流体布局和响应事布局，都是基于bootstrap的栅格系统 。

流体布局：

贴上一段代码

 <div class="container-fluid">

  <div class="row-fluid">

  <div class="span2">

  <!--Sidebar content-->

  </div>

  <div class="span10">

  <!--Body content-->

  </div>

  </div>

  </div>

响应事布局需要引入下面两端代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

然后就可以进行自己的响应时布局了

在网页中我们使用的html5的一些新的标签，在IE9以下的浏览器并不支持这些标签，也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下:

 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
   
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->  <!--[if lt IE 9]>   

 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>   

 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  <![endif]-->

意思就是说如果用户IE浏览器的版本小于IE9，那么就会加载这两个js文件库，现在就可以使用这些新的标签，并且可以在这些标签上添加样式了。

基本的css样式

包括了
• 排版
• 代码
• 表格
• 表单
• 按钮
• 图片
• 图标

这些无论从实现还是理解上都是很简单的，只需要把bootstrap.css里的类放到你的标签的class里面就能实现很好的布局效果了

javascript插件

这个插件用起来还是很简单，只需要在一些如tab，nav，弹框啊，下拉框啊，这些带有事件的组建的实现动态效果，简单的说，只要拿到class就能拿到节点，然后用bootstrap封装好的方法调用一个方法就能够轻松的实现了。
注意：所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本，因为它的体积很小