学习要点：
1.Bootstrap 概述
2.Bootstrap 特点
3.Bootstrap 结构
4.创建第一个页面
5.学习的各项准备

主讲教师：李炎恢

本节课我们主要了解一下 Boostrap 历史、特点、用途，以及为什么选择 Boostrap 来开发我们的 Web 项目。

一．Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。
Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

Bootstrap 下载及演示：
国内文档翻译官网：http://www.bootcss.com
瓢城 Web 俱乐部官网：http://www.ycku.com

二．Bootstrap 特点
Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

(1).跨设备、跨浏览器
可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，本课程不再考虑 IE9 以下浏览器。
(2).响应式布局
不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。
(4).内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性，都得到很好的支持。
(6).支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

三．Bootstrap 结构
首先，想要了解 Boostrap 的文档结构，需要在官网先把它下载到本地。Bootstrap下载地址如下：
Bootstrap 下载地址：http://v3.bootcss.com/ (选择生产环境即可，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

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是css 源码映射表，在一些特定的浏览器工具中使用。
2.js 目录包含两个文件，是未压缩和压缩的 js 文件。
3.fonts 目录包含了不同后缀的字体文件。

四．创建第一个页面
我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常显示。
//第一个 Bootstrap

<!DOCTYPE html>

<html lang="zh-cn">

<head>

　　<meta charset="UTF-8">

　　<title>Bootstrap 介绍</title>

　　<link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

　　<button class="btn btn-info">Bootstrap</button>

　　<script src="js/jquery.min.js"></script>

　　<script src="js/bootstrap.min.js"></script>

</body>

</html>

五．学习的各项准备
1.开发工具， 我们使用Sublime Text3作为Bootstrap的开发工具， 并且安装了Emmet代码生成插件；
2.测试工具，除了常规的现代浏览器，其次就是作为移动端的测试工具，我们这里采用的是 Opera Mobile Emulator，和 Chrome 的移动 Web 测试工具。
3.所需基础，至少有 HTML5 第一季课程的基础，Bootstrap 内置了很多 jQuery 插件，虽然使用起来比 jQuery 或 JS 本身要简单的多，但如果有 jQuery 和 JS 课程的基础，那学习理解力就更加深入；
4.课程分辨率：基础课程，我们使用 1024 x 768 来录制，但某些特殊部分，比如响应式和项目课程，需要大分辨率录制，会采用 1440 x 900 来录制。

第 1 章 Bootstrap 介绍的更多相关文章

  1. 第1章 Bootstrap介绍

    学习网址:http://www.bootcss.com/ 下载网址:http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 <link rel= ...

  2. ar技术序章-SDK介绍和选择

    转自: http://blog.csdn.net/kun1234567/article/details/10402535 ar技术序章-SDK介绍和选择 分类: Augmented Reality20 ...

  3. 《Getting Started with WebRTC》第一章 WebRTC介绍

    <Getting Started with WebRTC>第一章 WebRTC介绍 ​ 本章是对WebRTC做概念性的介绍. 阅读完本章后.你将对下面方面有一个清晰的理解:   .  什么 ...

  4. [html5] 学习笔记-bootstrap介绍

    1.Bootstrap介绍 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 2.下面对于官网上给出的最简单的一个bootstra ...

  5. 《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍

    第二章 概念介绍 2.1 什么是UI? 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Mo ...

  6. 第二百三十一节，Bootstrap 介绍

    Bootstrap 介绍 学习要点: 1.Bootstrap 概述 2.Bootstrap 特点 3.Bootstrap 结构 4.创建第一个页面 5.学习的各项准备 本节课我们主要了解一下 Boos ...

  7. 【Bochs 官方手册翻译】 第一章 Bochs介绍

    Bochs 是一个可以完全模拟 Intel x86 计算机的虚拟机系统.它包含了 Intel x86 CPU 仿真.常见设备仿真.以及定制 BIOS.Bochs 可以虚拟多种不同类型的 x86 CPU ...

  8. 第1章 Python介绍

    本章将包含Python的介绍,安装以及Python的数据类型及运算符.其中关于数据类型中的字符串.列表.元组和字典后续章节会着重介绍. 1.1 为什么学Python Python是一门简明并强大的面向 ...

  9. 《Spring敲门砖之基础教程第一季》 第一章 概要介绍

    百度百科say: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/EEful ...

随机推荐

  1. PHP面向对象05_接口与多态

    抽象类与接口 2014-9-2 9:14:32 摘要: 1.抽象类(abstract) 2.接口(interface) 3.多态的应用 1.抽象类(abstract) 特点: 1)抽象类使用abstr ...

  2. Update: ELCImagePickerController

    March 3rd, 2011 Posted by: Matt Tuzzolo - posted under:Articles » Featured I recently spent some tim ...

  3. Hadoop官方文档翻译——YARN Architecture（2.7.3）

    The fundamental idea of YARN is to split up the functionalities of resource management and job sched ...

  4. CAD2015安装教程 AutoCAD2015中文版安装激活图文教程

    28年来,Autodesk一直在坚持不懈地帮助客户提高设计流程效率.AutoCAD提供了可靠的三维自由形状设计工具以及强大的绘图和文档制作功能,在全球拥有数百万用户. autocad2015具有广泛的 ...

  5. [转载]TFS入门指南

    [原文发表地址] Tutorial: Getting Started with TFS in VS2010 [原文发表时间] Wednesday, October 21, 2009 1:00 PM 本 ...

  6. Spark入门实战系列--5.Hive（上）--Hive介绍及部署

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Hive介绍 1.1 Hive介绍 月开源的一个数据仓库框架,提供了类似于SQL语法的HQ ...

  7. Testing - Tips

    1 --- 冒烟测试.可用性测试和回归测试的区别? 在测试领域中,冒烟测试(smoke test).可用性测试(sanity test)和回归测试(regression test)彼此之间很相似,范围 ...

  8. Hadoop阅读笔记（七）——代理模式

    关于Hadoop已经小记了六篇,<Hadoop实战>也已经翻完7章.仔细想想,这么好的一个框架,不能只是流于应用层面,跑跑数据排序.单表链接等,想得其精髓,还需深入内部. 按照<Ha ...

  9. REST API出错响应的设计

    REST API应用很多,一方面提供公共API的平台越来越多,比如微博.微信等:一方面移动应用盛行,为Web端.Android端.IOS端.PC端,搭建一个统一的后台,以REST API的形式提供服务 ...

  10. Winform（C#.NET）自动更新组件的使用及部分功能实现

    声明:核心功能的实现是由园子里圣殿骑士大哥写的,本人是基于他核心代码,按照自己需求进行修改的.   而AutoUpdaterService.xml文件生成工具是基于评论#215楼 ptangbao的代 ...