最受欢迎的前端框架 —

最受欢迎的前端框架 —— Bootstrap学习

Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的，是目前最受欢迎的前端框架，它简单灵活，使得Web前端开发更加快捷方便。

首先，要基本掌握Bootstrap框架：Bootstrap基本结构、Bootstrap CSS、Bootstrap 布局组件、Bootstrap 插件，以及用LESS实现定制。

Bootstrap的特点：

响应式布局设计：布局自动适应设备尺寸（但是移动设备优先）。
移动设备优先：从Bootstrap 3起，移动设备优先的样式，贯穿整个框架的库。
所有主流浏览器都支持Bootstrap。
为开发人员创建了，提供统一解决方案的接口。
开源、可基于Web定制。

Bootstrap 包的内容：

基本结构：提供了一个带有网格系统、链接样式、背景的基本结构。
CSS特性：一些全局的CSS设置、定义了基本的HTML元素的默认样式、可扩展的class、以及先进的网格系统的样式。
布局组件：包含10多个可重用的组件，用于创建图像、下拉菜单等。
插件：包含10多个自定义的jQuery插件，可以选择包含的插件。
定制Bootstrap：还可以定制Bootstrap的组件、LESS变量、jQuery插件，来获得自己的Bootstrap版本。

预编译版的Bootstrap的文件目录结构：

其中包含了Glyphicons的 fonts，这也是一个可选的主题。

Bootstrap 源代码（也包含预编译的文件）的文件结构：

如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。很明显，我们通常选择预编译版的压缩版。

引入Bootstrap的文件：

<!-- 直接使用CDN（压缩版:4.x版本好像还有问题，要报错，一些响应式样式也没有了） -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 使用bootstrap的javascript插件之前，需要引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用Bootstrap的CSS样式：

由于Bootstrap使用的样式多是H5和CSS3，所以html页面的doctype声明最好是H5的：<!DOCTYPE html>。

Bootstrap3最显著的变化是移动设备优先（然后才是桌面设备），因为移动端的用户越来越多了，在这以前必须要引入另一个css，才能让项目更好地支持移动设备，现在bootstrap本身的css文件就对移动设备友好支持。

响应式图像：

<!-- 保证图像不会超过父元素的尺寸 img-responsive{display:inline-block;max-100%;height:auto;} -->
<!-- inline-block：相对周围元素，以inline呈现，却可以像block元素一样，设置height、width -->
<img src="1.jpg" class="img-responsive" />

Bootstrap使用Normalize来实现跨浏览器的一致性：使用了体积很小的Normalize.css文件。

容器类Container（用于包裹其内容）：

<!-- .container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;} -->
<div class="container">hello</div>