框架：把大家需要的功能预先写好到一些文件；

Bootstrap特点：

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

　　　　　　其目的是为了让 Web 开发更敏捷；

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

为什么使用Bootstarp？

　　生态圈火，不断地更新迭代；

       提供一套美观大方地界面组件；

       提供一套优雅的 HTML+CSS 编码规范；

      让我们的 Web 开发更简单，更快捷；

安装Bootstrap

1  2  3  4   
      5    6   
      7   
      8   
      9   
     10   
     11   
     12 13 14   
     15   
     16   
     17   18   
     19   20   
     21   22 23 

基础的Bootstrap模板

1  2  3    4     
      5     
      6     
      8     
      9     10     
     11     
     12     
     13     
     14     
     18   19   20     
Hello, world!
21     
     22     23     
     24     25   26 

compatible

1 
     

• 此属性为文档兼容模式声明，表示如果在IE浏览器下则使用最新的标准渲染当前文档

视口

• 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
• 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
• 视口的宽度可以通过meta标签设置
• 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
• width:视口的宽度
• initial-scale：初始化缩放
• user-scalable:是否允许用户自行缩放（值：yes/no; 1/0）
• minimun-scale:最小缩放initial-scale

第三方依赖

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

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

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

  • 基础CSS样式

    • • 统一预制标签样式

    预置界面组件

    JavaScript插件

    JavaScript插件的依赖情况

    如何使用Javascript插件

    内置组件

    • • data-spy=”affix”
      • data-offset-top=”什么位置出现”
      • data-offset-bottom=”什么位置消失”

    深度自定义 Bootstrap

    在线自定义

    源码编译

    LESS语言

    • 媒体查询：

      /* 超小屏幕（手机，小于 768px） */
      /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

      /* 小屏幕（平板，大于等于 768px） */

      @media (min-width: @screen-sm-min) { ... }

      /* 中等屏幕（桌面显示器，大于等于 992px） */

      @media (min-width: @screen-md-min) { ... }

      /* 大屏幕（大桌面显示器，大于等于 1200px） */

      @media (min-width: @screen-lg-min) { ... }
      我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

      @media (max-width: @screen-xs-max) { ... }

      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
      @media (min-width: @screen-lg-min) { ... }