MixinUI框架文档
// 引入 CSS
https://www.guojiz.com/view/doc/mixinui/mixinui.css
// 引入 JavaScript
https://www.guojiz.com/view/doc/mixinui/mixinui.js
// 初始化框架
MixinUI.init();基础使用
MixinUI 使用命名空间前缀 mixinui_ 来避免与其他框架或自定义样式冲突。所有的类名都以这个前缀开头。
基本的页面结构示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MixinUI 示例</title>
<link rel="stylesheet" href="https://www.guojiz.com/view/doc/mixinui/mixinui.css">
</head>
<body>
<div class="mixinui_container">
<h1 class="mixinui_h1">Hello, MixinUI!</h1>
<p>这是一个使用 MixinUI 框架的简单页面。</p>
<button class="mixinui_btn mixinui_btn-primary">点击我</button>
</div>
<script src="https://www.guojiz.com/view/doc/mixinui/mixinui.js"></script>
</body>
</html>网格系统
MixinUI 提供了一个基于 12 列的响应式网格系统，类似于 Bootstrap。
基础网格
<div class="mixinui_row">
<div class="mixinui_col-6">占据 6 列（一半宽度）</div>
<div class="mixinui_col-6">占据 6 列（一半宽度）</div>
</div>
<div class="mixinui_row">
<div class="mixinui_col-4">占据 4 列（三分之一宽度）</div>
<div class="mixinui_col-4">占据 4 列（三分之一宽度）</div>
<div class="mixinui_col-4">占据 4 列（三分之一宽度）</div>
</div>响应式网格
MixinUI 支持不同屏幕尺寸的响应式布局：
mixinui_col-*- 适用于所有屏幕尺寸mixinui_col-sm-*- 适用于小屏幕及以上 (≥576px)mixinui_col-md-*- 适用于中等屏幕及以上 (≥768px)mixinui_col-lg-*- 适用于大屏幕及以上 (≥992px)mixinui_col-xl-*- 适用于超大屏幕及以上 (≥1200px)
<div class="mixinui_row">
<div class="mixinui_col-12 mixinui_col-md-6 mixinui_col-lg-4">
<!-- 在小屏幕上占据 12 列（全宽） -->
<!-- 在中等屏幕上占据 6 列（半宽） -->
<!-- 在大屏幕上占据 4 列（三分之一宽） -->
</div>
</div>容器
MixinUI 提供两种容器类：
mixinui_container- 响应式固定宽度容器mixinui_container-fluid- 全宽容器，始终占据 100% 的宽度
<div class="mixinui_container">
<!-- 响应式固定宽度容器 -->
</div>
<div class="mixinui_container-fluid">
<!-- 全宽容器 -->
</div>排版
标题
MixinUI 提供了六个级别的标题样式：
<h1 class="mixinui_h1">标题 1</h1>
<h2 class="mixinui_h2">标题 2</h2>
<h3 class="mixinui_h3">标题 3</h3>
<h4 class="mixinui_h4">标题 4</h4>
<h5 class="mixinui_h5">标题 5</h5>
<h6 class="mixinui_h6">标题 6</h6>显示标题
显示标题是更大、更醒目的标题样式：
<h1 class="mixinui_display-1">显示标题 1</h1>
<h1 class="mixinui_display-2">显示标题 2</h1>
<h1 class="mixinui_display-3">显示标题 3</h1>
<h1 class="mixinui_display-4">显示标题 4</h1>文本样式
<p class="mixinui_lead">引导段落，通常用于突出显示重要内容。</p>
<p>普通段落文本。</p>
<p>包含 <span class="mixinui_small">小文本</span> 的段落。</p>
<p>包含 <mark class="mixinui_mark">高亮文本</mark> 的段落。</p>颜色系统
MixinUI 提供了一套预定义的颜色变量，可用于背景、文本和边框。
背景颜色
<div class="mixinui_bg-primary">主要背景色</div>
<div class="mixinui_bg-secondary">次要背景色</div>
<div class="mixinui_bg-success">成功背景色</div>
<div class="mixinui_bg-danger">危险背景色</div>
<div class="mixinui_bg-warning">警告背景色</div>
<div class="mixinui_bg-info">信息背景色</div>
<div class="mixinui_bg-light">亮色背景</div>
<div class="mixinui_bg-dark">暗色背景</div>文本颜色
<p class="mixinui_text-primary">主要文本颜色</p>
<p class="mixinui_text-secondary">次要文本颜色</p>
<p class="mixinui_text-success">成功文本颜色</p>
<p class="mixinui_text-danger">危险文本颜色</p>
<p class="mixinui_text-warning">警告文本颜色</p>
<p class="mixinui_text-info">信息文本颜色</p>
<p class="mixinui_text-muted">静音文本颜色</p>按钮
基础按钮
<button class="mixinui_btn mixinui_btn-primary">主要按钮</button>
<button class="mixinui_btn mixinui_btn-secondary">次要按钮</button>
<button class="mixinui_btn mixinui_btn-success">成功按钮</button>
<button class="mixinui_btn mixinui_btn-danger">危险按钮</button>
<button class="mixinui_btn mixinui_btn-warning">警告按钮</button>
<button class="mixinui_btn mixinui_btn-info">信息按钮</button>
<button class="mixinui_btn mixinui_btn-light">亮色按钮</button>
<button class="mixinui_btn mixinui_btn-dark">暗色按钮</button>轮廓按钮
<button class="mixinui_btn mixinui_btn-outline-primary">主要轮廓按钮</button>按钮尺寸
<button class="mixinui_btn mixinui_btn-primary mixinui_btn-lg">大按钮</button>
<button class="mixinui_btn mixinui_btn-primary">默认按钮</button>
<button class="mixinui_btn mixinui_btn-primary mixinui_btn-sm">小按钮</button>块级按钮
<button class="mixinui_btn mixinui_btn-primary mixinui_btn-block">块级按钮</button>禁用状态
<button class="mixinui_btn mixinui_btn-primary" disabled>禁用按钮</button>
<button class="mixinui_btn mixinui_btn-secondary mixinui_disabled">禁用按钮</button>表单
基础表单
<form>
<div class="mixinui_form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="mixinui_form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>
<div class="mixinui_form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="mixinui_form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="mixinui_form-check">
<input type="checkbox" class="mixinui_form-check-input" id="exampleCheck1">
<label class="mixinui_form-check-label" for="exampleCheck1">记住我</label>
</div>
<button type="submit" class="mixinui_btn mixinui_btn-primary">提交</button>
</form>表单控件
<!-- 文本输入 -->
<input type="text" class="mixinui_form-control" placeholder="文本输入">
<!-- 下拉选择 -->
<select class="mixinui_form-control">
<option>选项 1</option>
<option>选项 2</option>
<option>选项 3</option>
</select>
<!-- 文本区域 -->
<textarea class="mixinui_form-control" rows="3"></textarea>
<!-- 复选框 -->
<div class="mixinui_form-check">
<input type="checkbox" class="mixinui_form-check-input" id="check1">
<label class="mixinui_form-check-label" for="check1">复选框</label>
</div>卡片
基础卡片
<div class="mixinui_card">
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">卡片内容文本。</p>
<a href="#" class="mixinui_btn mixinui_btn-primary">按钮</a>
</div>
</div>带图片的卡片
<div class="mixinui_card">
<img src="..." class="mixinui_card-img-top" alt="卡片图片">
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">卡片内容文本。</p>
<a href="#" class="mixinui_btn mixinui_btn-primary">按钮</a>
</div>
</div>带头部和底部的卡片
<div class="mixinui_card">
<div class="mixinui_card-header">
卡片头部
</div>
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">卡片内容文本。</p>
</div>
<div class="mixinui_card-footer">
<small class="mixinui_text-muted">最后更新于 3 分钟前</small>
</div>
</div>表格
基础表格
<table class="mixinui_table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>前端开发</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>UI 设计师</td>
</tr>
</tbody>
</table>条纹表格
<table class="mixinui_table mixinui_table-striped">
<!-- 表格内容 -->
</table>带边框表格
<table class="mixinui_table mixinui_table-bordered">
<!-- 表格内容 -->
</table>悬停效果表格
<table class="mixinui_table mixinui_table-hover">
<!-- 表格内容 -->
</table>提示框
<div class="mixinui_alert mixinui_alert-primary">
这是一个主要提示框。
</div>
<div class="mixinui_alert mixinui_alert-success">
这是一个成功提示框。
</div>
<div class="mixinui_alert mixinui_alert-danger">
这是一个危险提示框。
</div>
<div class="mixinui_alert mixinui_alert-warning">
这是一个警告提示框。
</div>
<div class="mixinui_alert mixinui_alert-info">
这是一个信息提示框。
</div>徽章
基础徽章
<span class="mixinui_badge mixinui_badge-primary">主要</span>
<span class="mixinui_badge mixinui_badge-secondary">次要</span>
<span class="mixinui_badge mixinui_badge-success">成功</span>
<span class="mixinui_badge mixinui_badge-danger">危险</span>
<span class="mixinui_badge mixinui_badge-warning">警告</span>
<span class="mixinui_badge mixinui_badge-info">信息</span>徽章与其他元素结合
<button class="mixinui_btn mixinui_btn-primary">
通知 <span class="mixinui_badge mixinui_badge-light">4</span>
</button>模态框
<!-- 触发按钮 -->
<button class="mixinui_btn mixinui_btn-primary" data-mixinui-toggle="modal" data-mixinui-target="#exampleModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="mixinui_modal" id="exampleModal">
<div class="mixinui_modal-dialog">
<div class="mixinui_modal-content">
<div class="mixinui_modal-header">
<h5 class="mixinui_modal-title">模态框标题</h5>
<button type="button" class="mixinui_btn mixinui_btn-close" data-mixinui-dismiss="modal" aria-label="关闭">×</button>
</div>
<div class="mixinui_modal-body">
<p>模态框内容...</p>
</div>
<div class="mixinui_modal-footer">
<button type="button" class="mixinui_btn mixinui_btn-secondary" data-mixinui-dismiss="modal">关闭</button>
<button type="button" class="mixinui_btn mixinui_btn-primary">保存更改</button>
</div>
</div>
</div>
</div>工具类
文本对齐
<p class="mixinui_text-left">左对齐文本</p>
<p class="mixinui_text-center">居中对齐文本</p>
<p class="mixinui_text-right">右对齐文本</p>显示属性
<div class="mixinui_d-none">不显示</div>
<div class="mixinui_d-inline">内联显示</div>
<div class="mixinui_d-inline-block">内联块显示</div>
<div class="mixinui_d-block">块级显示</div>
<div class="mixinui_d-flex">Flex 显示</div>Flex 布局
<div class="mixinui_d-flex mixinui_justify-content-between">
<div>项目 1</div>
<div>项目 2</div>
<div>项目 3</div>
</div>
<div class="mixinui_d-flex mixinui_justify-content-center">
<div>居中项目</div>
</div>
<div class="mixinui_d-flex mixinui_flex-column">
<div>垂直项目 1</div>
<div>垂直项目 2</div>
</div>边距
<!-- 外边距 -->
<div class="mixinui_m-0">无边距</div>
<div class="mixinui_m-1">小边距</div>
<div class="mixinui_m-2">中等边距</div>
<div class="mixinui_m-3">标准边距</div>
<div class="mixinui_m-4">大边距</div>
<div class="mixinui_m-5">超大边距</div>
<!-- 方向性外边距 -->
<div class="mixinui_mt-3">顶部边距</div>
<div class="mixinui_mb-3">底部边距</div>内边距
<!-- 内边距 -->
<div class="mixinui_p-0">无内边距</div>
<div class="mixinui_p-1">小内边距</div>
<div class="mixinui_p-2">中等内边距</div>
<div class="mixinui_p-3">标准内边距</div>
<div class="mixinui_p-4">大内边距</div>
<div class="mixinui_p-5">超大内边距</div>宽度和高度
<div class="mixinui_w-25">25% 宽度</div>
<div class="mixinui_w-50">50% 宽度</div>
<div class="mixinui_w-75">75% 宽度</div>
<div class="mixinui_w-100">100% 宽度</div>
<div class="mixinui_w-auto">自动宽度</div>
<div class="mixinui_h-25">25% 高度</div>
<div class="mixinui_h-50">50% 高度</div>
<div class="mixinui_h-75">75% 高度</div>
<div class="mixinui_h-100">100% 高度</div>
<div class="mixinui_h-auto">自动高度</div>边框和圆角
<div class="mixinui_border">带边框</div>
<div class="mixinui_border-top">顶部边框</div>
<div class="mixinui_border-right">右侧边框</div>
<div class="mixinui_border-bottom">底部边框</div>
<div class="mixinui_border-left">左侧边框</div>
<div class="mixinui_rounded">圆角</div>
<div class="mixinui_rounded-circle">圆形</div>
<div class="mixinui_rounded-pill">胶囊形状</div>阴影
<div class="mixinui_shadow-sm">小阴影</div>
<div class="mixinui_shadow">默认阴影</div>
<div class="mixinui_shadow-lg">大阴影</div>
<div class="mixinui_shadow-none">无阴影</div>JavaScript 组件
MixinUI 提供了一些 JavaScript 组件，需要引入 mixinui.js 文件才能使用。
初始化
MixinUI 会在 DOM 加载完成后自动初始化，也可以手动初始化：
// 基础初始化
MixinUI.init();
// 带选项的初始化
MixinUI.init({
debug: true, // 启用调试模式
plugins: [] // 添加插件
});模态框
<!-- 触发按钮 -->
<button data-mixinui-toggle="modal" data-mixinui-target="#myModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="mixinui_modal" id="myModal">
<!-- 模态框内容 -->
</div>
<!-- JavaScript 方法 -->
<script>
// 显示模态框
MixinUI.showModal(document.getElementById('myModal'));
// 隐藏模态框
MixinUI.hideModal(document.getElementById('myModal'));
</script>工具提示
<!-- HTML 标记 -->
<button data-mixinui-toggle="tooltip" title="这是一个工具提示" data-mixinui-placement="top">
带工具提示的按钮
</button>
<!-- JavaScript 方法 -->
<script>
// 显示工具提示
MixinUI.showTooltip(element, '工具提示文本', 'top');
// 隐藏工具提示
MixinUI.hideTooltip();
</script>选项卡
<!-- 选项卡导航 -->
<ul class="mixinui_nav mixinui_nav-tabs">
<li class="mixinui_nav-item">
<a class="mixinui_nav-link mixinui_active" data-mixinui-toggle="tab" href="#home">首页</a>
</li>
<li class="mixinui_nav-item">
<a class="mixinui_nav-link" data-mixinui-toggle="tab" href="#profile">个人资料</a>
</li>
</ul>
<!-- 选项卡内容 -->
<div class="mixinui_tab-content">
<div class="mixinui_tab-pane mixinui_active" id="home">
首页内容...
</div>
<div class="mixinui_tab-pane" id="profile">
个人资料内容...
</div>
</div>下拉菜单
<div class="mixinui_dropdown">
<button class="mixinui_btn mixinui_btn-primary" data-mixinui-toggle="dropdown">
下拉菜单
</button>
<div class="mixinui_dropdown-menu">
<a class="mixinui_dropdown-item" href="#">选项 1</a>
<a class="mixinui_dropdown-item" href="#">选项 2</a>
<div class="mixinui_dropdown-divider"></div>
<a class="mixinui_dropdown-item" href="#">选项 3</a>
</div>
</div>实用工具函数
MixinUI 提供了一些实用的 JavaScript 工具函数：
// DOM 选择器
const element = MixinUI.$('.my-element');
// 添加类
MixinUI.addClass(element, 'my-class');
// 移除类
MixinUI.removeClass(element, 'my-class');
// 切换类
MixinUI.toggleClass(element, 'my-class');
// 检查是否包含类
const hasClass = MixinUI.hasClass(element, 'my-class');
// 创建元素
const newElement = MixinUI.createElement('div', {
class: 'my-class',
id: 'my-id'
}, '内容文本');
// 添加事件监听器
MixinUI.on(element, 'click', function() {
console.log('元素被点击');
});
// 移除事件监听器
MixinUI.off(element, 'click', myFunction);
// 触发事件
MixinUI.trigger(element, 'click');
// 防抖函数
const debouncedFunction = MixinUI.debounce(function() {
console.log('防抖函数执行');
}, 300);
// 节流函数
const throttledFunction = MixinUI.throttle(function() {
console.log('节流函数执行');
}, 300);CSS 变量
MixinUI 使用 CSS 变量来定义主题和样式，您可以通过覆盖这些变量来自定义框架的外观：
:root {
/* 修改主色调 */
--mixinui_primary-color: #007bff;
--mixinui_primary-color-dark: #0069d9;
--mixinui_primary-color-light: #e6f2ff;
/* 修改字体 */
--mixinui_font-family: 'Microsoft YaHei', sans-serif;
/* 修改边框圆角 */
--mixinui_border-radius: 0.5rem;
}主要的 CSS 变量包括：
颜色变量
--mixinui_primary-color: 主要颜色--mixinui_secondary-color: 次要颜色--mixinui_success-color: 成功颜色--mixinui_info-color: 信息颜色--mixinui_warning-color: 警告颜色--mixinui_danger-color: 危险颜色--mixinui_light-color: 亮色--mixinui_dark-color: 暗色--mixinui_text-color: 文本颜色--mixinui_bg-color: 背景颜色--mixinui_border-color: 边框颜色
字体变量
--mixinui_font-family: 字体系列--mixinui_font-size-base: 基础字体大小--mixinui_font-size-xs: 超小字体大小--mixinui_font-size-sm: 小字体大小--mixinui_font-size-lg: 大字体大小--mixinui_font-size-xl: 超大字体大小
间距变量
--mixinui_spacing-1: 最小间距--mixinui_spacing-2: 小间距--mixinui_spacing-3: 中等间距--mixinui_spacing-4: 大间距--mixinui_spacing-5: 最大间距
边框变量
--mixinui_border-width: 边框宽度--mixinui_border-radius: 边框圆角--mixinui_border-radius-lg: 大边框圆角--mixinui_border-radius-sm: 小边框圆角
阴影变量
--mixinui_box-shadow: 默认阴影--mixinui_box-shadow-sm: 小阴影--mixinui_box-shadow-lg: 大阴影
浏览器兼容性
MixinUI 支持所有现代浏览器，包括：
- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
- Opera (最新版)
- iOS Safari (最新版)
- Android Browser (最新版)
对于 Internet Explorer 11，部分功能可能需要额外的 polyfill 支持。
更新日志
版本 1.0.0
- 初始版本发布
- 包含基础组件和工具类
- 响应式网格系统
- JavaScript 组件支持
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MixinUI 框架示例</title>
<link rel="stylesheet" href="/view/doc/mixinui/mixinui.css">
<style>
/* 示例页面样式 */
.example-section {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid var(--mixinui_border-color);
}
.example-title {
margin-bottom: 20px;
}
.example-box {
padding: 20px;
border: 1px solid var(--mixinui_border-color);
border-radius: var(--mixinui_border-radius);
margin-bottom: 20px;
}
.color-box {
width: 100%;
height: 80px;
margin-bottom: 10px;
border-radius: var(--mixinui_border-radius);
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<!-- 页面头部 -->
<header class="mixinui_bg-primary mixinui_p-3 mixinui_text-center">
<h1 class="mixinui_text-color-inverse">MixinUI 框架示例</h1>
<p class="mixinui_text-color-inverse">轻量级、响应式的 UI 框架</p>
</header>
<!-- 主要内容 -->
<div class="mixinui_container mixinui_mt-4">
<!-- 网格系统 -->
<section id="grid" class="example-section">
<h2 class="example-title">网格系统</h2>
<div class="example-box">
<h4>基础网格</h4>
<div class="mixinui_row mixinui_mb-3">
<div class="mixinui_col-12"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-12</div></div>
</div>
<div class="mixinui_row mixinui_mb-3">
<div class="mixinui_col-6"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-6</div></div>
<div class="mixinui_col-6"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-6</div></div>
</div>
<div class="mixinui_row mixinui_mb-3">
<div class="mixinui_col-4"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-4</div></div>
<div class="mixinui_col-4"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-4</div></div>
<div class="mixinui_col-4"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-4</div></div>
</div>
<div class="mixinui_row">
<div class="mixinui_col-3"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-3</div></div>
<div class="mixinui_col-3"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-3</div></div>
<div class="mixinui_col-3"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-3</div></div>
<div class="mixinui_col-3"><div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">col-3</div></div>
</div>
</div>
<div class="example-box">
<h4>响应式网格</h4>
<div class="mixinui_row">
<div class="mixinui_col-12 mixinui_col-md-6 mixinui_col-lg-4 mixinui_mb-3">
<div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">
col-12 col-md-6 col-lg-4
</div>
</div>
<div class="mixinui_col-12 mixinui_col-md-6 mixinui_col-lg-4 mixinui_mb-3">
<div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">
col-12 col-md-6 col-lg-4
</div>
</div>
<div class="mixinui_col-12 mixinui_col-md-12 mixinui_col-lg-4 mixinui_mb-3">
<div class="mixinui_p-2 mixinui_bg-light mixinui_text-center">
col-12 col-md-12 col-lg-4
</div>
</div>
</div>
</div>
</section>
<!-- 排版 -->
<section id="typography" class="example-section">
<h2 class="example-title">排版</h2>
<div class="example-box">
<h1 class="mixinui_h1">标题 1</h1>
<h2 class="mixinui_h2">标题 2</h2>
<h3 class="mixinui_h3">标题 3</h3>
<h4 class="mixinui_h4">标题 4</h4>
<h5 class="mixinui_h5">标题 5</h5>
<h6 class="mixinui_h6">标题 6</h6>
</div>
<div class="example-box">
<p class="mixinui_lead">这是一个引导段落，通常用于突出显示重要内容。</p>
<p>这是一个普通段落。MixinUI 是一个轻量级的 UI 框架，提供了丰富的组件和工具类。</p>
<p>你可以使用 <span class="mixinui_small">小文本</span> 和 <mark class="mixinui_mark">高亮文本</mark> 来强调内容。</p>
</div>
<div class="example-box">
<h4>显示标题</h4>
<h1 class="mixinui_display-4">显示标题 4</h1>
<h1 class="mixinui_display-3">显示标题 3</h1>
<h1 class="mixinui_display-2">显示标题 2</h1>
<h1 class="mixinui_display-1">显示标题 1</h1>
</div>
</section>
<!-- 颜色 -->
<section id="colors" class="example-section">
<h2 class="example-title">颜色系统</h2>
<div class="example-box">
<h4>主要颜色</h4>
<div class="mixinui_row">
<div class="mixinui_col-6 mixinui_col-md-4 mixinui_mb-3">
<div class="color-box mixinui_bg-primary">Primary</div>
<code>mixinui_bg-primary</code>
</div>
<div class="mixinui_col-6 mixinui_col-md-4 mixinui_mb-3">
<div class="color-box mixinui_bg-secondary">Secondary</div>
<code>mixinui_bg-secondary</code>
</div>
<div class="mixinui_col-6 mixinui_col-md-4 mixinui_mb-3">
<div class="color-box mixinui_bg-success">Success</div>
<code>mixinui_bg-success</code>
</div>
<div class="mixinui_col-6 mixinui_col-md-4 mixinui_mb-3">
<div class="color-box mixinui_bg-danger">Danger</div>
<code>mixinui_bg-danger</code>
</div>
<div class="mixinui_col-6 mixinui_col-md-4 mixinui_mb-3">
<div class="color-box mixinui_bg-warning" style="color: var(--mixinui_text-color);">Warning</div>
<code>mixinui_bg-warning</code>
</div>
<div class="mixinui_col-6 mixinui_col-md-4 mixinui_mb-3">
<div class="color-box mixinui_bg-info">Info</div>
<code>mixinui_bg-info</code>
</div>
</div>
</div>
<div class="example-box">
<h4>文本颜色</h4>
<p class="mixinui_text-primary">主要文本颜色</p>
<p class="mixinui_text-secondary">次要文本颜色</p>
<p class="mixinui_text-success">成功文本颜色</p>
<p class="mixinui_text-danger">危险文本颜色</p>
<p class="mixinui_text-warning">警告文本颜色</p>
<p class="mixinui_text-info">信息文本颜色</p>
<p class="mixinui_text-muted">静音文本颜色</p>
</div>
</section>
<!-- 按钮 -->
<section id="buttons" class="example-section">
<h2 class="example-title">按钮</h2>
<div class="example-box">
<h4>基础按钮</h4>
<button class="mixinui_btn mixinui_btn-primary mixinui_mr-2 mixinui_mb-2">主要按钮</button>
<button class="mixinui_btn mixinui_btn-secondary mixinui_mr-2 mixinui_mb-2">次要按钮</button>
<button class="mixinui_btn mixinui_btn-success mixinui_mr-2 mixinui_mb-2">成功按钮</button>
<button class="mixinui_btn mixinui_btn-danger mixinui_mr-2 mixinui_mb-2">危险按钮</button>
<button class="mixinui_btn mixinui_btn-warning mixinui_mr-2 mixinui_mb-2">警告按钮</button>
<button class="mixinui_btn mixinui_btn-info mixinui_mr-2 mixinui_mb-2">信息按钮</button>
<button class="mixinui_btn mixinui_btn-light mixinui_mr-2 mixinui_mb-2">亮色按钮</button>
<button class="mixinui_btn mixinui_btn-dark mixinui_mr-2 mixinui_mb-2">暗色按钮</button>
</div>
<div class="example-box">
<h4>轮廓按钮</h4>
<button class="mixinui_btn mixinui_btn-outline-primary mixinui_mr-2 mixinui_mb-2">主要轮廓按钮</button>
</div>
<div class="example-box">
<h4>按钮尺寸</h4>
<button class="mixinui_btn mixinui_btn-primary mixinui_btn-lg mixinui_mr-2 mixinui_mb-2">大按钮</button>
<button class="mixinui_btn mixinui_btn-primary mixinui_mr-2 mixinui_mb-2">默认按钮</button>
<button class="mixinui_btn mixinui_btn-primary mixinui_btn-sm mixinui_mr-2 mixinui_mb-2">小按钮</button>
</div>
<div class="example-box">
<h4>块级按钮</h4>
<button class="mixinui_btn mixinui_btn-primary mixinui_btn-block mixinui_mb-2">块级按钮</button>
<button class="mixinui_btn mixinui_btn-secondary mixinui_btn-block">块级按钮</button>
</div>
<div class="example-box">
<h4>禁用状态</h4>
<button class="mixinui_btn mixinui_btn-primary mixinui_mr-2" disabled>禁用按钮</button>
<button class="mixinui_btn mixinui_btn-secondary mixinui_disabled">禁用按钮</button>
</div>
</section>
<!-- 表单 -->
<section id="forms" class="example-section">
<h2 class="example-title">表单</h2>
<div class="example-box">
<form>
<div class="mixinui_form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="mixinui_form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>
<div class="mixinui_form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="mixinui_form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="mixinui_form-group">
<label for="exampleFormControlSelect1">下拉选择</label>
<select class="mixinui_form-control" id="exampleFormControlSelect1">
<option>选项 1</option>
<option>选项 2</option>
<option>选项 3</option>
<option>选项 4</option>
<option>选项 5</option>
</select>
</div>
<div class="mixinui_form-group">
<label for="exampleFormControlTextarea1">文本区域</label>
<textarea class="mixinui_form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mixinui_form-check mixinui_mb-3">
<input type="checkbox" class="mixinui_form-check-input" id="exampleCheck1">
<label class="mixinui_form-check-label" for="exampleCheck1">记住我</label>
</div>
<button type="submit" class="mixinui_btn mixinui_btn-primary">提交</button>
</form>
</div>
</section>
<!-- 卡片 -->
<section id="cards" class="example-section">
<h2 class="example-title">卡片</h2>
<div class="mixinui_row">
<div class="mixinui_col-12 mixinui_col-md-4 mixinui_mb-3">
<div class="mixinui_card">
<img src="/placeholder.svg?height=180&width=100%" class="mixinui_card-img-top" alt="卡片图片">
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">这是一个基础卡片示例，包含图片、标题和文本内容。</p>
<a href="#" class="mixinui_btn mixinui_btn-primary">查看详情</a>
</div>
</div>
</div>
<div class="mixinui_col-12 mixinui_col-md-4 mixinui_mb-3">
<div class="mixinui_card">
<div class="mixinui_card-header">
卡片头部
</div>
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">带头部的卡片</h5>
<p class="mixinui_card-text">这个卡片包含头部和底部区域，适合展示更多结构化内容。</p>
</div>
<div class="mixinui_card-footer">
<small class="mixinui_text-muted">最后更新于 3 分钟前</small>
</div>
</div>
</div>
<div class="mixinui_col-12 mixinui_col-md-4 mixinui_mb-3">
<div class="mixinui_card">
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">简单卡片</h5>
<h6 class="mixinui_card-subtitle mixinui_mb-2 mixinui_text-muted">卡片副标题</h6>
<p class="mixinui_card-text">这是一个只有主体内容的简单卡片，适合展示简洁的信息。</p>
<a href="#" class="mixinui_card-link">卡片链接</a>
<a href="#" class="mixinui_card-link">另一个链接</a>
</div>
</div>
</div>
</div>
</section>
<!-- 表格 -->
<section id="tables" class="example-section">
<h2 class="example-title">表格</h2>
<div class="example-box">
<h4>基础表格</h4>
<table class="mixinui_table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>职位</th>
<th>部门</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>前端开发</td>
<td>技术部</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>UI 设计师</td>
<td>设计部</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>产品经理</td>
<td>产品部</td>
</tr>
</tbody>
</table>
</div>
<div class="example-box">
<h4>条纹表格</h4>
<table class="mixinui_table mixinui_table-striped">
<thead>
<tr>
<th>#</th>
<th>产品名称</th>
<th>价格</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>笔记本电脑</td>
<td>¥6999</td>
<td>15</td>
</tr>
<tr>
<td>2</td>
<td>智能手机</td>
<td>¥3999</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>无线耳机</td>
<td>¥999</td>
<td>42</td>
</tr>
</tbody>
</table>
</div>
<div class="example-box">
<h4>带边框表格</h4>
<table class="mixinui_table mixinui_table-bordered">
<thead>
<tr>
<th>#</th>
<th>项目</th>
<th>负责人</th>
<th>进度</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>网站重构</td>
<td>张三</td>
<td>75%</td>
</tr>
<tr>
<td>2</td>
<td>移动应用开发</td>
<td>李四</td>
<td>30%</td>
</tr>
<tr>
<td>3</td>
<td>数据分析平台</td>
<td>王五</td>
<td>60%</td>
</tr>
</tbody>
</table>
</div>
<div class="example-box">
<h4>悬停效果表格</h4>
<table class="mixinui_table mixinui_table-hover">
<thead>
<tr>
<th>#</th>
<th>活动</th>
<th>日期</th>
<th>地点</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>产品发布会</td>
<td>2023-06-15</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>技术研讨会</td>
<td>2023-07-20</td>
<td>上海</td>
</tr>
<tr>
<td>3</td>
<td>年度峰会</td>
<td>2023-09-10</td>
<td>广州</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 提示框 -->
<section id="alerts" class="example-section">
<h2 class="example-title">提示框</h2>
<div class="mixinui_alert mixinui_alert-primary mixinui_mb-3">
这是一个主要提示框，用于显示重要信息。
</div>
<div class="mixinui_alert mixinui_alert-success mixinui_mb-3">
这是一个成功提示框，用于显示操作成功的消息。
</div>
<div class="mixinui_alert mixinui_alert-danger mixinui_mb-3">
这是一个危险提示框，用于显示错误或警告信息。
</div>
<div class="mixinui_alert mixinui_alert-warning mixinui_mb-3">
这是一个警告提示框，用于提醒用户注意某些事项。
</div>
<div class="mixinui_alert mixinui_alert-info mixinui_mb-3">
这是一个信息提示框，用于展示一般性通知。
</div>
</section>
<!-- 徽章 -->
<section id="badges" class="example-section">
<h2 class="example-title">徽章</h2>
<div class="example-box">
<h4>基础徽章</h4>
<span class="mixinui_badge mixinui_badge-primary mixinui_mr-2">主要</span>
<span class="mixinui_badge mixinui_badge-secondary mixinui_mr-2">次要</span>
<span class="mixinui_badge mixinui_badge-success mixinui_mr-2">成功</span>
<span class="mixinui_badge mixinui_badge-danger mixinui_mr-2">危险</span>
<span class="mixinui_badge mixinui_badge-warning mixinui_mr-2">警告</span>
<span class="mixinui_badge mixinui_badge-info mixinui_mr-2">信息</span>
</div>
<div class="example-box">
<h4>徽章与其他元素结合</h4>
<button class="mixinui_btn mixinui_btn-primary mixinui_mr-2">
通知 <span class="mixinui_badge mixinui_badge-light">4</span>
</button>
<button class="mixinui_btn mixinui_btn-success mixinui_mr-2">
消息 <span class="mixinui_badge mixinui_badge-light">8</span>
</button>
</div>
</section>
<!-- 模态框 -->
<section id="modals" class="example-section">
<h2 class="example-title">模态框</h2>
<div class="example-box">
<button class="mixinui_btn mixinui_btn-primary" data-mixinui-toggle="modal" data-mixinui-target="#exampleModal">
打开模态框
</button>
<div class="mixinui_modal" id="exampleModal">
<div class="mixinui_modal-dialog">
<div class="mixinui_modal-content">
<div class="mixinui_modal-header">
<h5 class="mixinui_modal-title">模态框标题</h5>
<button type="button" class="mixinui_btn mixinui_btn-close" data-mixinui-dismiss="modal" aria-label="关闭">×</button>
</div>
<div class="mixinui_modal-body">
<p>这是模态框的主体内容。您可以在这里放置任何内容，如文本、表单、图片等。</p>
</div>
<div class="mixinui_modal-footer">
<button type="button" class="mixinui_btn mixinui_btn-secondary" data-mixinui-dismiss="modal">关闭</button>
<button type="button" class="mixinui_btn mixinui_btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 工具类 -->
<section id="utilities" class="example-section">
<h2 class="example-title">工具类</h2>
<div class="example-box">
<h4>文本对齐</h4>
<p class="mixinui_text-left">左对齐文本</p>
<p class="mixinui_text-center">居中对齐文本</p>
<p class="mixinui_text-right">右对齐文本</p>
</div>
<div class="example-box">
<h4>显示属性</h4>
<div class="mixinui_d-inline mixinui_p-2 mixinui_bg-light">d-inline</div>
<div class="mixinui_d-inline-block mixinui_p-2 mixinui_bg-light">d-inline-block</div>
<div class="mixinui_d-block mixinui_p-2 mixinui_bg-light">d-block</div>
</div>
<div class="example-box">
<h4>Flex 布局</h4>
<div class="mixinui_d-flex mixinui_justify-content-between mixinui_mb-3 mixinui_p-2 mixinui_bg-light">
<div>Flex 项目 1</div>
<div>Flex 项目 2</div>
<div>Flex 项目 3</div>
</div>
<div class="mixinui_d-flex mixinui_justify-content-center mixinui_mb-3 mixinui_p-2 mixinui_bg-light">
<div>居中 Flex 项目</div>
</div>
<div class="mixinui_d-flex mixinui_flex-column mixinui_p-2 mixinui_bg-light">
<div class="mixinui_mb-2">垂直 Flex 项目 1</div>
<div class="mixinui_mb-2">垂直 Flex 项目 2</div>
<div>垂直 Flex 项目 3</div>
</div>
</div>
<div class="example-box">
<h4>边距</h4>
<div class="mixinui_bg-light mixinui_p-3 mixinui_mb-3">默认边距</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_m-3 mixinui_mb-3">m-3 (所有方向边距)</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_mt-4 mixinui_mb-3">mt-4 (顶部边距)</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_mb-5">mb-5 (底部边距)</div>
</div>
<div class="example-box">
<h4>内边距</h4>
<div class="mixinui_bg-light mixinui_mb-3">无内边距</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_mb-3">p-3 (所有方向内边距)</div>
<div class="mixinui_bg-light mixinui_p-4 mixinui_mb-3">p-4 (更大的内边距)</div>
<div class="mixinui_bg-light mixinui_p-5 mixinui_mb-3">p-5 (最大内边距)</div>
</div>
<div class="example-box">
<h4>宽度和高度</h4>
<div class="mixinui_bg-light mixinui_p-2 mixinui_w-25 mixinui_mb-2">w-25 (25% 宽度)</div>
<div class="mixinui_bg-light mixinui_p-2 mixinui_w-50 mixinui_mb-2">w-50 (50% 宽度)</div>
<div class="mixinui_bg-light mixinui_p-2 mixinui_w-75 mixinui_mb-2">w-75 (75% 宽度)</div>
<div class="mixinui_bg-light mixinui_p-2 mixinui_w-100 mixinui_mb-2">w-100 (100% 宽度)</div>
</div>
<div class="example-box">
<h4>边框和圆角</h4>
<div class="mixinui_bg-light mixinui_p-3 mixinui_border mixinui_mb-3">带边框</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_border mixinui_rounded mixinui_mb-3">带圆角边框</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_border mixinui_rounded-circle mixinui_d-inline-block mixinui_mb-3" style="width: 100px; height: 100px; text-align: center; line-height: 100px;">圆形</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_border mixinui_rounded-pill mixinui_mb-3">胶囊形状</div>
</div>
<div class="example-box">
<h4>阴影</h4>
<div class="mixinui_bg-light mixinui_p-3 mixinui_shadow-sm mixinui_mb-3">小阴影</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_shadow mixinui_mb-3">默认阴影</div>
<div class="mixinui_bg-light mixinui_p-3 mixinui_shadow-lg mixinui_mb-3">大阴影</div>
</div>
</section>
</div>
<!-- 页脚 -->
<footer class="mixinui_bg-dark mixinui_p-4 mixinui_text-center mixinui_text-color-inverse mixinui_mt-5">
<p>MixinUI 框架示例 © 2025</p>
</footer>
<!-- JavaScript -->
<script src="/view/doc/mixinui/mixinui.js"></script>
</body>
</html>...胶囊式选项卡
<ul class="mixinui_nav mixinui_nav-pills">
<li class="mixinui_nav-item">
<a class="mixinui_nav-link mixinui_active" data-mixinui-toggle="tab" href="#home-pills">首页</a>
</li>
<li class="mixinui_nav-item">
<a class="mixinui_nav-link" data-mixinui-toggle="tab" href="#profile-pills">个人资料</a>
</li>
</ul>下拉菜单
下拉菜单用于显示链接列表，通常用于导航或操作选项。
基础用法
<div class="mixinui_dropdown">
<button class="mixinui_btn mixinui_btn-primary" data-mixinui-toggle="dropdown">
下拉菜单
</button>
<div class="mixinui_dropdown-menu">
<a class="mixinui_dropdown-item" href="#">选项 1</a>
<a class="mixinui_dropdown-item" href="#">选项 2</a>
<div class="mixinui_dropdown-divider"></div>
<a class="mixinui_dropdown-item" href="#">选项 3</a>
</div>
</div>分割按钮下拉菜单
<div class="mixinui_btn-group">
<button type="button" class="mixinui_btn mixinui_btn-primary">主要操作</button>
<button type="button" class="mixinui_btn mixinui_btn-primary mixinui_dropdown-toggle" data-mixinui-toggle="dropdown">
<span class="mixinui_sr-only">切换下拉菜单</span>
</button>
<div class="mixinui_dropdown-menu">
<a class="mixinui_dropdown-item" href="#">选项 1</a>
<a class="mixinui_dropdown-item" href="#">选项 2</a>
</div>
</div>工具提示
工具提示是一种小型的弹出框，当用户悬停在元素上时显示信息。
基础用法
<button class="mixinui_btn mixinui_btn-secondary"
data-mixinui-toggle="tooltip"
title="顶部工具提示"
data-mixinui-placement="top">
顶部提示
</button>不同方向的工具提示
<!-- 顶部提示 -->
<button data-mixinui-toggle="tooltip" data-mixinui-placement="top" title="顶部提示">顶部</button>
<!-- 右侧提示 -->
<button data-mixinui-toggle="tooltip" data-mixinui-placement="right" title="右侧提示">右侧</button>
<!-- 底部提示 -->
<button data-mixinui-toggle="tooltip" data-mixinui-placement="bottom" title="底部提示">底部</button>
<!-- 左侧提示 -->
<button data-mixinui-toggle="tooltip" data-mixinui-placement="left" title="左侧提示">左侧</button>进度条
进度条用于显示操作的完成进度。
基础进度条
<div class="mixinui_progress">
<div class="mixinui_progress-bar" role="progressbar"
style="width: 25%;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100">
25%
</div>
</div>条纹进度条
<div class="mixinui_progress">
<div class="mixinui_progress-bar mixinui_progress-bar-striped"
role="progressbar" style="width: 40%;"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
40%
</div>
</div>动画进度条
<div class="mixinui_progress">
<div class="mixinui_progress-bar mixinui_progress-bar-striped mixinui_progress-bar-animated"
role="progressbar" style="width: 60%;"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
60%
</div>
</div>列表组
列表组是一个灵活的组件，用于显示一系列内容。
基础列表组
<ul class="mixinui_list-group">
<li class="mixinui_list-group-item">基础列表项</li>
<li class="mixinui_list-group-item">第二个列表项</li>
<li class="mixinui_list-group-item">第三个列表项</li>
<li class="mixinui_list-group-item">第四个列表项</li>
</ul>活动状态和禁用状态
<ul class="mixinui_list-group">
<li class="mixinui_list-group-item mixinui_active">活动状态列表项</li>
<li class="mixinui_list-group-item">普通列表项</li>
<li class="mixinui_list-group-item mixinui_disabled">禁用状态列表项</li>
<li class="mixinui_list-group-item">另一个普通列表项</li>
</ul>带徽章的列表组
<ul class="mixinui_list-group">
<li class="mixinui_list-group-item mixinui_d-flex
mixinui_justify-content-between mixinui_align-items-center">
未读消息
<span class="mixinui_badge mixinui_badge-primary mixinui_badge-pill">14</span>
</li>
<li class="mixinui_list-group-item mixinui_d-flex
mixinui_justify-content-between mixinui_align-items-center">
待办任务
<span class="mixinui_badge mixinui_badge-primary mixinui_badge-pill">2</span>
</li>
</ul>面包屑导航
面包屑导航提供了一种导航方式，帮助用户了解他们在网站中的位置。
基础面包屑
<nav aria-label="breadcrumb">
<ol class="mixinui_breadcrumb">
<li class="mixinui_breadcrumb-item"><a href="#">首页</a></li>
<li class="mixinui_breadcrumb-item"><a href="#">产品</a></li>
<li class="mixinui_breadcrumb-item mixinui_active" aria-current="page">详情</li>
</ol>
</nav>分页
分页组件用于在多页内容之间进行导航。
基础分页
<nav aria-label="Page navigation example">
<ul class="mixinui_pagination">
<li class="mixinui_page-item mixinui_disabled">
<a class="mixinui_page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
</li>
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">1</a></li>
<li class="mixinui_page-item mixinui_active" aria-current="page">
<a class="mixinui_page-link" href="#">2</a>
</li>
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">3</a></li>
<li class="mixinui_page-item">
<a class="mixinui_page-link" href="#">下一页</a>
</li>
</ul>
</nav>分页尺寸
<!-- 大尺寸分页 -->
<nav aria-label="Large pagination example">
<ul class="mixinui_pagination mixinui_pagination-lg">
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">1</a></li>
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">2</a></li>
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">3</a></li>
</ul>
</nav>
<!-- 小尺寸分页 -->
<nav aria-label="Small pagination example">
<ul class="mixinui_pagination mixinui_pagination-sm">
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">1</a></li>
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">2</a></li>
<li class="mixinui_page-item"><a class="mixinui_page-link" href="#">3</a></li>
</ul>
</nav>卡片
卡片是一个灵活的内容容器，具有多种变体和选项。
基础卡片
<div class="mixinui_card">
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">卡片内容文本。</p>
<a href="#" class="mixinui_btn mixinui_btn-primary">按钮</a>
</div>
</div>带图片的卡片
<div class="mixinui_card">
<img src="..." class="mixinui_card-img-top" alt="卡片图片">
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">卡片内容文本。</p>
<a href="#" class="mixinui_btn mixinui_btn-primary">按钮</a>
</div>
</div>带头部和底部的卡片
<div class="mixinui_card">
<div class="mixinui_card-header">
卡片头部
</div>
<div class="mixinui_card-body">
<h5 class="mixinui_card-title">卡片标题</h5>
<p class="mixinui_card-text">卡片内容文本。</p>
</div>
<div class="mixinui_card-footer">
<small class="mixinui_text-muted">最后更新于 3 分钟前</small>
</div>
</div>模态框
模态框是一种对话框或弹出窗口，显示在当前页面的顶层。
基础模态框
<!-- 触发按钮 -->
<button class="mixinui_btn mixinui_btn-primary" data-mixinui-toggle="modal" data-mixinui-target="#exampleModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="mixinui_modal" id="exampleModal">
<div class="mixinui_modal-dialog">
<div class="mixinui_modal-content">
<div class="mixinui_modal-header">
<h5 class="mixinui_modal-title">模态框标题</h5>
<button type="button" class="mixinui_btn mixinui_btn-close" data-mixinui-dismiss="modal" aria-label="关闭">×</button>
</div>
<div class="mixinui_modal-body">
<p>模态框内容...</p>
</div>
<div class="mixinui_modal-footer">
<button type="button" class="mixinui_btn mixinui_btn-secondary" data-mixinui-dismiss="modal">关闭</button>
<button type="button" class="mixinui_btn mixinui_btn-primary">保存更改</button>
</div>
</div>
</div>
</div>JavaScript 方法
// 显示模态框
MixinUI.showModal(document.getElementById('myModal'));
// 隐藏模态框
MixinUI.hideModal(document.getElementById('myModal'));提示框
提示框用于向用户显示重要信息。
基础提示框
<div class="mixinui_alert mixinui_alert-primary">
这是一个主要提示框。
</div>
<div class="mixinui_alert mixinui_alert-success">
这是一个成功提示框。
</div>
<div class="mixinui_alert mixinui_alert-danger">
这是一个危险提示框。
</div>
<div class="mixinui_alert mixinui_alert-warning">
这是一个警告提示框。
</div>
<div class="mixinui_alert mixinui_alert-info">
这是一个信息提示框。
</div>徽章
徽章是一种小型的计数和标签组件。
基础徽章
<span class="mixinui_badge mixinui_badge-primary">主要</span>
<span class="mixinui_badge mixinui_badge-secondary">次要</span>
<span class="mixinui_badge mixinui_badge-success">成功</span>
<span class="mixinui_badge mixinui_badge-danger">危险</span>
<span class="mixinui_badge mixinui_badge-warning">警告</span>
<span class="mixinui_badge mixinui_badge-info">信息</span>徽章与其他元素结合
<button class="mixinui_btn mixinui_btn-primary">
通知 <span class="mixinui_badge mixinui_badge-light">4</span>
</button>总结
MixinUI 框架提供了丰富的组件，可以帮助开发者快速构建现代化的 Web 应用界面。通过合理组合这些组件，可以创建出功能强大、外观精美的用户界面。
所有组件都遵循一致的命名规则，使用 mixinui_ 前缀，避免与其他框架或自定义样式冲突。
更多高级用法和自定义选项，请参考 MixinUI 完整文档。