將Bootstrap連接到ASP.NET _Layout.cshtml文件

Question

我正在閱讀一本舊書（2017），因此代碼已過時

我在將引導程序連接到_Layout.cshtml時遇到問題

我相信問題是此鏈接到引導程序

<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
      asp-href-exclude="**/*-reboot*,**/*-grid" />

由於沒有wwwroot文件夾了。 如何正確鏈接引導程序？

這是我的_Layout.cshtml代碼：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
          asp-href-exclude="**/*-reboot*,**/*-grid" />
    <title>SportsStore</title>
</head>
<body>
    <div class="navbar navbar-inverse bg-inverse" role="navigation">
        <a class="navbar-brand"
           href="#">SPORTS STORE</a>
    </div>
    <div class="row m-1 p-1">
        <div id="categories" class="col-3">
            Put something useful here later.
    </div>
    <div class="col-9">
        @RenderBody()
    </div>
        </div>
</body>
</html>

這是我的解決方案資源管理器圖像

這是我正在嘗試使用引導程序的List.cshtml

@model ProductsListViewModel

@foreach (var p in Model.Products)
{
    <div class="card card-outline-primary m-1 p-1">
        <div class="bg-faded p-1">

            <h4>
                @p.Name
                    <span class="badge badge-pill badge-primary" style="float:right">
                        <small>@p.Price.ToString("")</small>
                    </span>
                </h4>
        </div>

        <div class="card-text p-1">@p.Description</div>
    </div>
}

<div page-model="@Model.PagingInfo" page-action="List" page-classes-enabled="true"
    page-class="btn" page-class-normal="btn-secondary"
    page-class-selected="btn-primary" class="btn-group pull-right m-1">

</div>

Answer 1

您可以使用CDN鏈接。

您應該在head tag link css庫，並將腳本鏈接到body tag末尾。

<head>
    .....
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    ......

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

將Bootstrap連接到ASP.NET _Layout.cshtml文件

問題描述

1 個解決方案

解決方案1
0 2019-07-02 18:03:36

將Bootstrap連接到ASP.NET _Layout.cshtml文件

問題描述

1 個解決方案

解決方案1 0 2019-07-02 18:03:36

解決方案1
0 2019-07-02 18:03:36