首页 > 其他分享 >BootstrapBlazor组件库,NET8.0使用教程

BootstrapBlazor组件库,NET8.0使用教程

时间:2023-09-23 13:58:01浏览次数:45  
标签:教程 app BootstrapBlazor NET8.0 Components 组件 using 添加

BootstrapBlazor组件库,NET8.0使用教程

BootstrapBlazor组件库官网 https://www.blazor.zone/components

BootstrapBlazor组件库github仓库地址 https://github.com/dotnetcore/BootstrapBlazor

BootstrapBlazor组件库gitee仓库地址 https://gitee.com/LongbowEnterprise/BootstrapBlazor

1、先创建一个NET8.0 Blazor WebApp项目

添加包引用

2、在项目中添加BootstrapBlazorBootstrapBlazor.FontAwesome的nuget引用。

img

<ItemGroup>
    <PackageReference Include="BootstrapBlazor" Version="7.10.8-beta07" />
    <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.5.0" />
</ItemGroup>

BlazorServer

<Project Sdk="Microsoft.NET.Sdk.Web">
 <PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <Nullable>enable</Nullable>
  <ImplicitUsings>enable</ImplicitUsings>
 </PropertyGroup>

 <ItemGroup>
  <ProjectReference Include="..\BlazorApp1.Client\BlazorApp1.Client.csproj" />
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.0-rc.1.23421.29" />
 </ItemGroup>

 <ItemGroup>
  <PackageReference Include="BootstrapBlazor" Version="7.10.8-beta07" />
  <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.5.0" />
 </ItemGroup>
</Project>

BlazorWebAssembly

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 <PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <ImplicitUsings>enable</ImplicitUsings>
  <Nullable>enable</Nullable>
  <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
  <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
 </PropertyGroup>

 <ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.1.23421.29" />
 </ItemGroup>

 <ItemGroup>
  <PackageReference Include="BootstrapBlazor" Version="7.10.8-beta07" />
  <PackageReference Include="BootstrapBlazor.FontAwesome" Version="7.5.0" />
 </ItemGroup>
</Project>

3、在App.razor文件中导入BootstrapBlazor组件库的cssJavaScript引用。

添加CSS引用

css 引用一定要放在<link href="css/site.css" rel="stylesheet" />这行代码上面

<!-- 引用 BootstrapBlazor.FontAwesome 字体库包 !-->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<!-- 引用 BootstrapBlazor 组件库包 !-->
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

添加JavaScript引用

<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

img

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <base href="/" />

    <!-- 删除下面这行bootstrap默认引用 !-->
    <!-- <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />!-->
    <!-- 引用 BootstrapBlazor.FontAwesome 字体库包 !-->
    <link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引用 BootstrapBlazor 组件库包 !-->
    <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorApp1.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <!-- 引用 BootstrapBlazor 组件库包 !-->
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>
</body>

</html>

添加BootstrapBlazor服务

4、接下来在Program.cs中添加这行代码:builder.Services.AddBootstrapBlazor();

using BlazorApp1.Components;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddServerComponents()
    .AddWebAssemblyComponents();

//AddBootstrapBlazor
builder.Services.AddBootstrapBlazor();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.MapRazorComponents<App>()
    .AddServerRenderMode()
    .AddWebAssemblyRenderMode();

app.Run();

添加_Imports.razor全局引用

5、打开_Imports.razor文件,导入BootstrapBlazor组件库:@using BootstrapBlazor.Components

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using BlazorApp1
@using BlazorApp1.Components
@using BootstrapBlazor.Components

添加BootstrapBlazorRoot组件

6、接下最后一步,在Routes.razor文件中添加<BootstrapBlazorRoot>根组件。

<BootstrapBlazorRoot>
    <Router AppAssembly="@typeof(App).Assembly" 
            AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
    </Router>
</BootstrapBlazorRoot>

完成以上步骤后,就可以愉快的使用BootstrapBlazor组件库啦!

img

标签:教程,app,BootstrapBlazor,NET8.0,Components,组件,using,添加
From: https://www.cnblogs.com/codecopier/p/17724295.html

