初探bootstarp
目录
1、下载Bootstrap
2、引入Bootstrap相关的css、js
3、一个最简单的Bootstrap页面
4、浏览器支持
1、下载Bootstrap
Bootstrap官网下载地址
Bootstrap-v3.0.3下载地址
注：本教程采用Bootstrap v3.0.3版本进行演示。
下载压缩包之后，将其解压缩到任意目录即可看到以下目录结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。
2、引入Bootstrap相关的css、js
<!-- Bootstrap核心CSS文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"> <!-- jQuery文件，在bootstrap.min.js之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Bootstrap核心JavaScript文件 --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
Bootstrap依赖jQuery
请注意，所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入，jQuery版本需大于或等于1.9.0。点击此可以查看Bootstrap所对应的jQuery版本。
3、一个最简单的Bootstrap页面
使用以下给出的这份超级简单的HTML模版，或者修改这些案例。我们强烈建议你对这些案例按照自己的需求进行修改，而不要简单的复制、粘贴。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
HTML5文档类型说明
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-cn">
...
</html>
引入respond.min.js说明
Internet
Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3属性和HTML5元素 -- 例如，圆角矩形和投影 --
是肯定不被支持的。另外，Internet Explorer 8 需要Respond.js配合才能实现对媒体查询（media query）的支持。
引入html5shiv.min.js说明
越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。为了让所有网站浏览者都能正常的访问网站，解决方案就有下面两个：
a、为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，比如优酷网就是采用的这种模式。
b、使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前很多网站采用的这种方式。
针对IE浏览器比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作 为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。
html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：
<!--[if lt IE 9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->
4、浏览器支持
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
被支持的浏览器
特别注意，我们坚决支持这些浏览器的最新版本：
a. Chrome (Mac、Windows、iOS和Android)
b. Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
c. Firefox (Mac、Windows)
d. Internet Explorer
e. Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，虽然我们不对其进行官方支持。
