20分钟成功编写bootstrap响应式页面就这么简单_javascript技巧.docVIP

20分钟成功编写bootstrap响应式页面 就这么简单 最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了 Bootstrap 后，再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了。 经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍 Bootstrap，并且带领大家一起实现一个响应式页面。图 1. 移动优先，适应不同设备 一、安装最简单的方式是直接在网页中引用内容分发网络（CDN）提供的 Bootstrap，当用户访问网页时，会从就近的服务器上获取资源。 清单 1. 从内容分发网络上获取 Bootstrap !-- Latest compiled and minified CSS -- link rel=stylesheet href=bootstrap/3.3.4/css/bootstrap.min.css !-- Optional theme -- link rel=stylesheet href=bootstrap/3.3.4/css/bootstrap-theme.min.css !-- Latest compiled and minified JavaScript -- script src=bootstrap/3.3.4/js/bootstrap.min.js /script 还可以选择下载 Bootstrap 在本地部署。用户可以下载页面下载完整的 Bootstrap，也可以在定制页面根据项目需要，选择项目用到的功能，编译并下载一个简化版的 Bootstrap。下载完成后得到一个 zip 文件，解压后的目录结构如下所示： 清单 2. Bootstrap 目录结构 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 这里我们主要关注三个简化后的文件：bootstrap.min.css 是 Bootstrap 的主要组成部分，包含了大量要用到的 CSS 类；bootstrap-theme.min.css 包含了可选的 Bootstrap 主题；bootstrap.min.js 提供了一些 JavaScript 方法，需要注意的是 Bootstrap 依赖于 jQuery，因此使用 bootstrap.min.js 前必须引入 jQuery。和使用内容分发网络一样，我们使用相对路径在自己的页面中引入相应的 CSS 和 JavaScript。在实际开发中，我们常常使用 Bootstrap 提供的模板作为起点，该模板引入了响应式页面需要的元数据和 Bootstrap，开发者可在此基础之上编写自己的响应式页面： 清单 3. Bootstrap 基础模板 !DOCTYPE html html lang=en head meta charset=utf-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1 !-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -- titleBootstrap 101 Template/title !-- Bootstrap -- link href=css/bootstrap.min.css rel=stylesheet !-- HTML5 shim and Respond.js f