Bootstrap Blazor 组件入门
2020-11-30 18:33
1366 查看
Bootstrap Blazor 是一套企业级 UI 组件库,适配移动端支持各种主流浏览器,已经在多个交付项目中使用。通过本套组件可以大大缩短开发周期,节约开发成本。目前已经开发、封装了 70 多个组件,欢迎有兴趣的同学试用。
Gitee 开源地址为:https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 开源地址为:https://github.com/ArgoZhang/BootstrapBlazor
在线演示网站:https://www.blazor.zone
安装指南
项目模板
- 安装模板
dotnet new -i Bootstrap.Blazor.Templates::*
- 使用项目模板创建新项目
dotnet new bbapp
bbapp是 BootstrapBlazor App 的缩写
- 卸载项目模板
dotnet new -u Bootstrap.Blazor.Templates
现有项目中集成 BootstrapBlazor
- 从 Nuget.org 获取 BootstrapBlazor 包
dotnet add package BootstrapBlazor
- 添加样式文件与脚本到项目文件中
Pages/_Host.cshtml (Server)
orwwwroot/index.html (WebAssembly)
HTML
<!DOCTYPE html> <html lang="en"> <head> . . . <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css"> </head> <body> . . . <script src="_framework/blazor.server.js"></script> <script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script> </body> </html>
- 注册服务
~/Startup.cs
C#
namespace BootstrapBlazorAppName { public class Startup { public void ConfigureServices(IServiceCollection services) { //more code may be present here services.AddBootstrapBlazor(); } //more code may be present here } }
Visual Studio 插件
安装 Visual Studio 插件
安装包
使用教程
- 下载安装包
- 解压缩安装包
- 安装 vsix 插件
双击
BootstrapBlazor.UITemplate.vsix文件,请保证
Visual Studio IDE以及相关进程均关闭,此安装包安装过程可能很慢,请耐心等待
特别注意
如果长时间无响应,请查看任务管理器中是否有
devenv.exe或者
msbuild.exe进程,如果有请手动结束
- 打开
Visual Studio 2019
- 选中
Server
或者WebAssembly
工程直接运行F5
- 项目中按照自己需求更改页面
相关文章推荐
- bootstrap新手入门(二)css 全局css样式及组件
- Bootstrap入门(十六)组件10:well和具有响应式特性的嵌入内容
- Bootstrap入门(十八)组件12:徽章与巨幕
- bootstrap简单使用布局、栅格系统、modal标签页等常用组件入门
- bootstrap4简单使用和入门02-bootstrap的js组件简单使用
- bootstrap 新手入门(三) 按钮组件
- Bootstrap入门(二十)组件14:警告框
- Bootstrap入门(七)组件1:字体图标
- Bootstrap入门(十五)组件9:面板组件
- Bootstrap入门(十七)组件11:分页与标签
- Bootstrap入门(二十二)组件16:列表组
- bootstrap-bs入门-bs起步-响应式布局-栅格系统-组件-swiper轮播图
- Bootstrap入门(九)组件3:按钮组
- Bootstrap入门(十)组件4:按钮组与下拉菜单结合
- Bootstrap Table组件入门(一)简介
- bootstrap入门【组件之按钮组,下拉菜单,嵌套】
- Bootstrap Table组件入门(二)快速上手
- Blazor 组件库 Blazui 开发第一弹【安装入门】
- Bootstrap入门(十四)组件8:媒体对象
- Bootstrap入门(二十一)组件15:警告框