本文我们主要了解一下 Boostrap 历史、特点、用途，以及为什么选择 Boostrap 来开发我们的 Web 项目。 [b]学习要点： [/b]1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 [b]一、Bootstrap 概述 [/b]Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。 2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。 Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。 [b]Bootstrap 下载及演示： [/b]国内文档翻译官网：[url=http://www.bootcss.com]http://www.bootcss.com[/url] 瓢城 Web 俱乐部官网：[url=http://www.ycku.com]http://www.ycku.com[/url] [b]二、Bootstrap 特点 [/b]Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下： [b](1).跨设备、跨浏览器 [/b]可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，本课程不再考虑 IE9 以下浏览器。 [b](2).响应式布局 [/b]不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。 [b](3).提供的全面的组件 [/b]Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。 [b](4).内置 jQuery 插件 [/b]Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。 [b](5).支持 HTML5、CSS3 [/b]HTML5 语义化标签和 CSS3 属性，都得到很好的支持。 [b](6).支持 LESS 动态样式 [/b]LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。 [b]三、Bootstrap 结构[/b] 首先，想要了解 Boostrap 的文档结构，需要在官网先把它下载到本地。Bootstrap下载地址如下： Bootstrap 下载地址：[url=http://v3.bootcss.com/]http://v3.bootcss.com/[/url] (选择生产环境即可，v3.3.4) 解压后，目录呈现这样的结构： 　　　　　　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 主要分为三大核心目录：[b]css(样式)、js(脚本)、fonts(字体) [/b]。 1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。 2.js 目录包含两个文件，是未压缩和压缩的 js 文件。 3.fonts 目录包含了不同后缀的字体文件。 [b]四、创建第一个页面 [/b]我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常显示。 //第一个 Bootstrap [b]五、学习的各项准备[/b] [b]1.开发工具[/b]， 我们使用Sublime Text3作为Bootstrap的开发工具， 并且安装了Emmet代码生成插件； [b]2.测试工具[/b]，除了常规的现代浏览器，其次就是作为移动端的测试工具，我们这里采用的是 Opera Mobile Emulator，和 Chrome 的移动 Web 测试工具。 [b]3.所需基础[/b]，至少有 HTML5 第一季课程的基础，Bootstrap 内置了很多 jQuery 插件，虽然使用起来比 jQuery 或 JS 本身要简单的多，但如果有 jQuery 和 JS 课程的基础，那学习理解力就更加深入； [b]4.课程分辨率[/b]：基础课程，我们使用 1024 x 768 来录制，但某些特殊部分，比如响应式和项目课程，需要大分辨率录制，会采用 1440 x 900 来录制。 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附一个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。