43 lines
1.2 KiB
HTML
43 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Bootstrap Integration Test</title>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@apigo.cc/state": "../state/src/index.js",
|
|
"@apigo.cc/bootstrap": "./src/index.js"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container p-5">
|
|
<h1 class="text-primary"><i class="bi bi-bootstrap-fill"></i> Bootstrap Ready</h1>
|
|
<button id="toggle-btn" class="btn btn-primary">Toggle Dark Mode</button>
|
|
<div class="mt-3">
|
|
<span class="badge bg-success">Success</span>
|
|
<span class="badge bg-danger">Danger</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { Bootstrap } from '@apigo.cc/bootstrap';
|
|
import { LocalStorage } from '@apigo.cc/state';
|
|
|
|
// 初始化
|
|
LocalStorage.darkMode = false;
|
|
Bootstrap.bindDarkMode(LocalStorage, 'darkMode');
|
|
|
|
document.getElementById('toggle-btn').onclick = () => {
|
|
LocalStorage.darkMode = !LocalStorage.darkMode;
|
|
};
|
|
|
|
// 验证主色修改
|
|
window.setTheme = (color) => {
|
|
Bootstrap.config({ primary: color });
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|