Bootstrap简介，如何下载和使用Bootstrap？

　　Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的一款框架，简洁、直观、强悍的的优点，极大地提高了前端人员的工作效率，使 Web 开发变得更加快捷。那么如何下载和使用Bootstrap呢？本节课就来介绍下Bootstrap的下载和使用方法。

　　打开浏览器，访问Bootstrap官方网站，获取Bootstrap的下载地址。本书基于Bootstrap的4.4.1版本进行讲解。Bootstrap官方网站的首页如图1所示。

　　图1 Bootstrap首页

　　Bootstrap提供了3种下载方式供开发者进行选择，第1种方式是下载预编译的文件;第2种方式是下载源文件进行手动编译，Bootstrap 4的源文件采用了Sass进行编写;第3种方式是使用CDN来引入。

　　如果不需要了解Bootstrap的源代码，则可以直接选择预编译的文件来使用即可。由于国外网站访问速度慢，读者也可以使用本书源代码中的bootstrap-4.4.1-dist.zip文件。

　　Bootstrap CDN是为了简化开发，提供了大量预编译的CSS、JavaScript和组件，使用这种方式可以直接跳过下载，将编译好的文件直接引用到项目中即可，示例代码如下。

<!-- Bootstrap 4核心CSS文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- Bootstrap 4核心JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

　　需要注意的是，CDN方式的代码需要到指定服务器中进行下载，如果是离线项目，则这种方式是无效的。

猜你喜欢：

Normalize.样式库的特点，如何下载和使用Normalize.css？

TypeScript零基础入门教程下载【传智教育】

传智播客web前端培训课程