目录
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上的表现也是很不错的，虽然我们不对其进行官方支持。

初探bootstarp的更多相关文章

  1. 初探领域驱动设计（2）Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  2. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  5. .NET文件并发与RabbitMQ（初探RabbitMQ）

    本文版权归博客园和作者吴双本人共同所有.欢迎转载,转载和爬虫请注明原文地址:http://www.cnblogs.com/tdws/p/5860668.html 想必MQ这两个字母对于各位前辈们和老司 ...

  6. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  7. bootstarp

    我最近在学一个前端框架叫bootstarp.我的老大给了一个bootstarp的模板给我,我看了看感觉没意思.因为那里面的样式,我也会写,所以我就没心思去看,每次只要面板上有的我就搬下来就完了,只要面 ...

  8. 【手把手教你全文检索】Apache Lucene初探

    PS: 苦学一周全文检索,由原来的搜索小白,到初次涉猎,感觉每门技术都博大精深,其中精髓亦是不可一日而语.那小博猪就简单介绍一下这一周的学习历程,仅供各位程序猿们参考,这其中不涉及任何私密话题,因此也 ...

  9. Key/Value之王Memcached初探：三、Memcached解决Session的分布式存储场景的应用

    一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性 ...

随机推荐

  1. web开发必备插件

    文本编辑器百度ueditor:http://ueditor.baidu.com/website/

  2. mysql字符串函数(转载)

    对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的 最左面字符的ASCII代码值.如果str是空字符串, 返回0.如果str是NULL,返回NULL. mysq ...

  3. 2017 New Year’s Greetings from Sun Yat-sen University

    As winter turns to spring, the world around us begins to take on an air of freshness. As  2017 is fa ...

  4. 在 linux 上部署并运行 JavaFX 项目

    环境 redhat 6.4.eclipse安装JavaFX插件 项目详情及代码参见 在linux上配置并创建JavaFX项目 ,该部署即此文章中项目的部署 配置build.fxbuild 生成buil ...

  5. Python_Day9_Socket编程

    本节内容: Socket语法及相关 SocketServer实现多并发 socket概念 socket本质上就是在2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递. 我们 ...

  6. latex 竖排子图的生成

    latex命令如下: 需要的包为: \usepackage{graphicx} \usepackage{subfigure} \begin{figure*}%加*的作用是跨栏(双栏和单栏latex的区 ...

  7. openssl stack 数据结构栈基本操作

    堆栈是两种不同的数据结构: 堆:数据先进先出: 栈:数据先进后观: 在stack.h 中 openssl 为我们提供了一个通用的栈,利用提供的接口我们可以方便的用此栈来存放开发中的任意数据. open ...

  8. Python正则化学习

  9. python3 实现简单信用卡管理程序

    1.程序执行代码: #Author by Andy #_*_ coding:utf-8 _*_ import os,sys,time Base_dir=os.path.dirname(os.path. ...

  10. ireport5.6+jasperreport6.3开发（四）--以javabean为基准的报表开发(ireport)

    javabean完成以后就是添加ireport的报表了 打开ireport的option然后在classpath中添加路径. 然后在ireport中追加数据源如图,点击图标后会出现数据源列表然后按ne ...