Bootstrap 环境安装 - Bootstrap 3 基础教程

Bootstrap 3 是前端框架，所以不需要繁冗复杂的安装

下载 Bootstrap

可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本

打开网页我们可以看到两个下载链接

Download Bootstrap ：

点击该按钮，可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本

不包含文档和最初的源代码文件
Download Source ：

点击该按钮，可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码

如果使用的是未编译的源代码，则需要编译 LESS 文件来生成可重用的 CSS 文件

对于编译 LESS 文件，Bootstrap 官方只支持 Recess ，这是 Twitter 的基于 less.js 的 CSS 提示

本教程旨在实用，所以我们使用的是压缩的预编译版本

HTML 模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示

<!DOCTYPE htm>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<body>...</body>

我们把 jQuery 和 bootstrap.min.js 放置在头部

Bootstrap 3 第一个范例

现在我们尝试使用 Bootstrap 输出 "Hello, world!"

<h1>Hello, world!</h1>

运行范例 »

Bootstrap CDN 推荐

国内推荐使用 BootCDN 上的库

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件( 一般不使用 )  -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>

<!-- jQuery 文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用 https://www.staticfile.org/
国际推荐使用： https://cdnjs.com/