基于bootstrap的网页开发

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时不容许缩放。