Bootstrap 5 JavaScript 功能不适用于任何页面答案

【问题标题】：Bootstrap 5 JavaScript function does not work on any pagesBootstrap 5 JavaScript 功能不适用于任何页面
【发布时间】：2021-06-01 16:58:47
【问题描述】：

我在 asp.net 核心项目中使用 bootstrap 5，CSS 正在正确加载，但无论 HTML 属性放在任何页面上，javascript 功能都无法正常工作。

在下面的示例中，我使用的是引导工具提示，但引导工具提示不起作用，因为这里没有 javascript 引导功能起作用。

nav-tab、carousel 和其他引导 javascript 函数也是如此。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Classictravel</title>
    <link href="~/lib/fontawesome/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="~/css/main.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;800&display=swap" rel="stylesheet">

</head>
<body>
    <div class="container-fluid">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

虽然控制台中没有错误，但工具提示无法正常工作。

在 asp.net 核心项目中使用引导程序的正确方法是什么？为什么 bootstrap javascript 函数在我的项目中不起作用？

我的实现中缺少什么配置？

当鼠标悬停在工具提示上时，这是我得到的输出。

【问题讨论】：

标签： twitter-bootstrap asp.net-core bootstrap-5

【解决方案1】：

您可以参考document中的概述。

在布局中使用包含Popper.js 的bootstrap.bundle.min.js：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

初始化页面上的所有工具提示：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}


<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>

@section Scripts {
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
}

【讨论】：

这是 jquery 我不想使用 jquery：我必须添加以下代码才能使其正常工作。 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })