Blazor Bootstrap 组件库建立工程快速上手
2022-04-15 02:27
696 查看
1.新建工程
新建工程bb001
dotnet new blazorserver -o bb001
将项目添加到解决方案中:
dotnet sln add bb001/bb001.csproj
使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 ..
dotnet add b03sqlite package BootstrapBlazor dotnet add b03sqlite package BootstrapBlazor.FontAwesome
2.样式表和Javascript 引用
增加主题样式表到
Pages/_Layout.cshtml文件中
删除
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
并在下面添加两行
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet"> <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
添加 Javascript 引用到
Pages/_Layout.cshtml文件中
在
<script src="_framework/blazor.server.js"></script>之前添加
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
3.添加增加命名空间引用到 _Imports.razor
文件中
@using BootstrapBlazor.Components
4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中
<BootstrapBlazorRoot> <Router AppAssembly="@typeof(App).Assembly"> ... </Router> </BootstrapBlazorRoot>
5.添加BootstrapBlazor服务到 Program.cs
文件中
在
builder.Services.AddSingleton<WeatherForecastService>();后加入
builder.Services.AddBootstrapBlazor();
相关文章推荐
- Bootstrap Table组件入门(二)快速上手
- 03-Bootstrap高级性组件(简单上手、快速掌握)
- 快速建立STM32F4的工程模板
- Bootstrap快速上手
- JavaWeb工程中集成YMP框架快速上手(二)
- 轻松快速建立Spring Hibernate工程
- MocorDroid编译工程快速建立编译环境
- 【插件-前端-bootstrap】快速上手布局web页面用什么?快速制表用什么?bootstrap及其插件(1)
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- Sass学习之快速上手bootstrap-sass
- BootStrap快速上手
- 建立BlazeDS工程并上手开发
- JavaWeb工程中集成YMP框架快速上手
- SSM+Bootstrap场地管理系统第一天----数据库的建立和mybatis的逆向工程
- Eclipse快速上手Hibernate--5. 组件映射
- React快速上手(一)jsx语法与组件
- 轻松快速建立Spring + Hibernate工程
- JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面
- (三)快速上手VUE 单文件语法、组件、示例build生成并部署上线
- IAR创建工程文件快速建立之igBee CC2530