bootstrap是广受欢迎的前端框架,使用bootstrap可以让您方便且快速地完成页面样式的制作。bootstrap4是在之前版本基础上的大改进,使用bootstrap4几乎可以不用自己写css代码。这篇我们就来简单介绍一下如何使用bootstrap4。
我们首先到bootstrap4的官方网站:https://getbootstrap.com
进入网站后,我们会看到下面的页面内容:
我们点击“Download”按钮就能进入下载页面,然后在下载页面找到“Compiled CSS and JS”,如下:
这个是编译好的文件,我们直接下载这个文件就可以了。
下载的文件是一个压缩包,我们解压后会看到“css”和“js”两个文件夹,进入这两个文件夹我们能够看到一些文件,其中我们需要使用的文件是“css”目录下面的“bootstrap.min.css”,以及“js”目录下面的“bootstrap.min.js”。另外,我们还需要到jQuery的官网下载jQuery,因为bootstrap是基于jQuery的。
有了这些文件,我们就可以在HTML代码中使用了,bootstrap官网给了一个HTML代码案例,这里我们也给一个HTML代码的案例,如下:
<!doctype html>
<html lang="zh-cn">
<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>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js></script>
</body>
</html>
上面这个案例中,我们把“bootstrap.min.css”放在“css”文件夹里面,把“jquery.min.js”和“bootstrap.min.js”放在“js”文件夹里面。
这个是最基本的HTML页面代码,会在页面输出“Hello, world!”。
好了,bootstrap的最基本的使用方法介绍完了,希望对您有所帮助。