Bootstrap4 安装

一、通过 NuGet 安装 Bootstrap(推荐)

在 Visual Studio 的包管理器控制台执行:

Install-Package bootstrap -Version 4.3.1Code language: CSS (css)

安装完成后,文件会出现在:

wwwroot/lib/bootstrap/
├── css/
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js/
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

二、jQuery 和 Popper.js 的本地处理

Bootstrap 4 的 JS 组件依赖 jQuery 和 Popper.js,NuGet 里的 bootstrap 包不包含这两个文件,需要单独处理。

方式 A:NuGet 安装(推荐,纯内网可用)

Install-Package jQuery -Version 3.3.1
Install-Package Popper.js -Version 1.14.7Code language: CSS (css)

安装后路径通常是:

wwwroot/lib/jquery/dist/jquery.slim.min.js
wwwroot/lib/popper.js/dist/umd/popper.min.js

方式 B:手动下载放到 wwwroot/lib 下

如果 NuGet 版本不对,也可以手动把文件放到:

wwwroot/lib/jquery/jquery-3.3.1.slim.min.js
wwwroot/lib/popper/popper.min.js

三、在 ASP.NET Core MVC 视图中引用(本地路径)

布局页 _Layout.cshtml 示例

<!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">

    <title>@ViewData["Title"] - 我的公众号后台</title>

    <!-- Bootstrap CSS(本地) -->
    <link rel="stylesheet"
          href="~/lib/bootstrap/css/bootstrap.min.css" />
</head>
<body>

    <div class="container">
        @RenderBody()
    </div>

    <!-- JS 引用顺序:jQuery → Popper.js → Bootstrap -->
    <script src="~/lib/jquery/dist/jquery.slim.min.js"></script>
    <script src="~/lib/popper.js/dist/umd/popper.min.js"></script>
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>Code language: HTML, XML (xml)

四、最简启动页(对应你文档里的入门模板)

<!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="~/lib/bootstrap/css/bootstrap.min.css">
    <title>Hello, world!</title>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center">Hello, world!</h1>
        <button class="btn btn-primary">Bootstrap 按钮测试</button>
    </div>

    <script src="~/lib/jquery/dist/jquery.slim.min.js"></script>
    <script src="~/lib/popper.js/dist/umd/popper.min.js"></script>
    <script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>Code language: HTML, XML (xml)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注