BootstrapBlazor 组件库介绍

项目介绍

演示系统地址：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 进度环	图表类组件。一般有两种用途： 显示某项任务进度的百分比 统计某些指标的占比。
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 项目地址：
　　BootstrapAdmin: 基于 RBAC 的 Net6 后台管理框架，权限管理，前后台分离，支持多站点单点登录，兼容所有主流浏览器，内置微信、支付宝、QQ等多种登录方式，内置多种样式，可切换至 Blazor 多 Tabs 模式，权限控制细化到网页内任意元素（按钮、表格、文本框等等）

　　SliderCaptcha 项目地址：
　　SliderCaptcha: 滑块验证码，用户通过拖动滑块完成校验，支持PC端及移动端，新增 Blazor 版本的滑块验证码

交流群（QQ）欢迎加群讨论　　　　　　　   

BA & Blazor ①（795206915）

BA & Blazor ②（675147445）