Bootstrap 开发概要

骑猪看日落 2022-05-19 08:18 175阅读 0赞

Bootstrap 是 Twitter 开源的、移动设备优先的、响应式、基于 HTML/CSS/JavaScript/jQuery 的前端框架。  
  
**作者：**王克锋  
**出处：**[https://kefeng.wang/2017/02/05/bootstrap/][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][]  
[官方网站][Link 1]  
[中文文档][Link 2]  
[编写第一个响应式页面][Link 3]  
[使用 Bootstrap 构建响应式页面][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/][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>
    
        <h1>Hello, world!</h1>
    
        
        <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]  
[https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip][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][https_code.jquery.com_jquery-1.12.3.min.js]  
解压到目录 src\\main\\webapp\\bootstrap 下，jquery-1.12.3.min.js 也下载到 bootstrap/js/ 目录下。

### 4.2 使用 CDN(推荐) ###

#### 4.2.1 百度 CDN（国内） ####

#### 4.2.2 BOOT CDN（国内） ####

#### 4.2.3 官网 CDN（国外） ####

## 5.在线编辑器 ##

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

### 5.1 Layoutit 官方网站（Bootstrap 3.3.5） ###

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

### 5.2 Bootstrap 中文网（Bootstrap 2.3.1） ###

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

[https_kefeng.wang_2017_02_05_bootstrap]: https://kefeng.wang/2017/02/05/bootstrap/
[-_-_-]: https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh
[Less]: http://www.runoob.com/manual/lessguide/
[Link 1]: https://getbootstrap.com/
[Link 2]: http://v3.bootcss.com/
[Link 3]: https://www.ibm.com/developerworks/cn/web/1507_wangqf_firstrppage/
[Bootstrap]: https://www.ibm.com/developerworks/cn/web/1508_wangqf_bootstrap/index.html
[http_v3.bootcss.com_getting-started]: http://v3.bootcss.com/getting-started/
[https_github.com_twbs_bootstrap_releases]: https://github.com/twbs/bootstrap/releases
[https_github.com_twbs_bootstrap_releases_download_v3.3.5_bootstrap-3.3.5-dist.zip]: 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]: https://code.jquery.com/jquery-1.12.3.min.js
[http_v3.bootcss.com_components]: http://v3.bootcss.com/components/
[http_v3.bootcss.com_javascript]: http://v3.bootcss.com/javascript/
[http_www.layoutit.com_build]: http://www.layoutit.com/build
[http_www.bootcss.com_p_layoutit]: http://www.bootcss.com/p/layoutit/