Bootstrap入门

Bootstrap概述

• Bootstrap是Twitter公司开发的一个基于HTML、CSS、JavaScript的技术框架，符合HTML、CSS规范，且代码简洁、视觉优美。
• Bootstrap集合CSS、HTML和JavaScript，使用最新的浏览器技术，为实现快速开发提供了一套前端工具包，包括布局、栅格、表格、按钮、导航和提示等。

选择Bootstrap的理由

Bootstrap引入了12栏栅格结构的布局理念，使设计质量高、风格统一的网页变得十分容易。它包含了HTML、CSS和JavaScript三大主要部分。

• Bootstrap的HTML是基于HTML5的最新前沿技术，摒弃了那些复杂而毫无意义的标签，引入了全新的标签。
• Bootstrap的CSS是使用LESS创建的CSS，是新一代的动态CSS。
• Boostrap的JavaScript是使用jQuery的CSS，是优秀的JavaScript，它不会使每个用户为了相似的功能去网站上下载一份相同的代码，而是用一个代码库，将常用的函数放进去，按需取用。

Bootstrap构成模块

Bootstrap构成模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的LESS部分。与前一版相比，Bootstrap增加了多个新模块。

页面布局

布局对于每个项目都必不可少。Bootstrap在960栅格系统的基础上扩展出一套优秀的栅格布局，而在响应式布局中有更强大的功能，能让栅格布局适应各种设备。

页面排版

页面排版的好坏直接影响产品的风格，也就是说页面设计的好不好看。在Bootstrap中，页面的排版是从全局的概念上出发，定制了主体文本、段落文本、强调文本、标题、Code风格、按钮、表单、表格等样式。

基本组件

基本组件是Bootstrap的精华之一，其中都是开发者平时需要用到的交互组件。例如，网站导航、标签页、工具条、面包屑、分页栏、提示标签、产品展示、提示信息和进度条等。

jQuery插件

Bootstrap中的jQuery插件主要用来帮助开发者实现与用户交互的功能，Bootstrap1提供了6中常见插件。

1. 模态对话框
2. 下拉项
3. 滚动监听
4. 标签页
5. 工具提示
6. 弹出提示
   Bootstrap2在Bootstrap1的基础上又增加了6款插件，
7. 警告框
8. 按钮
9. 折叠
10. 轮播
11. 输入提示
12. 过渡效果

动态样式语言LESS

LESS是动态CSS语言，它基于JavaScript引擎或者服务器端对传统的CSS进行动态扩展，具有更强大的功能和更好的灵活性。

jQuery UI Bootstrap

jQuery UI Bootstrap除了包含Bootstrap各个方面的功能之外，还在其基础上补充了以下特征：动态添加标签页、日期范围选择组件、自定义文件载入框、滑动块、日期空间。

Bootstrap的主要特色

• 跨设备、跨浏览器
• 提供12列栅格布局
• 支持响应式设计
• 可定制的jQuery插件
• 选用LESS构建动态样式
• 支持HTML5
• 支持CSS3
• 提供开源代码

Boostrap的主要功能

• 栅格系统

栅格系统与著名的960Grid大同小异，不过960Grid默认是16栏、940像素宽，由于LESS带来的动态语言特性（变量、函数等），可以通过配置几个参数，自定义栅格。

• 布局

布局主要包括一个固定宽度的居中，一个可变宽度的浮动布局。

• 字体样式
• 多媒体展现
• 表单
  Bootstrap对表单进行了比较充分的定制，风格比较明显。导航等网站的全局导航栏保持一致，使用样式实现背景色渐变，固定在头部，因此不需要考虑浏览器兼容问题。

Bootstrap版本变化

Bootstrap1

2011年8月，Twitter推出了用于快读搭建Web应用程序的轻量级前端开发工具Bootstrap，该工具由Twitter的设计师Mark Otto和Jacob Thornton合作完成。Bootstrap是一套用于开发Web的应用程序，符合HTML和CSS简洁但优美规范的库。

Bootstrap2

2012年1月，Twitter在开发者博客上公布消息，其6个月前发布的轻量级前端开发工具Bootstrap迎来重大改进，正式升级为Bootstrap2。Bootstrap2在原有特性的基础上着重改进了用户的体验和交互性，比如新增加的媒体展示功能，适用于只能手机上多种屏幕规格的响应式布局，另外还新增了12款jQuery插件，可以满足Web页面常用的用户体验和交互功能。
Bootstrap2的一个重大改进是添加了响应式设计的特征，Bootstrap1中并不支持这一特征。
Bootstrap2对现有框架进行了清晰的功能划分，主要分为脚手架（Scaffolding）、基础CSS、构件库和jQuery插件库。

• Scaffolding

主要提供基于网格的各种布局，包括普通栅格系统、嵌入式栅格、固定布局、自适应布局，同时可以自定义网格和布局。

• 基础CSS

包括各种排版样式（标题、段落、引用块、列表、内联标签等），在代码展示方面提供了基于code标签的内嵌代码，基于pre的块代码和基于Google Prettify的样式代码。此外，提供各种表格、表单、按钮、图标的展示方式。

• 构件库

提供了基于按钮、导航、标签、警告、进度栏、图像网格等控件。

• jQuery插件库

提供了十几种插件实现动态效果，例如模态对话框、下拉项、标签页、工具提示、弹出提示、轮播等，开发者可以根据自己的业务需求使用不同的插件实现各种动态效果。

Bootstrap参考资源

Bootstrap中文参考
Bootstrap英文参考
Bootstrap中文网