目录
一、下载Bootstrap
二、引入Bootstrap相关的css、js
三、一个最简单的Bootstrap页面
四、浏览器支持javascript
一、下载Bootstrap
Bootstrap官网下载地址
Bootstrap-v3.0.3下载地址
注:本教程采用Bootstrap v3.0.3版本进行演示。 css
下载压缩包以后,将其解压缩到任意目录便可看到如下目录结构:html
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。html5
二、引入Bootstrap相关的css、jsjava
<!-- 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版本。
jquery
三、一个最简单的Bootstrap页面
使用如下给出的这份超级简单的HTML模版,或者修改这些案例。咱们强烈建议你对这些案例按照本身的需求进行修改,而不要简单的复制、粘贴。git
<!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文档类型。在你项目中的每一个页面都要参照下面的格式进行设置。github
<!DOCTYPE html> <html lang="zh-cn"> ... </html>
引入respond.min.js说明
Internet Explorer 8 和 9 是被支持的,然而,你要知道,不少CSS3属性和HTML5元素 -- 例如,圆角矩形和投影 -- 是确定不被支持的。另外,Internet Explorer 8 须要Respond.js配合才能实现对媒体查询(media query)的支持。web
引入html5shiv.min.js说明
愈来愈多的站点开始使用 HTML5 标签。可是目前的状况是还有不少人在使用IE6,IE7,IE8。为了让全部网站浏览者都能正常的访问网站,解决方案就有下面两个:
a、为网站建立多套模板,经过程序对User-Agent的判断给不一样的浏览器用户显示不一样的页面,好比优酷网就是采用的这种模式。
b、使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前不少网站采用的这种方式。json
针对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]-->
四、浏览器支持
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上的表现也是很不错的,虽然咱们不对其进行官方支持。