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 框架示例 &copy; 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 完整文档。

目录
设置
主题设置
深色模式
字体设置
字体大小
16