使用模板

使用模板是最简单的办法。因为项目模板里已经包含了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模式的更多相关文章

  1. hive安装教程本地模式

    1.安装模式介绍: Hive官网上介绍了Hive的3种安装方式,分别对应不同的应用场景. a.内嵌模式(元数据保村在内嵌的derby种,允许一个会话链接,尝试多个会话链接时会报错) b.本地模式(本地 ...

  2. [干货来袭]MSSQL Server on Linux预览版安装教程(先帮大家踩坑)

    前言 昨天晚上微软爸爸开了全国开发者大会,会上的内容,我就不多说了,园子里面很多.. 我们唐总裁在今年曾今透漏过SQL Server love Linux,果不其然,这次开发者大会上就推出了MSSQL ...

  3. MySQL Server 5.0安装教程

    相信很多朋友刚开始接触mysql数据库服务器,下面是mysql的安装教程,步骤明细也有详细的说明. 工具/原料   mysql MySQL安装的图解   1 打开下载的mysql安装文件mysql-5 ...

  4. Win10 SQL Server 2017安装教程

    Win10 SQL Server 2017安装教程 1:下载地址 2:开始安装 1:安装环境预备说明 还要注意就是要先下载这个VC++的更新,可以解决服务器安装不上的问题,下载链接 :Microsof ...

  5. 在VMware Workstation中安装Ubuntu Server 16.04.5图解教程

    最近要在Ubuntu中部署openstack,为了节省空间和内存,最终选择了Ubuntu服务器.看了很多前辈和大佬的安装教程,在这里记录一下我自己的Ubuntu Server 16.04.5的安装过程 ...

  6. Alex 的 Hadoop 菜鸟教程: 第3课 Hadoop 安装教程 - 非HA方式 (一台server)

    原帖地址: http://blog.csdn.net/nsrainbow/article/details/36629741 接上一个教程:http://blog.csdn.net/nsrainbow/ ...

  7. 使用独立模式安装Sharepoint Server 2013出现创建示例数据错误的解决方案

    使用独立模式安装Sharepoint Server 2013,允许配置向导到第8步创建示例数据时,出错了! Exception: System.ArgumentException: The SDDL ...

  8. SQL server 2008 数据库企业版安装教程图解

    SQL Server 2008是一个重大的产品版本,它推出了许多新的特性和关键的改进,使得它成为至今为止的最强大和最全面的SQL Server版本.  在现今数据的世界里,公司要获得成功和不断发展,他 ...

  9. Apache HTTP Server安装教程

    Apache HTTP Server安装教程 Apache HTTP Server的官方网站是:http://httpd.apache.org/,可以从中下载最新版本的Apache HTTP Serv ...

随机推荐

  1. 面试官给我挖坑：rm删除文件之后，空间就被释放了吗？

    在Linux,你是不是曾经天真的以为,使用rm删除一个文件,占用的空间就释放了?事情可能不是常常如人意. 产生一个指定大小的随机内容文件 我们先看一下当前各个挂载目录的空间大小: $ df -h /d ...

  2. python入门基础知识三（列表和元组）

    列表(list)的操作 1. 形式 var = ['char1','char2','char3',...] var = [value1,value2,value3,...] 2. 列表的增删改查 查: ...

  3. GB/T 25000.51-2016 系统与软件工程、系统与软件质量要求和评价 第51部分

    中科软测认证中心(软件测评) 1.支持GB/T 25000.51的质量特性 (1)产品质量模型及特性 功能性 功能完备性 功能正确性 功能适合性 功能性的依从性 性能效率 时间特性 资源利用率 容量 ...

  4. extcon驱动及其在USB驱动中的应用

    extcon,是External Connector的简称,用于抽象外部连接器,比如说Audio Jack.USB MicroB/TypeC接口等.它的原型是Android的switch-class驱 ...

  5. git clone指定分支

    技术背景 Git是代码版本最常用的管理工具,此前也写过一篇介绍Git的基本使用的博客,而本文介绍一个可能在特定场景下能够用到的功能--直接拉取指定分支的内容. Git Clone 首先看一下如果我们按 ...

  6. 48. Rotate Image - LeetCode

    Question 48. Rotate Image Solution 把这个二维数组(矩阵)看成一个一个环,循环每个环,循环每条边,每个边上的点进行旋转 public void rotate(int[ ...

  7. .net6.0 中一个接口多个实现的服务注册与注入

    1.现有一个数据库操作接口 如下   它有两个数据操作实现 Sqlserver 和MySql的数据库操作实现类 现在我们需要 将这个两个类 注册到MVC中 注意这里注册的服务类型都是 IDataBas ...

  8. 记一次 JDK SPI 配置不生效的问题 → 这么简单都不会，还是回家养猪吧

    开心一刻 今天去幼儿园接小侄女,路上聊起了天 小侄女:小叔,今天我吃东西被老师发现了 我:老师说了什么 小侄女:她说拿出来,跟小朋友一起分享 我:那你拿出来了吗 小侄女一脸可怜的看向我,说道:没有,我 ...

  9. 浅析 2D 组态与 2.5D 组态的区别 | 空调装配生产线与化工安全流程

    前言 为了更有效辨别 2D 与 2.5D 之间的区别,图扑软件选用 2D 空调装配生产线与 2.5D 化工厂安全流程作比较.通过自主研发的 HT 产品,采用 B/S 架构快速搭建零代码拖拽式 Web ...

  10. go-zero 微服务实战系列（一、开篇）

    前言 在社区中经常看到有人问有没有基于 go-zero 的比较完整的项目参考,该类问题本质上是想知道基于 go-zero 的项目的最佳实践.完整的项目应该是一个完整的产品功能,包含产品需求.架构设计. ...