1.Bootstrap基础知识

BootStrap的中文官方网站为http://www.bootcss.com/
更详细的教程，还是访问中文官方网站

BootStrap是什么？

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。


initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何缩放。
也可以加上user-scalable=no可以禁用缩放功能。
Bootstrap不支持IE古老的兼容模式。为了让IE浏览器运行最新的渲染默认，建议加入如下代码

 

为什么使用Bootstrap？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

 

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

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web项目中。提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

文件详细说明：

  1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

  2.CSS：Bootstrap 自带以下特性：全局的CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

  3.组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

  4.JavaScript 插件：Bootstrap 包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

 

HTML5文档类型(DOCTYPE)

Bootstrap使用了一些HTML5元素和CSS属性。为了让这些正常工作，需要使用HTML5文档类型.如果不使用HTML5文档类型，可能会出现浏览器显示不一致情况。

 ....

为了让Bootstrap开发的网站对移动设备友好，确保适当绘制和触屏缩放，需要在网上的head之中添加viewport meta标签

Width属性控制设备的宽度。设置为device-width可以确保它能呈现在不同设备上。

Width属性控制设备的宽度。设置为device-width可以确保它能呈现在不同设备上。
initial-scale=1确保网页加载时，以1:1的比例呈现，不会有任何缩放。
也可以加上user-scalable=no可以禁用缩放功能。

官方提供的最简单 Bootstrap 页面

  
    
    
    
    
    

    
    

    
    
    
  
  
    
你好，世界！

    
    
    
    
  

总结：
  1.Bootstrap3是以移动开发优先
  2.HTML页面文档类型必须为HTML5