Bootstrap ASP.NET Web 应用程序问题

Question

我正在尝试通过 bootstrap 向我的 Web 应用程序添加一些字形图标，但之前没有使用过 bootstrap，我不明白我应该怎么做.关于如何做到这一点有很多令人困惑的文章，我关注了一些但没有得到任何结果。到目前为止，我已经使用 NuGet 将 bootstrap 添加到我的项目中。

我查看了我的文件，所有的依赖项和引用都在那里。然而，当我运行我的项目时，字形仍然没有出现。我已经在要显示这些字形的页面下方发布了代码。知道我还需要做些什么才能让它们正常工作吗？

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}

<div>
    <p align="right">
        <a class="btn btn-dark"
           asp-page="./AddCustomer">Add New Customer</a>
    </p>
</div>

<form method="get">
    <div class="form-group">
        <div class="input-group">
            <input type="search" class="form-control" asp-for="SearchTerm" />
            <span class="btn btn-outline-dark">
                <i class="glyphicon glyphicon-search"></i>
            </span>
        </div>
    </div>
</form>

<table class="table">
    @foreach(var customer in Model.Customers)
    {
        <tr>
            <td>@customer.name</td>
            <td>@customer.notes</td>
            <td>
                <a class="btn btn-outline-dark"
                   asp-page="/Assessment/AddAssessment" asp-route-customerId ="@customer.customer_id">
                    <i class="glyphicon glyphicon-plus"></i> 
                </a>
            </td>
        </tr>
    }
</table>

Answer 1

您需要将下面的 bootstrap.min.css 文件放到您的页面上才能显示字形。

@page
@model CustomerPageTest.Pages.Customer.ListModel
@{
    ViewData["Title"] = "List";
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
<div>
    <p align="right">
        <a class="btn btn-dark"
           asp-page="./AddCustomer">Add New Customer</a>
    </p>
</div>

<form method="get">
    <div class="form-group">
        <div class="input-group">
            <input type="search" class="form-control" asp-for="SearchTerm" />
            <span class="btn btn-outline-dark">
                <i class="glyphicon glyphicon-search"></i>
            </span>
        </div>
    </div>
</form>

<table class="table">
    @foreach(var customer in Model.Customers)
    {
        <tr>
            <td>@customer.name</td>
            <td>@customer.notes</td>
            <td>
                <a class="btn btn-outline-dark"
                   asp-page="/Assessment/AddAssessment" asp-route-customerId ="@customer.customer_id">
                    <i class="glyphicon glyphicon-plus"></i> 
                </a>
            </td>
        </tr>
    }
</table>

Bootstrap ASP.NET Web 应用程序问题

Bootstrap in ASP.NET Web Application Issue

c#

web-applications

razor

asp.net-core

bootstrap-4