使用Bootstrap做轮播图

什么是Bootstrap？

     - Bootstrap 是当下最流行的前端框架（界面工具集）；

  -特点就是灵活简洁，代码优雅，美观大方；

  - 其目的是为了让 Web 开发更敏捷；
  - 是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发。

   使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

下载Bootstrap：- [官方文档](http://getbootstrap.com/)
                          - [中文文档](http://v3.bootcss.com/)

    

 * 视口声明：<meta name="viewport"   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

   

- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
  + width:视口的宽度
  + initial-scale：初始化缩放
  + user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
  + minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放
  + maximum-scale:最大缩放
*条件注释:条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉
  ### 第三方依赖

- [jQuery](https://github.com/jquery/jquery)

    > Bootstrap框架中的所有JS组件都依赖于jQuery实现

- [html5shiv](https://github.com/aFarkas/html5shiv)

    > 让低版本浏览器可以识别HTML5的新标签，如header、footer、section等

- [respond](https://github.com/scottjehl/Respond)

    > 让低版本浏览器可以支持CSS媒体查询功能

## 建议以后在HTML中将脚步的引入放到页面最底下
  CSS媒体查询：
   @media (判断条件（针对于当前窗口的判断）){
    /*这里的代码只有当判断条件满足时才会执行*/
}

 @media (min-width: 768px) and (max-width: 992px) {
  /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
  .container {
    width: 750px;
  }
}
  - 当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行
## 基础CSS样式

- [概要](http://v3.bootcss.com/css/#overview)
- [预置排版样式](http://v3.bootcss.com/css/#type)
    + 统一预制标签样式
- [按钮样式](http://v3.bootcss.com/css/#buttons)
- [表格样式](http://v3.bootcss.com/css/#tables)
- [表单样式](http://v3.bootcss.com/css/#forms)
- [图片样式](http://v3.bootcss.com/css/#images)
- [辅助工具类](http://v3.bootcss.com/css/#helper-classes)
- [代码样式](http://v3.bootcss.com/css/#code)
- [栅格系统](http://v3.bootcss.com/css/#grid)
    + __xs__ : 超小屏幕 手机 (<768px)  
    + __sm__ : 小屏幕 平板 (≥768px)
    + __md__ : 中等屏幕 桌面显示器 (≥992px)
    + __lg__ : 大屏幕 大桌面显示器 (≥1200px)
- [响应式工具类](http://v3.bootcss.com/css/#responsive-utilities)
    + __hidden-xx__ : 在某种屏幕下隐藏
    + __visible-xx__ : 在某种屏幕尺寸下显示
 ## 预置界面组件

- [导航](http://v3.bootcss.com/components/#nav)
- [导航条](http://v3.bootcss.com/components/#navbar)
- [面包屑导航](http://v3.bootcss.com/components/#breadcrumbs)
- [下拉菜单](http://v3.bootcss.com/components/#dropdowns)
- [按钮式下拉菜单](http://v3.bootcss.com/components/#btn-