文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

一套基于 Bootstrap 和 .NET Blazor 的开源企业级组件库

前言 今天大姚给大家分享一套基于 Bootstrap 和 .NET Blazor 的开源企业级组件库：Bootstrap Blazor。...项目介绍 BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的开源（Apache License）、企业级组件库，无缝整合了 Bootstrap 框架与 Blazor 技术...它提供了一整套强大的工具，使开发者能够轻松创建响应式和交互式的 Web 应用程序，喜欢 Bootstrap 风格的小伙伴推荐使用。...BootstrapBlazor UI组件库引入 Blazor班级管理页面编写和接口对接 Blazor学生管理页面编写和接口对接 Blazor是什么？...Blazor 是在 .NET 和 Razor 上构建的用户界面框架，它采用了最新的 Web 技术和 .NET 框架优势，可以使用 C# 编程语言编写 Web 应用程序，它不仅可以提高开发效率，还可以提供更好的用户体验和更好的可维护性

88510

.NET Core.NET5.NET6 开源项目汇总8：Blazor项目

使用 .NET 进行客户端 Web 开发可提供以下优势： 使用 C# 代替 JavaScript 来编写代码。 利用现有的 .NET 库生态系统。 在服务器和客户端之间共享应用逻辑。...受益于 .NET 的性能、可靠性和安全性。 在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。...1、Ant Design Blazor Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。 特性 提炼自企业级中后台产品的交互语言和视觉风格。...开箱即用的高质量 Blazor 组件，可在多种托管方式共享。 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。...BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。

2.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    值得推荐的Blazor UI组件库

    本文中的所有框架都已经收录到适合后端程序员的前端框架GitHub Issues知识库中，假如大家有更好组件库推荐欢迎到以下GitHub项目地址留言或者在文末留言。...项目特点 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Blazor 组件，可在多种托管方式共享。.../BootstrapBlazor 项目介绍 BootstrapBlazor是一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现...所有组件全部使用 C# 编写，不允许使用 JavaScript（除非绝对必要）。 用户可以创建漂亮的应用程序，而无需使用 CSS（当然也可以使用 CSS）。 不依赖其他组件库，完全控制组件和功能。...的 UI 组件库，支持使用Bootstrap、Tailwind、Bulma、Ant Design 和 Material 等 CSS 框架，可用于构建响应式的单页 Web 应用程序。

    2K20

    Blzor Bootstrap Blazor 组件库

    Bootstrap Blazor 组件库 一套基于 Bootstrap 和 Blazor 的企业级组件库 项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架： 使用 C...# 代替 JavaScript 来创建丰富的交互式 UI。...使用 .NET 进行客户端 Web 开发可提供以下优势： 使用 C# 代替 JavaScript 来编写代码。 利用现有的 .NET 库生态系统。 在服务器和客户端之间共享应用逻辑。...本项目是利用 Bootstrap 样式进行封装的 UI 组件库 生态伙伴 WTM 快速开发框架，设计的核心理念就是”尽一切可能提高开发效率“。...Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类，用来： 定义灵活的 UI 呈现逻辑。 处理用户事件。 可以嵌套和重用。

    2.1K10

    分层 Blazor 组件

    虽然标记帮助器很有用，但仍存在一些编程缺陷，而 Blazor 组件则绝妙地消除了这些缺陷。在本文中，我将生成新的 Blazor 组件，以通过 Bootstrap 4 框架服务显示模式对话框。...在此过程中，我将处理 Blazor 模板化组件和级联参数。...在 Blazor 中，事情变得容易多了，因为无需为了创建复杂元素（如 Bootstrap 模式对话框）的更易记标记语法，而无奈地使用标记帮助器。接下来将介绍如何在 Blazor 中创建模式组件。...模式对话框可视需要在页眉处添加“关闭”按钮，并添加与对话框大小或动画相关的其他属性。所有此类信息都可以在自定义数据传输对象中组合，并通过树进行级联。...在 Toggle 组件中，Id 级联值用于设置数据目标属性的值。在 Bootstrap 行话中，对话框切换按钮的数据目标属性标识，要在用户单击切换按钮时弹出的 DIV 的 ID。

    10.6K10

    自研开源 Blazor 组件库路上，我们解决了这些重要挑战

    认识 Blazor InfoQ：Blazor 与我们熟知的三大框架以及组件库比如 Bootstrap 等有何联系又有何区别？...MASA 技术团队：Blazor 与三大框架一样都是基于现有的 Web 技术之上的一种构建用户界面的技术，只不过 Blazor 使用 Razor 和 C# 代替了 HTML 和 JavaScript，而且用户仍然可以使用自定义...JavaScript 模块和第三方 JavaScript 库。...因此，对于现阶段的我们来说，也是通过移植一些 Javascript 的成熟类库或转译为 .Net 后集成到 MASA Blazor 中。...MASA 技术团队：在我看来，Blazor 提供了让 .NET 团队在使用一个技术栈的情况下构建前端和后端的能力，提高了团队的研发效率和资源利用率。

    2.9K30

    如何使用 Blazor 框架在前端浏览器中导入和导出 Excel

    以下是在 Blazor 中导入/导出电子表格文件的步骤： 创建 SpreadJS Blazor 组件 创建 Blazor 应用程序 在 Blazor 应用程序中导入 Excel Blazor 应用程序中的...Excel 导出 创建 SpreadJS Blazor 组件 SpreadJS 是一个非常强大且可扩展的 JavaScript 电子表格组件，它使这个过程变得更加简单。...在本教程中，我们将使用 Visual Studio 2022 和 SpreadJS V16.0。...在这个文件中，我们可以添加对 SpreadJS JavaScript 和 CSS 文件的引用： (index.html) Blazor 应用程序中运行 SpreadJS 所需的全部内容： Blazor Excel 导入 前面的代码只是 SpreadJS 在 Blazor 应用程序中的基本用法，但我们可以通过包含一些 Excel

    1.4K20

    .NET 8 Release Candidate 1 (RC1)现已发布，包括许多针对ASP.NET Core的重要改进！

    以下是此预览版中的新功能摘要： 服务器和中间件 默认情况下禁用HTTP/3 API编写 在最小API、MVC和SignalR中支持键入服务 Blazor Blazor Web App模板更新 从额外的程序集中发现用于静态服务器呈现的组件...Blazor Web App模板更新 在.NET 8中，我们一直在增加Blazor的功能，以便您可以使用Blazor组件来满足您的所有Web UI需求。...使用交互式Server组件：启用对交互式Server渲染模式的支持，基于Blazor Server。 包括示例页面：如果选择此选项，项目将包括基于Bootstrap样式的示例页面和布局。...根组件需要是静态的，因为它呈现Blazor脚本，脚本标记不能动态删除。您还不能直接从组件使Blazor路由器具有交互性，因为它具有渲染片段参数，这些参数不可序列化。...已经找到了原因，并在RC2中解决了此问题。 Blazor Web App模板创建多个计数器组件 Blazor Web App在启用交互式WebAssembly组件时采用了不必要的解决方案。

    3.9K40

    Blazor 概述、与VueReact综合比较以及应用场景探讨

    Blazor 全面介绍与学习指南 Blazor 是微软推出的一款基于 .NET 技术的前端框架，它让开发者可以用 C# 和 .NET 技术栈来构建现代 Web 应用，而不必依赖 JavaScript。...单一技术栈：C# 和 Razor 模板用于前端开发，无需切换到 JavaScript。 组件化开发：UI 以组件的形式开发，方便复用。...在客户端运行，基于 WebAssembly 执行。 首次加载速度 快，页面仅加载少量 HTML 和 JavaScript。 慢，需要加载完整的 WebAssembly 运行时。...生态成熟度不足 社区和插件生态较小：与 Vue 和 React 比较，Blazor 的第三方组件库和工具支持相对较少。...前端灵活性 支持各种前端设计模式和架构（如 Flux、Redux、Vuex）。 在动态 UI 和动画效果实现上，Vue 和 React 的能力更突出。 对比总结：如何选择？

    4.4K10

    基于Bootstrap Blazor开源的.NET通用后台权限管理系统

    前言 今天大姚给大家分享一个基于Bootstrap Blazor开源的.NET通用后台权限管理系统，后台管理页面兼容所有主流浏览器，完全响应式布局（支持电脑、平板、手机等所有主流设备），可切换至 Blazor...BootstrapBlazor介绍 一套基于 Bootstrap 和 Blazor 的企业级组件库，可以认为是 Bootstrap 项目的 Blazor 版实现。...基于 Bootstrap 样式库精心打造，并且额外增加了 100 多种常用的组件，为您快速开发项目带来非一般的感觉。...对应的数据库脚本： 下载项目源码运行 因为项目默认支持SQLite，所以我们把源码下载下来即可直接调试运行查看效果。...设置BootstrapAdmin.Web为启动项目运行： 项目运行效果截图 项目源码地址 更多项目实用功能和特性欢迎前往项目开源地址查看，别忘了给项目一个Star支持。

    79310

    Blazor VS React Angular Vue.js

    是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。...UI组件，但是，Blazor使用了C#来替代JavaScript进行处理，因此开发人员可以跨平台共享代码，Blazor使用Razor脚本声明HTML，这是.NET开发人员熟悉的脚本，Razor通过维护一种简单的语法来使开发人员接近...Blazor 功能特性 •使用C＃代替JavaScript和TypeScript构建 Web UI•构建渐进式Web应用程序（PWA）•创建和使用用C＃编写的可重用组件•在服务器端模式提供全面的调试支持...Code这样的IDE中的全面调试支持 Blazor VS React JavaScript对于C＃开发人员而言具有难的学习曲线，并且不是静态类型的语言。...它具有构建桌面和移动应用程序的潜力，并在Microsoft开发社区中具有吸引力。在评估下一个SPA的技术时，你可以考虑使用 Blazor!

    6.6K10

    Blazor VS React Angular Vue.js

    是当前基于浏览器的单页应用程序（SPA）最受欢迎的语言，因为直到最近，它还是在浏览器中运行的唯一语言。...UI组件，但是，Blazor使用了C#来替代JavaScript进行处理，因此开发人员可以跨平台共享代码，Blazor使用Razor脚本声明HTML，这是.NET开发人员熟悉的脚本，Razor通过维护一种简单的语法来使开发人员接近...C＃编写的可重用组件 在服务器端模式提供全面的调试支持，在客户端模式进行一些限制的调试 与HTML DOM的数据绑定（有限的双向绑定） 使用C＃在客户端和服务器之间共享代码 可在所有现代网络浏览器（包括移动浏览器...（包括移动浏览器）中使用 大型的社区支持 开源 像VS Code这样的IDE中的全面调试支持 Blazor VS React JavaScript对于C＃开发人员而言具有难的学习曲线，并且不是静态类型的语言...它具有构建桌面和移动应用程序的潜力，并在Microsoft开发社区中具有吸引力。在评估下一个SPA的技术时，你可以考虑使用 Blazor!

    6K00

    全面的ASP.NET Core Blazor简介和快速入门

    安全性强：Blazor 应用程序不需要在客户端上运行任何JavaScript代码，相对于传统的Web应用程序，可以大幅度降低应用程序受到跨站点脚本攻击（XSS）的风险。...脚本由 ASP.NET Core 共享框架中的嵌入资源提供给客户端应用。 客户端应用负责根据需要保持和还原应用状态。...在 Blazor Hybrid 应用中，Razor 组件与任何其他 .NET 代码一起直接在本机应用中（而不在 WebAssembly 上）运行，并通过本地互操作通道基于 HTML 和 CSS 将 Web...Shared 存放多个 Razor 页面或组件之间共享的组件、布局和其他视图元素等。 wwwroot 该文件夹包含静态文件，例如图片、字体、图标、CSS 和 JavaScript 文件等。...与 JavaScript 不同，WebAssembly 不是一种高级脚本语言，而是一种可移植的二进制格式（低级指令集），它的主要目的是提供一种更高效和可移植的编程语言，以便于在 Web 平台上进行运行。

    5.7K20

    MAUI Blazor 项目实战 - 从0到1轻松构建多平台应用UI

    使用 Blazor Hybrid 将桌面和移动本机客户端框架与 .NET 和 Blazor 结合使用。 在 Blazor Hybrid 应用中，Razor 组件在设备上本机运行。...Razor 组件可快速加载和执行代码，组件可通过 .NET 平台完全访问设备的本机功能。 Blazor Hybrid 应用与MAUI Blazor Hybrid 支持内置于 MAUI 框架 。....项目中的 MainPage.xaml 文件：（相关知识点参考） BlazorWebView 项目模板创建的 在 MainPage.xaml 中定义，并指向 Blazor 应用的根： 组件位于页面和共享项目文件夹中，与默认 Blazor Web 模板中使用的组件相同。 应用的静态 Web 资产位于 wwwroot 文件夹中。...项目的Shared/MainLayout文件代码 这里使用MASA Blazor框架中的 App bars（应用栏）组件与 Navigation drawers（导航抽屉）组件替换了原来的bootstrap

    1.6K51

    Blazor学习之旅(12)JavaScript与Blazor的互操作

    我们都知道，在Blazor中我们可以轻松地使用C#组件而不是JavaScript来创建Web应用程序，但是，这并不代表我们不能继续使用JavaScript提供的便利。...很 多时候，我们可能希望继续使用JavaScript提供的函数来实现某些功能，这时，我们可以用Blazor和JavaScript的互操作性（也称为JS互操作）来调用Blazor应用中的JavaScript...在Blazor中调用JavaScript代码 加载方式 将JavaScript添加到Blazor应用的方式与添加到标准HTML Web应用一样，都是使用HTML的元素。...将JavaScript库或脚本添加之后，我们就可以在C#代码中通过使用 IJSRuntime 接口调用JavaScript函数了。...在JavaScript中调用C#代码 加载方式 在JavaScript中若想调用C#代码可以使用 DotNet实用工具类（JS互操作的一部分）来运行Blazor代码中定义的.NET方法。

    1.6K10

    MAUI Blazor项目实战 从0到1轻松构建多平台应用UI

    使用 Blazor Hybrid 将桌面和移动本机客户端框架与 .NET 和 Blazor 结合使用。 在 Blazor Hybrid 应用中，Razor 组件在设备上本机运行。...Razor 组件可快速加载和执行代码，组件可通过 .NET 平台完全访问设备的本机功能。 Blazor Hybrid 应用与MAUI Blazor Hybrid 支持内置于 MAUI 框架 。...项目中的 MainPage.xaml 文件：（相关知识点参考） BlazorWebView 项目模板创建的 在 MainPage.xaml 中定义，并指向 Blazor 应用的根： 组件位于页面和共享项目文件夹中，与默认 Blazor Web 模板中使用的组件相同。 应用的静态 Web 资产位于 wwwroot 文件夹中。...项目的Shared/MainLayout文件代码 这里使用MASA Blazor框架中的 App bars（应用栏）组件与 Navigation drawers（导航抽屉）组件替换了原来的bootstrap

    1.2K30

    Blazor VS Vue

    Vue——两分钟概述Vue 是一个JavaScript 框架。在其最简单的模式中，您可以简单地将核心 Vue 脚本包含在您的应用程序中，然后开始构建您的组件。...在Blazor中，您将使用 Razor 标记语言将您的应用程序构建为一系列组件，并使用 C# 编写您的 UI 逻辑。...创建一个新的 Vue 应用程序使用 Vue 有两种主要方法。第一种，您可以简单地引用脚本（通过 CDN）并开始将组件添加到现有应用程序中的任何 HTML 页面。和 HTML 编写在浏览器中作为 JavaScript 运行使用 Blazor 构建 UIBlazor 还鼓励您将 UI 分解为许多较小的组件。...传递数据 - Blazor从广义上讲，Blazor 具有相同的两个用于管理状态的主要选项。您可以使用属性将数据存储在组件本身中（如Name在我们的示例中）或通过参数获取数据（如Headline）。

    5.2K30

    BlazorCharts 原生图表库的建设历程

    以下文章来源于MSReactor ，作者陈超超 背景 目前 Blazor 中可用的图表组件库主要有以下几个： ant-design-blazor/ant-design-charts-blazor -...反馈给.razor ant-design-charts-blazo r的技术实现方式，可详见我之前的文章《用Blazor技术封装G2Plot实现Charts组件》(https://zhuanlan.zhihu.com...作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。...实现一堆极少场景才会使用的功能，不如集中精力做好用的最多的那些功能。 信息直观 使用图表的核心目的是解决表格数据显示不直观的问题，所以不论功能、布局、颜色、动画都是为了这个服务。...图表中每一个元素的大小位置变化都会影响到其他元素，所以位置和布局的确定存在一个先后关系，顺序如下： 图表效果 下面是一个最简单的图表示例 所需的配置 <BcChart Height="600" Width

    1.9K10

    一个基于.Net 5开发的轻量级Quartz配置中心 - QuartzCore.Blazor

    Design Blazor 和 FreeSql 两个技术， 对这两个技术感兴趣的小伙伴可以加我一起学习讨论哦，对有 Quartz 有需求的小伙伴亦可以开箱即用Code First。...，这也不展开说了，就说一下为什么把 QuartzCore.Tasks 类库独立出来，不放在service层中： 主要的原因是反射的 Job 注入的生命周期和 Service 生命周期不一致，会报错 ;...本项目 MongoDB 组件可选。 结尾： 本项目的初衷主要是为了实践 Blazor 和 FreeSql两个技术, 最后出来的成果（本项目）能分享给大家，作者是很开心的，感觉到了满满的成就感。...初识 Blazor 到实践，Blazor 类似于 Vue Cli， 官网说的也很简单，用 C# 代替 js 在前端的交互（也不全然，应是在能使用js的地方，尽量能使用C#）。...最后对 Blazor 感兴趣的小伙伴可以关注下 Ant Design Blazor 和 Bootstrap Blazor, 目前觉得Bootstrap Blazor库稍微全一点。

    1.6K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券