Bootstrap Blazor 组件介绍

项目介绍

演示系统地址：https://www.blazor.zone

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

• 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
• 共享使用 .NET 编写的服务器端和客户端应用逻辑。
• 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

• 使用 C# 代替 JavaScript 来编写代码。
• 利用现有的 .NET 库生态系统。
• 在服务器和客户端之间共享应用逻辑。
• 受益于 .NET 的性能、可靠性和安全性。
• 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

本项目是利用 Bootstrap 样式进行封装的 UI 组件库，本项目托管在Gitee上 项目地址： 传送门

演示系统地址：https://www.blazor.zone

　　该组件库现阶段一共包含组件71个，欢迎各位提出issue 传送门，提出bug、增加功能以及增加更多的组件，更加方便各位在项目中的使用，同时issue也是查找问题的好地方，在这你也许能遇到与你有相同困惑的小伙伴，说不定已经提出解决方案；

 

序号 类别 组件 描述 1 布局 Divider 分割线 区隔内容的分割线 2 Layout 布局 用于布局的容器组件，方便快速搭建页面的基本结构 3 Footer 页脚组件 显示在网页的最下方，提供返回顶端按钮 4 Scroll 滚动条 给高度或者宽度超标的组件增加滚动条 5 Skeleton 骨架屏 在需要等待加载内容的位置提供一个占位图形组合 6 Split 面板分割 Split 面板分割 7 导航 Breadcrumb 面包屑 显示当前页面的路径，快速返回之前的任意页面 8 Menu 导航菜单 为页面和功能提供导航的菜单列表 9 Nav 导航组件 为网站提供导航功能的菜单 10 Dropdown 下拉菜单 将动作或菜单折叠到下拉菜单中 11 GoTop 返回顶端组件 点击后返回指定容器的顶端 12 Pagination 分页 当数据量过多时，使用分页分解数据 13 Steps 步骤条 引导用户按照流程完成任务的导航条 14 Tabs 标签页 分隔内容上有关联但属于不同类别的数据集合。 15 表单 EditorForm 表单组件 通过绑定数据模型自动呈现编辑表单 16 ValidateForm 表单组件 可供数据合规检查的表单组件 17 AutoComplete 自动完成 输入框自动完成功能 18 Button 按钮 常用的操作按钮 19 Checkbox 多选框 一组备选项中进行多选 20 CheckboxList 多选框组 控件用于创建多选的复选框组 21 DatePicker 日期选择器 用于选择或输入日期 22 DateTimeRange 日期时间段选择器 在同一个选择器里选择一段日期 23 DropdownList 下拉框 当选项过多时，使用下拉菜单展示并选择内容（建议使用Select组件） 24 Editor 富文本框 将输入的文字转化为 html 代码片段 25 Input 输入框 通过鼠标或键盘输入字符 26 InputNumber 组件 仅允许输入标准的数字值，支持自定义范围及其他高级功能 27 Markdown 编辑器 提供 Markdown 语法支持的文本编辑器 28 Radio 单选框 在一组备选项中进行单选 29 Rate 评分 评分组件 30 Select 选择器 当选项过多时，使用下拉菜单展示并选择内容 31 MultiSelect 多项选择器 当进行多项选项时，使用下拉菜单展示并提供搜索多项选择内容 32 Slider 滑块 通过拖动滑块在一个固定区间内进行选择 33 Switch 开关 提供最普通的开关应用 34 Textarea 多行文本框 用于录入大量文字 35 Toggle 开关 提供最普通的开关应用，值为 true false 36 Transfer 穿梭框 - 37 Upload 上传 通过点击或者拖拽上传文件 38 数据 Avatar 头像 用图标、图片或者字符的形式展示用户或事物信息 39 Badge 徽章组件 出现在按钮、图标旁的数字或状态标记 40 Card 卡片 将信息聚合在卡片容器中展示 41 Calendar 日历框 按照日历形式展示数据的容器。当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换 42 Captchas 滑块验证码 通过拖动滑块进行人机识别 43 Carousel 走马灯 在有限空间内，循环播放同一类型的图片、文字等内容 44 Chart 图表 通过给定数据，绘画各种图表的组件 45 Circle 进度环 图表类组件。一般有两种用途：

1. 显示某项任务进度的百分比
2. 统计某些指标的占比。

46 Collapse 折叠面板 通过折叠面板收纳内容区域 47 ListView 列表视图 提供规则排列控件 48 Popover 弹出窗组件 点击/鼠标移入元素，弹出气泡式的卡片浮层 49 QRCode 二维码 用于二维码生成 50 Search 搜索框 用于数据搜索 51 Table 表格 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作，内置超多功能，满足你各种应用场景 52 Tag 标签 用于标记和选择 53 Timeline 时间线 可视化地呈现时间流信息 54 Tooltip 提示工具条 提供鼠标悬停或者获得焦点后显示提示框 55 Tree 树形控件 用清晰的层级结构展示信息，可展开或折叠 56 BarcodeReader 条码扫描 本组件通过调用摄像头对条码进行扫描，获取到条码内容条码/QR码 57 Camera 摄像头拍照组件 本组件通过调用摄像头进行拍照操作 58 Handwritten 手写签名 桌面浏览器测试请用F12模拟为触摸设备 59 消息 Alert 警告 用于页面中展示重要的提示信息 60 Console 控制台 控制台组件，一般用于后台任务的输出 61 Dialog 对话框组件 通过注入服务调用 Show 方法弹出窗口进行人机交互 62 Drawer 抽屉 呼出一个临时的侧边栏, 可以从多个方向呼出 63 Message 消息提示 常用于主动操作后的反馈提示。与 Toast 的区别是后者更多用于系统级通知的被动提醒 64 Modal 模态框 在保留当前页面状态的情况下，告知用户并承载相关操作 65 Light 指示灯 提供各种状态的指示灯 66 Popconfirm 气泡确认框 点击元素，弹出气泡确认框 67 Progress 进度条 用于展示操作进度，告知用户当前状态和预期 68 Spinner 旋转图标 加载数据时显示动效 69 SweetAlert 弹窗组件 模态对话框，多用于动作过程中进行询问后继续，或者显示执行结果 70 Toast 轻量弹窗 提供轻量级 Toast 弹窗 71 Timer 计时器 用于时间倒计时

以上是该组件库现阶段所有组件的基本介绍。欢迎各位大佬使用。

写在最后

　　希望大佬们看到这篇文章，能给项目点个star支持下，感谢各位！

star流程：

1、访问点击项目链接：BootstrapBlazor;

2、点击star，如下图，即可完成star，关注项目不迷路：

 

另外还有两个GVP项目，大佬们方便的话也点下star呗，非常感谢：

　　BootstrapAdmin 项目地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 项目地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流群（QQ）

BootstrapAdmin & Blazor（795206915）欢迎加群讨论。