@apigo.cc/bootstrap API 手册 (AI Optimized)

Bootstrap 5.3 自包含集成引擎。

0. 快速开始 (Quick Start)

直接在 HTML 中引入（无需打包，完全非 ESM 注入）：

<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/[email protected]/dist/bootstrap.min.js"></script>

1. 运行时接口

• bootstrap: (Object) 官方原生 Bootstrap 镜像。已挂载至 globalThis.bootstrap。
• Bootstrap: (Object) 增强控制接口。已挂载至 globalThis.Bootstrap。

(注意：本库自 v1.0.6 起全面废弃 ESM 导出，改为纯全局注入模式。)

2. API 参考

Bootstrap.config(options)

统一配置入口。未定义的 key 将被忽略。

参数 options:

• 主题色: primary, secondary, success, info, warning, danger, light, dark (Hex 字符串)。
  • 行为: 自动更新 CSS 变量并注入深度样式补丁（覆盖按钮、表单控件、开关、进度条等硬编码样式）。实心按钮保留较深的 hover / active 状态。
  • 链接按钮: 支持 btn-link-primary、btn-link-info 等全部语义色类；hover / active 会随配置色变深。也兼容组合写法 btn btn-link btn-link-info。
• 暗黑模式:
  • darkMode: (Boolean) 直接设置主题。true 为 dark，false 为 light。
  • bindDarkMode: (Array) [state, key]。绑定响应式状态。
    • state: 具有 __watch(key, callback) 方法的状态对象。
    • key: 状态对象中的键名。

示例 (Examples):

// 1. 设置颜色与暗黑模式简写
Bootstrap.config({ 
    primary: '#a855f7', 
    bindDarkMode: [LocalStorage, 'isDark'] 
});

// 2. 手动模式
Bootstrap.config({ darkMode: true });

// 3. 仅更新单一颜色 (自动处理相关组件补丁)
Bootstrap.config({ success: '#22c55e' });

<button class="btn btn-link-info">Info Link</button>

3. 核心机制 (Internal)

• 运行时样式补丁: Bootstrap.config 动态更新 id="bs-config-patch" 的 <style> 标签。通过 !important 覆盖 Bootstrap 内部硬编码的组件颜色（如 .btn, .form-switch, .form-range, .progress-bar, .list-group-item, .nav-pills, .dropdown-menu, .navbar-nav .nav-link.active 等）。
• 零构建支持: 无需 Sass 重新编译，在纯 ESM 环境下即可实现全量主题定制。