Bootstrap中Blazor组件有什么用

tangjin

作者

这篇文章主要介绍Bootstrap中Blazor组件有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

Bootstrap是什么

Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。

安装指南

安装 dotnet SDK 传送门
安装 Visual Studio 2019 v16.8+ 传送门

项目模板

1、安装模板

dotnet new -i Bootstrap.Blazor.Templates::*

2、使用项目模板创建新项目

dotnet new bbapp

bbapp 是 BootstrapBlazor App 的缩写

3、卸载项目模板

dotnet new -u Bootstrap.Blazor.Templates

现有项目中集成 BootstrapBlazor

1、从 Nuget.org 获取 BootstrapBlazor 包

dotnet add package BootstrapBlazor

2、添加样式文件与脚本到项目文件中 Pages/_Host.cshtml (Server) or wwwroot/index.html (WebAssembly)

HTML

<!DOCTYPEhtml>
<htmllang="en">
<head>
...
<linkrel="stylesheet"href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css">
</head>
<body>
...
<scriptsrc="_framework/blazor.server.js"></script>
<scriptsrc="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>
</html>

3、注册服务 ~/Startup.cs

namespaceBootstrapBlazorAppName
{
publicclassStartup
{
publicvoidConfigureServices(IServiceCollectionservices)
{
//morecodemaybepresenthere
services.AddBootstrapBlazor();
}

//morecodemaybepresenthere
}
}