Bootstrap介绍

一、什么是BootStrap？

BootStrap是基于html、css、js的前端框架，便于web开发人员快速开发系统页面。就是一种写响应式页面的框架，常用于在移动端上的APP。
Bootstrap是当前最流行的前端UI框架(有预制界面组件)
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
Bootstrap 的所有 JavaScript 插件都依赖 jQuery。

1.什么是响应式网页？

1G：模拟信号，手机只能打电话
2G：数字信号，手机可以发短信
2.5G：GPRS，手机可以浏览网页，WAP/WML
3G：智能手机，iOS/Android——Linux操作系统，具备真正的浏览器，可以浏览HTML网页 早期的HTML网页都是为PC浏览器准备的，宽度设定都很大，手机屏幕，浏览体验不佳！2010年5月提出的“Responsive Web Page”，响应式网页、自适应式网页，一个页面，可以根据浏览设备的不同、或使用环境的不同，自动的修改布局、图片尺寸、文字大小，从而可以保证所有的设备下都正常的浏览体验。
好处：各种设备下都正常浏览
不足：页面代码结构需要考虑到多种设备，编写难度更大，一般只适用于内容量不太多的页面。我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。
一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下表格所示

类型	布局宽度
大屏幕	>= 1200px
默认	>= 980px
平板	>= 768px
手机到平板之间	<= 767px
手机	<= 480px

BootStrap官网

1、BootStrap的版本了解
2.x.x:兼容性好 / 代码不够简洁，功能不够完善
3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持一般 /偏向于响应式布局开发，移动设备优先的web项目开发
4.x.x:测试阶段，偏向于响应式，移动设备

2.bootstrap 布局容器
bootstrap 的 css 样式中，有一个起着支撑整个页面框架的容器，也叫布局容器，它类似于我们的版心结构。

.container 实现固定宽度并支持响应式布局的容器。

当屏幕宽度 > 1200，则页面宽度固定为 1170px
当屏幕宽度 992~1200，则页面宽度固定为 970px
当屏幕宽度 768~992，则页面宽度固定为 750px
当屏幕宽度 < 768，则页面宽度固定为 100%.

.container-fluid ：实现宽度为全屏 100% 的容器。