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的最基本的使用方法介绍完了,希望对您有所帮助。

论坛主帖
146
论坛跟帖
110
在线访客
5
今日主帖
1
今日跟帖
0
今日注册
0
69
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html