Bootstrap3 _ 快速起步

快速起步

这一节只要知道如何把Bootstrap库的文件正确插入到HTML文档中就可以了。要特别注意的是，Bootstrap的所有JS插件都是依赖于jQuery库的，因此jQuery必须放在前面。

使用第三方CDN托管的Bootstrap库

平时，为了方便，可以直接引用托管在专否cdn上的Bootstrap库。需要注意的是：因为Bootstrap的所有JavaScript插件都是基于jQuery库的，所以jQuery库必须提前引入，放在bootstrap.min.js前面。

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

<!-- Bootstrap 所有JS插件都依赖于jQuery，因此jQuery必须放在前面 -->
<script src="https://cdn.zhuanfou.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap 核心JS文件 -->
<script src="https://cdn.zhuanfou.com/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

一个基本的模板

如下所示，是一个使用Bootstrap的基本模板。（下载该模板）

<!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">
<title>Bootstrap模板</title>

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

<!-- Bootstrap 所有JS插件都依赖于jQuery，因此jQuery必须放在前面 -->
<script src="https://cdn.zhuanfou.com/jquery-3.3.1.min.js"></script>

<!-- Bootstrap 核心JS文件 -->
<script src="https://cdn.zhuanfou.com/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<body>

<h3>Bootstrap <small>你值得拥有</small></h3>

</body>
</html>

运行一下

IE兼容模式

Bootstrap并不支持版本太老的IE浏览器，为了尽可能的兼容IE浏览器，可在HTML文档head部分中添加如下meta标签。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

基础模板

Starter template

Bootstrap theme

Grids

Jumbotron

Narrow jumbotron

Navbar模板

Navbar

Static top navbar

Fixed navbar

应用场景

Cover

Carousel

Blog

Dashboard

Sign-in page

Justified nav

Sticky footer

Sticky footer with navbar

特殊模板

Non-responsive

Off-canvas

下方会分别介绍自行下载托管Bootstrap库，以及利用各种包管理软件来安装。对于包管理软件，专否保持中立态度，需之则学，不需则跳过。本小节的核心是了解如何在HTML文档中正确引入Bootstrap源文件。

下载Bootstrap库并自行托管

从GitHub上下载3.3.7版本的Bootstrap库，解压后，把所有文件放在网站的服务器上，以待引用。（放到服务器时要保持文件之间的相对路径，也就是直接把解压后的那三个文件夹放在服务器的同一处）

bootstrap-3.3.7-dist/
    ├── css/
    │     ├── bootstrap.css
    │     ├── bootstrap.css.map
    │     ├── bootstrap.min.css
    │     ├── bootstrap.min.css.map
    │     ├── bootstrap-theme.css
    │     ├── bootstrap-theme.css.map
    │     ├── bootstrap-theme.min.css
    │     └── bootstrap-theme.min.css.map
    ├── js/
    │     ├── bootstrap.js
    │     ├── bootstrap.min.js
    │     └── npm.js
    └── fonts/
          ├── glyphicons-halflings-regular.eot
          ├── glyphicons-halflings-regular.svg
          ├── glyphicons-halflings-regular.ttf
          ├── glyphicons-halflings-regular.woff
          └── glyphicons-halflings-regular.woff2

css文件夹、js文件夹、fonts文件夹三者需要放在服务器的同一个位置，其中fonts文件夹中主要是字体图标文件。另外，bootstrap.min.css文件是对bootstrap.css文件进行压缩而得，bootstrap.min.js是对bootstrap.js进行压缩而得。

使用 npm 进行安装

npm是JavaScript的包管理软件，可使用npm工具安装Bootstrap：

$ npm install bootstrap@3

通过 Bower 进行安装

通过Bower工具也可以安装Bootstrap：

$ bower install bootstrap

通过 Composer 进行安装

通过Composer工具也可以安装Bootstrap：

$ composer require twbs/bootstrap

通过 Yarn 进行安装

通过yarn包管理软件安装Bootstrap：

$ yarn add bootstrap

快速起步

推广