bootstrap4怎么使用入门基础
剑鱼论坛 发表于 2020年01月07日 CSS/CSS3 49
剑鱼论坛
LV 5 [初中]
最后在线：38分钟前
加入时间：262天前
主帖：84 跟帖：44
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的最基本的使用方法介绍完了，希望对您有所帮助。
- 0条回复 49次浏览
