卡片

马鞍山市志业软件科技有限公司后台管理系统

技术支持

大数据平台

主显示区域的内容由一个或多放在.col-*网格列中的卡片构成
.card-header, card-footer可移除
给网格行.row追加.align-items-stretch可以让内部的各列卡片高度统一

卡片标题卡片副标题

卡片头部功能区

卡片主容器

卡片底部功能区

卡片示例按钮组件和最大化按钮

卡片示例表单组件

卡片主容器

卡片主容器 - 滚动容器

给.card-body或.card-table这些主容器追加类名.card-scrollbar
设置style="height:*px;"或style="max-height:*px;"
当容器内元素高度超出时, 可显示滚动条

默认两端对齐

左对齐

卡片底部功能区

卡片底部功能区

右对齐

.card-header-action支持直接放按钮和常用表单组件, 支持form.form嵌套
.card-header和.card-footer不建议使用多个
.card-header不宜放过多元素, 需考虑移动端显示效果
.card-divider可以创建一条是水平分割线

卡片示例

图文卡片可以用它来制作商品列表, 图片新闻等

标题

副标题, 按需添加或移除整行

卡片是一个灵活的、可扩展的内容窗口。

它包含了可选的卡片头和卡片脚、一个大范围的内容容器、图片展示位、上下文背景色以及强大的显示选项。

按钮按钮

.card-header, .card-image, .card-text, .card-footer都可以按需移除

图文卡片

组合卡片卡片-1

卡片-1头部功能区

卡片-1主容器

卡片-1底部功能区

组合卡片卡片-2

卡片-2头部功能区

卡片-2主容器

卡片-2底部功能区

组合卡片

Powered by © ZhiYe Software Technology Co.,Ltd