肉渣教程

快速起步

上一节 下一节

这一节只要知道如何把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

快速起步

上一节 下一节