标签：

1-1 课程介绍

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

1)      漂亮的设计

2)      友好的学习曲线

3)      卓越的兼容性

4)      12列的响应式栅格结构

5)      丰富的组件

Bootstrap是一款简洁强大的前端开发框架，让web开发更迅速、简单。

特点：简洁、扁平化的图标、优雅的排版、

2-1 如何开始使用Bootstrap

Bootstrap分为Bootstrap2 和 bootstrap3

Bootstrap2 兼容很多浏览器、包括IE老版本，由于背着这样的包袱，功能不够激进，代码不够简洁。

自Bootstrap 2.3.2 版本之后，官方关闭了对此系列的更新。

Bootstrap3 则放弃了IE7和firefox 3.x 版本的支持。虽然对IE8支持，但是IE8对CSS3的支持有限，所以有些效果的呈现大大折扣。

我们这里主要研究Bootstrap 3.2.0 版本，官方页面很简洁，

如果不想下载可以直接引用Bootstrap官网的CDN(在线代码库)

下载的文件目录

(注意boostrap所有的样式和插件都依赖Jquery，所以必须先引入)

以上是boostrap官方提供的模板，bootstrap 不提供IE的兼容模式，

平时用的移动浏览器是把页面放在一个虚拟的视口，也就是viewport 中，虚拟视口比屏幕宽，不会造成页面的挤压，但是对破坏一些针对移动浏览优化的布局。用户可以通过缩放和平移看页面各部分信息。

Viewport可以让网页开发者控制网页的大小和缩放，

Width=device-width,这个就是viewport 的宽度等于设备的宽度。

Initial-scale=1 设置初始载入时的缩放比例，1表示不缩放。

上面的意思宽度等于设备的分辨率，不缩放，这样页面显示更加细腻。

这段注释解释：

第一个引入的js 让IE8支持html5，第二个引入是让IE8支持media query

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

"指定用户是否可以缩放视区，即缩放Web页面的视图。"是user-scalable指令 ,值为yes时允许用户进行缩放，值为no时不允许缩放。

基于bootstrap的网页开发

标签：

原文地址：http://www.cnblogs.com/zplogo/p/4544087.html