一、Bootstrap是什么
1、Bootstrap是用于快速开发Web应用程序和网站的前端框架,基于HTML,CSS,JavaScript
2、 由Twitter开发,并开源。
二、Bootstrap如何用
1、可以将bootstrap编译好的压缩包直接下载到本地,放到项目工程中,直接引用
2、可以使用bootCDN来在线引用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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<!-- Bootstrap 核心文件的引入-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
BootCDN方式引入:
如图所示,在bootCDN页面搜索bootstrap,找到自己要使用的版本,引入bootstrap.css或者是bootstrap.min.css,两者的区别是一个是没压缩(bootstrap.css),另一个是压缩版(bootstrap.min.css)
引入bootstrap.js,引入bootstrap.js之前要先引入jQuery.js,因为bootstrap.js依赖于jQuery.js
引入jQuery.js
代码展示如下:
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<!-- Bootstrap 核心文件的引入-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>