1.1简介：
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
1.2特点：
（1）跨设备、浏览器
甚至兼容IE7、8，一般不考虑IE9以下的浏览器
（2）响应式布局
不仅可以支持PC端的各种分辨率的显示，还可以支持移动端屏幕响应式切换显示。
（3）提供全面的组件
提供大量实用的组件，包括：导航、标签、工具条、按钮等一系列组件
（4）内置jQuery插件
内置很多实用的jQuery插件
（5）支持HTML5 、CSS3
HTML5语义化标签和CSS3属性都得到很好的支持。
（6）支持LESS动态样式
LESS实用变量、嵌套，操作混合编码，编写更快、更灵活的CSS，能和Bootstrap很好的配合开发。
1.3Bootstrap结构：
BootStrap下载地址：http://v3.bootcss.com/ (选择生产环境，最新版) 如下图：
Paste_Image.png
下载完解压后主要有三个文件夹，分别是css（样式） 、fonts（字体）、js（脚本），结构如下：
Paste_Image.png
1.3.1 css目录下有四个css后缀的文件，min是压缩包，一般使用这个；其他属于没有压缩的。map后缀的文件是css源码映射表，在一些特定的浏览器工具中使用。
1.3.2 js目录包含两个文件，分别为压缩和未压缩的js文件。
1.3.3 fonts目录下包含不同后缀的字体文件。
1.4创建第一个页面
我使用的编辑器是sublime text。大家也可以网上搜索这个编辑器，感觉还是很强大的，当然你也可以使用其他的编辑器。好的，不废话进入主题。
1.首先新建一个文件夹，然后把刚刚下载解压得到额三个文件夹放进文件夹内，利用编辑器新建一个index.html文件。
2.引入样式
在head里引入
<link rel="stylesheet" href="css/bootstrap.min.css">
3.下载jQuery脚本库
浏览器打开http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
右键另存为jquery.min.js保存到js文件夹下
4.引入脚本库
在body底部引入，这样网页打开时先不加载js库，能提高页面加载速度。
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script>
第一个页面代码：页面显示一个按钮
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>第一个Bootstrap页面</title> <link rel="stylesheet" href="css/bootstrap.min.css"></head><body> <button class="btn btn-info">按钮</button> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script></body></html>
效果图如下：
Paste_Image.png
作者：何向宇
链接：https://www.jianshu.com/p/d69f6dff1c95
共同学习，写下你的评论
评论加载中...
作者其他优质文章
