Ant Design(ui框架)
官方文档:https://ant.design/docs/react/introduce-cn
说明:Ant Design 是一个 ui框架,和 bootstrap 一样是ui框架。里面的组件很完善,开发中后台系统非常方便。分别基于react、vue、angular框架,各自开发了一套 Ant Design 的UI框架。(这里主要讲react框架的 Ant Design)
一、通用组件
1、Button 按钮
2、Icon 图标
3、Typography 排版: 这个是文案的排版
二、布局
1、Grid 栅格:24 栅格系统,和 bootstrap中的12栅格系统一样的功能。
a、<Row gutter={16}>,给Col 组件之间 添加16像素的间距【原理和bootstrap差不多】。他们之间的间距是以padding撑出来的,所以在 Col 组件上不要使用背景色,最好其它的样式都不要设置吧。
b、两种栅格系统【基础栅格、flex栅格布局】
2、Layout布局:这个是针对 页面级整体布局
三、导航
1、Affix固钉:
2、Breadcrumb面包屑:
3、Dropdown下拉菜单:
4、Menu导航菜单:
5、Pagination分页:
6、PageHeader页头:
7、Steps步骤条:
四、数据录入 看官方文档
1、AutoComplete自动完成
2、Checkbox多选框
3、Cascader级联选择
。。。。。。
五、反馈 看官方文档
1、Modal对话框
2、Drawer抽屉
。。。。。。
六、其它 看官方文档
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具