BootstrapBlazor 模板适配移动设备使用笔记

项目模板

Bootstrap Blazor App 模板
为了方便大家利用这套组件快速搭建项目,作者制作了 项目模板(Project Templates),使用 dotnet new 命令行模式,使用步骤如下:

  1. 安装项目模板

dotnet new install Bootstrap.Blazor.Templates::8.0.1

  1. 创建工程

dotnet new bbapp

  1. 官网教程

https://www.blazor.zone/template

使用最新模板,以下基本都是修改 MainLayout.razor 文件

  1. Layout 组件菜单按钮移动设备提示在移动设备不是很有必要,取消显示

  1. Drawer 组件移动设备下错开行

改为

  1. Drawer 组件默认提示清空

  1. Logout 显示登录信息
 c.Type == ClaimTypes.Role)?.Value})")" >
  1. layout-drawer 移动到个人中心里

    
      个人中心
      设置
      通知
    
  

@*
*@
  1. 授权以及强制登录

BootstrapBlazor 模板适配移动设备使用笔记_第1张图片

MainLayout.razor

  
      
          
              ,,,
          
          
              @{
                  Navigation.NavigateTo($"{LoginUrl}=/", forceLoad: true); 
              }
          

      
  

完成效果

BootstrapBlazor 模板适配移动设备使用笔记_第2张图片

BootstrapBlazor 模板适配移动设备使用笔记_第3张图片

你可能感兴趣的:(Blazor,hybird,/,MAUI,Blazor,Blazor,BootstrapBlazor,笔记)