本篇文章写给那些第一次接触Bootstrap框架的学习者,这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。
Bootstrap下载
第一种方法:到bootstrap官网下载http://getbootstrap.com/
第二种方法:bootstrap中文网下载http://www.bootcss.com/
其实这两个方法都是差不多的,方法不重要,只要我们能够下载到我们需要的bootstrap文件就行了。截至到目前bootstrap的最新版本为bootstrap4.1.3,我们这里下载的是4.0版本。这里需要注意的是我们需要下载的是编译版并不是源码,所以下载的时候不要搞错了哦。
下载之后我们把安装包解压,我们会看到很多文件,其实我们用到的只有里面3个,分别是bootstrap.min.css,bootstrap.min.js,bootstrap.bundle.min.js文件
Bootstrap4使用
bootstrap4.0下载之后,我们先来看一下怎么使用它。
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,我们需要在网页的 head 之中添加 viewport meta 标签。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
下面我们还要再引入4个文件, bootstrap.min.css(Bootstrap4 核心 CSS 文件)、jquery.min.js(jQuery文件,必须在bootstrap.min.js 之前引入)popper.min.js(于弹窗、提示、下拉菜单等)、bootstrap.min.js(bootstrap的核心js文件)。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Bootstrap4使用</title>
</head>
<body>
<h1>Bootstrap4使用</h1>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
可能会有同学会问,popper.min.js文件怎么找不到,其实这个和jQuery一样需要我们自行下载的,如果你的项目中没有用到弹窗、提示、下拉菜单等效果的话,不引入这个文件也是没有任何问题的。或者说你直接把bootstrap.min.js文件替换成bootstrap.bundle.min.js文件页可以,后者里面相当于集合了popper.min.js文件。
还有js文件的引入最好放到body结束标签前,不要放在head标签里,至于原因我们后续再说。
如果你不想下载bootstrap的话,你也可以通过CDN来引入bootstrap的必须文件来直接开发。
下方是官网给出的CDN引入地址。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
至于其中的integrity和crossorigin你只需要和CDN引入的安全性有关就行了。