html 引导字体颜色未更改,导航栏按钮响应未按预期工作

xv8emn3q  于 2022-12-09  发布在  其他
关注(0)|答案(2)|浏览(144)

我是一个前端新手,我的教授说也许Bootstrap是很好的练习,所以我试图编写一个非常简单的页面,但我遇到了一些问题。
这是我的代码

https://github.com/nguyencuc2586/project1

这是我的问题1的图片(抱歉,因为图片太大,所以我必须上传到这个页面)
https://imgur.com/a/osfbQl5
正如您在我的代码中所看到的,我在style.css文件中编写了以下代码

body {
background: #333;
color: #fff;
}

所以我以为所有的文字都必须是白色的?但是你可以在图片中看到,文字不都是白色的吗?
我的第二个问题是,在这张图中

右上角的图标,它不能作为响应图标工作,我的意思是当我点击它时,它没有显示任何东西。
你能给予我一些建议吗?先谢谢你。

pdtvr36n

pdtvr36n1#

jQuery应该在PopperBootstrap JS之前,如下所示:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

此外,如果您要覆盖引导CSS,请添加!important
如果这能解决你的问题,请告诉我。

d7v8vwbk

d7v8vwbk2#

要使用CSS,必须将其保存在bootstrap链接下。要解决菜单图标不能工作的问题,还必须将JS bootstrap链接保存在jQuery和pooper下。

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
<title>Bootstrap Theme</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css" />

和引导js

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

相关问题