英文:
How to enter bootstrap javascript?
问题
你好，我遇到了一个关于 Bootstrap 的问题。我创建了一个下拉菜单，但现在它不起作用。我使用 CDN 安装了 Bootstrap。CSS 部分运行正常，但 JavaScript 部分无法工作。我不知道问题出在哪里。如果有人能帮我解决这个问题，我将不胜感激。我不知道问题出在哪里。
英文:
Hello I have a problem with bootstrap. I created dropmenu and now it's not working. I use CDN to install bootstrap. Css bootstrap works, but javascript not working. I don't know where is problem. I will grateful if some help me resolve this problem. I don't know where is problem.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MessBox</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style/search.css" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-xl" id="menu">
<form class="form-inline" action="search.php" method="post">
<div class="md-form active-cyan active-cyan-2">
<input class="form-control mr-3 mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
</div>
<button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
<button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1 d-flex justify-content-end">
<li class="nav-item dropdown" id="panelMenu">
<a class="nav-link dropdown-toggle mr-2"
id="navbarDropdownMenuLink-333"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user mr-2"></i>
Panel
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-default"
aria-labelledby="navbarDropdownMenuLink-333">
<a class="dropdown-item" href="statistics.php">Statystyki</a>
<a class="dropdown-item" href="account.php">Ustawienia konta</a>
<a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
<a class="dropdown-item" href="logout.php">Wyloguj się</a>
</div>
</li>
</ul>
</div>
</nav>
<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="js./bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</body>
</html>
nbcgbvbvvv b vbvbbvbbvb
答案1
得分: 0
我已经替换了这一行<script src="js./bootstrap.min.js"></script>，像这样测试并告诉我：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MessBox</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/style/search.css" type="text/css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-xl" id="menu">
<form class="form-inline" action="search.php" method="post">
<div class="md-form active-cyan active-cyan-2">
<input class="form-control mr-3 mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
</div>
<button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
<button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between">
<li class="nav-item bg-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->profileUrl()) ?>">
<i class=" fas fa-user mr-2"></i>
Profile
</a>
</li>
<li class="nav-item bg-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->photoUrl()) ?>">
<i class=" far fa-images mr-2"></i>
PhotoView
</a>
</li>
<li class="nav-item bg-mat text-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->notificationUrl()) ?>">
<i class="fas fa-bell mr-2"></i>
Notification
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1 d-flex justify-content-end">
<li class="nav-item dropdown" id="panelMenu">
<a class="nav-link dropdown-toggle mr-2"
id="navbarDropdownMenuLink-333"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user mr-2"></i>
Panel
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-default"
aria-labelledby="navbarDropdownMenuLink-333">
<a class="dropdown-item" href="statistics.php">Statystyki</a>
<a class="dropdown-item" href="account.php">Ustawienia konta</a>
<a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
<a class="dropdown-item" href="logout.php">Wyloguj się</a>
</div>
</li>
</ul>
</div>
</nav>
<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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
英文:
I replaced this line <script src="js./bootstrap.min.js"></script>, Test it like this and tell me :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MessBox</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/style/search.css" type="text/css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- <script src="https://kit.fontawesome.com/a076d05399.js"></script> -->
</head>
<body>
<nav class="navbar navbar-expand-xl" id="menu">
<form class="form-inline" action="search.php" method="post">
<div class="md-form active-cyan active-cyan-2">
<input class="form-control mr-3 mr-3" name="search" placeholder="Wyszukaj" aria-label="Search">
</div>
<button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" name="submitSearch">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
<button class="navbar-toggler btn btn-danger" type="button" data-toggle="collapse" data-target="#mainmenu"
aria-controls="mainmenu" aria-expanded="false" aria-label="Przełącznik nawigacji">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav mr-auto col-xl-7 bg-f2 d-flex justify-content-between">
<li class="nav-item bg-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->profileUrl()) ?>">
<i class=" fas fa-user mr-2"></i>
Profile
</a>
</li>
<li class="nav-item bg-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->photoUrl()) ?>">
<i class=" far fa-images mr-2"></i>
PhotoView
</a>
</li>
<li class="nav-item bg-mat text-mat">
<a class="nav-link" href="<?= htmlEntities($this->profile->notificationUrl()) ?>">
<i class="fas fa-bell mr-2"></i>
Notification
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons col-xl-3 bg-f1 d-flex justify-content-end">
<li class="nav-item dropdown" id="panelMenu">
<a class="nav-link dropdown-toggle mr-2"
id="navbarDropdownMenuLink-333"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user mr-2"></i>
Panel
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-default"
aria-labelledby="navbarDropdownMenuLink-333">
<a class="dropdown-item" href="statistics.php">Statystyki</a>
<a class="dropdown-item" href="account.php">Ustawienia konta</a>
<a class="dropdown-item" href="settings.php">Ustawienia profilu</a>
<a class="dropdown-item" href="logout.php">Wyloguj się</a>
</div>
</li>
</ul>
</div>
</nav>
<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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论