相关文章

  • 无涯教程-JavaScript - MAXIFS函数
    描述MAXIFS函数返回由一组给定条件或条件指定的单元格中的最大值。Excel2016中已添加此功能。语法MAXIFS(max_range,criteria_range1,criteria1,[criteria_range2,criteria2],...)争论Argument描述Required/Optionalmax_rangeTheactualrangeofcellsinwh......
  • 无涯教程-JavaScript - MAXA函数
    描述MAXA函数返回参数列表中的最大值。语法MAXA(value1,[value2]...)争论Argument描述Required/OptionalValue1Thefirstnumberargumentforwhichyouwanttofindthelargestvalue.RequiredValue2...Numberarguments2to255forwhichyouwanttofin......
  • 【Java 基础篇】Java ArrayList 简明教程:灵活管理数据集合
    在Java编程中,数组是一种常见的数据结构,用于存储一组元素。然而,数组有一些限制,例如大小固定,不支持动态增长等。为了克服这些限制,Java提供了一个灵活的数据结构——ArrayList。ArrayList是Java集合框架中的一部分,它允许我们创建可变大小的数组,方便地添加、删除、获取和修改元素。本篇......
  • 无涯教程-JavaScript - LOGNORM.INV函数
    描述LOGNORM.INV函数返回x的对数正态累积分布函数的逆函数,其中ln(x)的分布通常为参数Mean和Standard_dev。如果p=LOGNORM.DIST(x...),则LOGNORM.INV(p...)=x。使用对数正态分布来分析对数转换的数据。语法LOGNORM.INV(probability,mean,standard_dev)争论Argum......
  • 【教程】VIM的使用第六章-我的vim我做主,编写vim配置以及映射
    大家好,新的一章要开始了,之前的vim操作大家一定要经常练习,从这章开始之后我们就要更深入的学习vim了,把vim打造成自己想要的样子,做到我的vim我做主!编写vim配置什么是vim的配置,vim里有很多的设置,比如:setnumber设置行号之前的使用都是在Vim里临时设置,没法持久化,每次设置很烦Vim......
  • TIA Portal博途 V18专业版下载链接及安装教程 各个版本下载
    SiemensSimaticTIAPortalV18中文简称西门子博途V18,是一款非常专业的自动化编程软件。该版本是全新的V18年版本,完美集成于STEP7,可以为全自动生产线对机器人进行编程,有着全集成自动化的功能,多用于PLC编程与仿真操作,大大提高了工作的效率,本次提供的是最新的西门子TIAPortalV18......
  • 模拟仿真Tecplot下载安装教程Tecplot模拟仿真下载 各个版本下载
    Tecplot是一款功能强大、灵活和易于使用的科学数据可视化和分析软件。它的多维数据可视化、数据导入支持、高级的可视化效果和工具,以及交互式数据分析等功能,使得用户能够更好地理解和解释复杂的科学数据。通过自动化和与其他工具的集成,Tecplot还提供了高效的数据处理和工作流程,满足......
  • source insight项目导入和使用教程
    一、引入已存在的源代码项目1、Project下创建新项目 2、取一个项目名和一个项目存放文件路径(方便存放索引和一些设置) 3、选择你准备查看或修改的项目源代码选择源代码文件夹点击右边【addAll】弹出提示 includetoplevelsub-directories表示将添加第一层子目......
  • 无涯教程-JavaScript - LOGNORM.DIST函数
    描述LOGNORM.DIST函数返回x的对数正态分布,其中ln(x)通常以参数Mean和Standard_dev分布。使用此功能可以分析经过对数转换的数据。语法LOGNORM.DIST(x,mean,standard_dev,cumulative)争论Argument描述Required/OptionalXThevalueatwhichtoevaluatethefunction.......
  • BootstrapBlazor组件库,Table组件外部导出数据
    BootstrapBlazor组件库,Table组件导出选中行数据问题描述有很多小伙伴在使用BootstrapBlazor组件库的Table组件导出功能时,不知道怎么通过外部按钮来导出数据。解决方案通过@ref当前表格对象来获取数据,然后进行导出操作。Razor代码<Buttonclass="mb-2"Text="导出Table数据"......