在 Visual Studio 2022 中将 html css 和 bootstrap 与 ASP.NET 一起使用

开箱即用，至少 10+ 年，Visual Studio 中的默认设置是使用 jQuery、Bootstrap 和 JavaScript。

所以，完全不清楚“如何使用CSS和JavaScript”是什么意思？您甚至可以自由地采用 AngularJS 或任何基于现代的框架。

此外，您不太可能立即启动 Web 窗体项目。但是，Web 窗体虽然很旧，但仍然有很好的支持，正如我所指出的，10 多年来，Visual Studio 中的默认模板和默认设置是使用 Bootstrap 主题和布局。这包括默认的顶部导航菜单栏。

让我们输入一个按钮，并说一个 asp.net GridView。

当我们单击该按钮时，我们的隐藏代码将加载包含一些数据的 GridView。

因此，此标记：

<asp:Button ID="cmdLoad" runat="server" Text="Show Hotels"        
    OnClick="cmdLoad_Click"        
    />
<br />
<br />
<asp:GridView ID="GridView1" runat="server"  >
</asp:GridView>

所以上面是标准的 asp.net 控件，但没有任何引导类。

用于加载数据的代码隐藏：

Protected Sub cmdLoad_Click(sender As Object, e As EventArgs)

    Dim strSQL = "SELECT FirstName, LastName, City HotelName, Description
                  FROM tblHotelsA ORDER BY HotelName"

    GridView1.DataSource = MyRst(strSQL)
    GridView1.DataBind()

End Sub

上面的结果是一个相当糟糕的页面，如下所示：

所以，现在，让我们将标准的引导类添加到上面的控件中。

因此：

<asp:Button ID="cmdLoad" runat="server" Text="Show Hotels"        
    OnClick="cmdLoad_Click"        
    CssClass="btn"
    />
<br />
<br />
<asp:GridView ID="GridView1" runat="server"
    CssClass="table table-striped"
    >
</asp:GridView>

现在我们有一个完整的“响应式”网格和按钮：

假设你想为按钮使用 bootstrap info 类，那么：

<asp:Button ID="cmdLoad" runat="server" Text="Show Hotels"        
    OnClick="cmdLoad_Click"        
    CssClass="btn btn-info"
    />

现在你看到这个：

因此，即使是 asp.net Web 表单也可以享受 Bootstrap 类，我很难想到任何控件不能从 Bootstrap 类或主题中受益。

因此，没有什么能阻止您使用 Angular、React 或任何具有 asp.net 页面的较新框架。

如上所示，大多数（如果不是全部）控件都乐于接受引导类。

而且，正如上面的 GridView 示例所示，向 GridView 添加一些基本的引导类会导致相当“惊人”的转换，并且看起来已有 20 年历史的东西现在看起来就像任何使用现代新框架（如 bootstrap）构建的网站一样。

请注意，在上面的屏幕截图中，顶部应用程序菜单栏是引导菜单栏。因此，即使是 10+ 年前的 Web 窗体应用程序模板也默认使用开箱即用的 Bootstrap 菜单栏。

因此，对于您采用 Bootstrap 类进行 asp.net 控件，我不知道这里有什么限制。您会发现，在大多数情况下，这些标准的 Bootstrap 类可以很好地对抗 asp.net 控件。

同样的建议也适用于在 asp.net 网站中使用CSS。再一次，您可以在此类网站中 100% 自由地使用您想要的任何 CSS。