Bootstrap 来自 Twitter，是目前很受欢迎的前端框架。
基于 HTML、CSS、JAVASCRIPT ，简洁灵活，使 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less(CSS 预处理器，让 CSS 具有动态性)写成。
目前使用较广的是版本2和3，其中2的最新版本的是2.3.2，3的最新版本是3.3.5。
1、相关网址
Bootstrap 中文网 http://v3.bootcss.com/ 起步 http://v3.bootcss.com/getting-started/#download
http://docs.bootcss.com/bootstrap-2.3.2/docs/getting-started.html#html-template
样式字典
布局和栅格：http://docs.bootcss.com/bootstrap-2.3.2/docs/scaffolding.html
基本css：http://docs.bootcss.com/bootstrap-2.3.2/docs/base-css.html
组件：http://docs.bootcss.com/bootstrap-2.3.2/docs/components.html
js字典
http://docs.bootcss.com/bootstrap-2.3.2/docs/javascript.html
定制自己的bootstrap
http://docs.bootcss.com/bootstrap-2.3.2/docs/customize.html 源码下载
【简化版本】http://d.bootcss.com/bootstrap-3.3.5-dist.zip 【源码版本】http://d.bootcss.com/bootstrap-3.3.5.zip
2、国内 Bootstrap CDN 加速服务
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。而且jquery的版本最好是>=1.9.1
3、Bootstrap 的基本文件结构
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── 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 └── glyphicons-halflings-regular.woff2
4、基本模版
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
5、一些例子
【主题】http://v3.bootcss.com/examples/theme/
【栅格】http://v3.bootcss.com/examples/grid/
【普通导航条】http://v3.bootcss.com/examples/navbar/ http://v3.bootcss.com/examples/navbar-static-top/
【固定顶部导航条】http://v3.bootcss.com/examples/navbar-fixed-top/
【自定义组件】
封面图：http://v3.bootcss.com/examples/cover/
旋转木马carousel：http://v3.bootcss.com/examples/carousel/
博客页面：http://v3.bootcss.com/examples/blog/#
控制台：http://v3.bootcss.com/examples/dashboard/
登录页：http://v3.bootcss.com/examples/signin/
自适应nav：http://v3.bootcss.com/examples/justified-nav/
6、Bootlint 工具
Bootlint 是 Bootstrap 官方所支持的 HTML 检测工具。
在使用了 Bootstrap 的页面上（没有对 Bootstrap 做修改和扩展的情况下），它能自动检查某些常见的 HTML 错误。
纯粹的 Bootstrap 组件需要固定的 DOM 结构。Bootlint 就能检测你的页面上的这些“纯粹”的 Bootstrap 组件是否符合 Bootstrap 的 HTML 结构规则。
建议将 Bootlint 加入到你的开发工具中，这样就能帮你在项目开发中避免一些简单的错误影响你的开发进度。
7、基于bootstrap的一些优秀网站推荐
http://expo.bootcss.com/
8、图标
bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：
<h3>图标</h3> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
