Bootstrap 开发概要

Bootstrap 是 Twitter 开源的、移动设备优先的、响应式、基于 HTML/CSS/JavaScript/jQuery 的前端框架。

作者：王克锋
出处：https://kefeng.wang/2017/02/05/bootstrap/
版权：自由转载-非商用-非衍生-保持署名，转载请标明作者和出处。

1.概述

Bootstrap 是全球最流行的(官网用语)前端框架。
Bootstrap 基于 HTML、CSS、JavaScript/jQuery，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。2011年8月在 GitHub 上开源。

预备知识：jQuery, Sass / Less
官方网站
 中文文档
 编写第一个响应式页面
 使用 Bootstrap 构建响应式页面

2.特性

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

3.包含内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

4.环境安装

http://v3.bootcss.com/getting-started/

可以禁用其缩放，使其像原生应用一样：user-scalable=no
可以指定缩放范围：minimum-scale=1.0, maximum-scale=2.0

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 演示</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">  
</head>

<body><!-- 此前放入 header.vm -->

    <h1>Hello, world!</h1>

    <!-- 此后放入 footer.vm，js 脚本放在尾部有助于性能 -->
    <script src="script/jquery-1.12.3.min.js"></script>
    <script src="script/jquery-wrapper.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

4.1 下载至本地工程

https://github.com/twbs/bootstrap/releases
https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip
https://code.jquery.com/jquery-1.12.3.min.js
解压到目录 src\main\webapp\bootstrap 下，jquery-1.12.3.min.js 也下载到 bootstrap/js/ 目录下。

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="script/jquery-1.12.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

4.2 使用 CDN(推荐)

4.2.1 百度 CDN（国内）

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

4.2.2 BOOT CDN（国内）

<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

4.2.3 官网 CDN（国外）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

5.在线编辑器

在线以鼠标拖拉的方式创建布局，布局完毕后点“下载”，即可得到 HTML 代码，非常方便。
包含4部分内容：布局、基本CSS、组件、JS。
组件：http://v3.bootcss.com/components/
JS插件：http://v3.bootcss.com/javascript/

5.1 Layoutit 官方网站（Bootstrap 3.3.5）

http://www.layoutit.com/build
优点：包含最新功能；缺点：下载前需要注册(gmail44)，英文界面。

5.2 Bootstrap 中文网（Bootstrap 2.3.1）

http://www.bootcss.com/p/layoutit/
优点：无需注册，中文界面；缺点：不是最新。