BootStrapBlazor 安装教程--Server模式
使用模板
使用模板是最简单的办法。因为项目模板里已经包含了BootStrapBlazor的所有需要配置的内容。
首先我们安装项目模板：
dotnet new -i Bootstrap.Blazor.Templates::6.4.1这里的6.4.1是版本号，截至到目前Templates的版本号为6.4.1。
然后创建项目
dotnet new bbapp这里的bbapp是项目名称，你可以换成自己的项目名。
这样一个新鲜的BB项目就建好了。
在现有模板上增加
安装BootstrapBlazor的库
可以使用NuGet浏览器，也可以使用命令
dotnet add package BootstrapBlazor --version 6.8.17来安装。发文时的版本号为6.8.17。
添加样式表文件
.net6默认的cshtml已经移动到了~/Pages/_Layout.cshtml文件，不是.net5的~/Pages/_Host.cshtml文件了，这里需要注意。
<head>
...
<!-- 需引用 BootstrapBlazor.FontAwesome 包 !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
...
<link href="css/site.css" rel="stylesheet">
<link href="BlazorApp1.styles.css" rel="stylesheet">
</head>这里注意一下，默认BB使用
FontAwesome作为图标库，同时BB也做了集成，但是集成在了一个子包里面，需要使用NuGet安装BootstrapBlazor.FontAwesome。
这里还需要注意，需要删除默认模板带的bootstrap的css文件，否则会有css的冲突。
添加 Javascript 文件
<body>
...
<!-- 增加代码 !-->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
...
<script src="_framework/blazor.server.js"></script>
</body>这里需要注意一下，bootstrap的js一定要放在
blazor.server.js的前面，否则可能出问题。
注册 BootstrapBlazor 服务
顶级语句：Program.cs
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddServerSideBlazor();
// 添加本行代码
builder.Services.AddBootstrapBlazor();
var app = builder.Build();
//more code may be present here非顶级语句：Starup.cs
namespace MyBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddServerSideBlazor();
// 添加本行代码
services.AddBootstrapBlazor();
}
}
}增加命名空间引用
将以下内容添加到 ~/_Imports.razor 文件中，以便 Razor 文件中能识别组件
@using BootstrapBlazor.Components增加 BootstrapBlazorRoot 组件到 ~/App.razor 文件中
注意，这一步很重要，如果不做，程序在运行时大概率会报错。
<BootstrapBlazorRoot>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<PageTitle>Title</PageTitle>
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p>正在玩命开发中 ...</p>
</LayoutView>
</NotFound>
</Router>
</BootstrapBlazorRoot>BootStrapBlazor 安装教程--Server模式的更多相关文章
- hive安装教程本地模式
1.安装模式介绍: Hive官网上介绍了Hive的3种安装方式,分别对应不同的应用场景. a.内嵌模式(元数据保村在内嵌的derby种,允许一个会话链接,尝试多个会话链接时会报错) b.本地模式(本地 ...
- [干货来袭]MSSQL Server on Linux预览版安装教程(先帮大家踩坑)
前言 昨天晚上微软爸爸开了全国开发者大会,会上的内容,我就不多说了,园子里面很多.. 我们唐总裁在今年曾今透漏过SQL Server love Linux,果不其然,这次开发者大会上就推出了MSSQL ...
- MySQL Server 5.0安装教程
相信很多朋友刚开始接触mysql数据库服务器,下面是mysql的安装教程,步骤明细也有详细的说明. 工具/原料 mysql MySQL安装的图解 1 打开下载的mysql安装文件mysql-5 ...
- Win10 SQL Server 2017安装教程
Win10 SQL Server 2017安装教程 1:下载地址 2:开始安装 1:安装环境预备说明 还要注意就是要先下载这个VC++的更新,可以解决服务器安装不上的问题,下载链接 :Microsof ...
- 在VMware Workstation中安装Ubuntu Server 16.04.5图解教程
最近要在Ubuntu中部署openstack,为了节省空间和内存,最终选择了Ubuntu服务器.看了很多前辈和大佬的安装教程,在这里记录一下我自己的Ubuntu Server 16.04.5的安装过程 ...
- Alex 的 Hadoop 菜鸟教程: 第3课 Hadoop 安装教程 - 非HA方式 (一台server)
原帖地址: http://blog.csdn.net/nsrainbow/article/details/36629741 接上一个教程:http://blog.csdn.net/nsrainbow/ ...
- 使用独立模式安装Sharepoint Server 2013出现创建示例数据错误的解决方案
使用独立模式安装Sharepoint Server 2013,允许配置向导到第8步创建示例数据时,出错了! Exception: System.ArgumentException: The SDDL ...
- SQL server 2008 数据库企业版安装教程图解
SQL Server 2008是一个重大的产品版本,它推出了许多新的特性和关键的改进,使得它成为至今为止的最强大和最全面的SQL Server版本. 在现今数据的世界里,公司要获得成功和不断发展,他 ...
- Apache HTTP Server安装教程
Apache HTTP Server安装教程 Apache HTTP Server的官方网站是:http://httpd.apache.org/,可以从中下载最新版本的Apache HTTP Serv ...
随机推荐
- css的flex布局调试
学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...
- 交互式 .Net
名词解析 1. 交互式 交互式是指输入代码后可直接运行该代码,然后持续输入运行代码. 2. 交互式 .Net .Net 是一种编译型语言,不像 python 这类的脚本型语言,可以边输入代码边运行结果 ...
- .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- linux下的mysql数据库以及mysql主从复制
参考博客 1.mysql数据库的安装 centos7如何安装mysql 1.yum安装 1.1首先配置yum源,然后再用yum进行安装 2. 源代码编译安装 3.rpm包安装 yum安装的前提条件,是 ...
- Redisson报错
org.redisson.client.RedisResponseTimeoutException: Redis server response timeout (3000 ms) occured a ...
- 使用BGP-blackhole解决IDC频繁遭受DDOS攻击困扰
项目背景 该项目位于某市级BGP IDC机房,机房客户多为web业务,遭受小流量攻击(10G量级)较为频繁,针对这一现象在机房core旁路部署ADS系统,牵引异常流量清洗后进行回源,该清洗方案在此不再 ...
- 使用VLL技术实现多家合作伙伴复用同一条链路做两端数据全透传
公司A当前租用一条10G跨市运营商光缆,自身业务只用到一半流量,为节省成本,寻求多家合作伙伴共用链路以达到财务需求 合作伙伴需求接入链路全透传,即光缆两端接入点端口逻辑直连 当前有三种方案可以实现上述 ...
- Hadoop入门学习笔记（一）
Week2 学习笔记 Hadoop核心组件 Hadoop HDFS(分布式文件存储系统):解决海量数据存储 Hadoop YARN(集群资源管理和任务调度框架):解决资源任务调度 Hadoop Map ...
- 构建第一个模型：KNN算法（Iris_dataset）
利用鸢尾花数据集完成一个简单的机器学习应用~万丈高楼平地起,虽然很基础,但是还是跟着书敲了一遍代码. 一.模型构建流程 1.获取数据 本次实验的Iris数据集来自skicit-learn的datase ...
- Endeavour OS 安装流程中的一些小问题的对应的解决方案
安装窗口显示"系统未连接到互联网",但实际上已经连接了 Endeavour OS 检测系统是否连接上互联网的方式就是 ping 一个目标站点,这个站点默认写入在 /etc/cala ...