做法
建立專案。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| bun create vite
✔ Project name: … svelte-bootstrap-example
✔ Select a framework: › Svelte
✔ Select a variant: › SvelteKit ↗
create-svelte version 6.1.2
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ Skeleton project
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◇ Select additional options (use arrow keys/space bar)
│ Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└ Your project is ready!
|
初始化專案。
1
2
3
| cd svelte-bootstrap-example
bun install
git init && git add -A && git commit -m "Initial commit"
|
安裝依賴套件。
1
| bun add bootstrap @types/bootstrap sass -D
|
新增 .vscode/settings.json 檔。
1
2
3
4
5
| {
"editor.tabSize": 2,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
|
新增 main.scss 檔。
1
| @import 'bootstrap/scss/bootstrap';
|
修改 src/routes/+page.svelte 檔。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <script lang="ts">
import type { Tooltip } from 'bootstrap';
import { onMount } from 'svelte';
import './main.scss';
let bootstrap: typeof import('bootstrap');
onMount(async () => {
bootstrap = await import('bootstrap');
});
const handleCopy = () => {
tooltip.show();
setTimeout(() => tooltip.hide(), 1000);
};
$: tooltip = bootstrap?.Tooltip.getOrCreateInstance('#tooltip') as Tooltip;
</script>
<button type="button" class="btn btn-primary">Hello, World!</button>
<button
class="btn btn-block btn-warning"
data-bs-placement="bottom"
data-bs-toggle="tooltip"
data-bs-trigger="manual"
id="tooltip"
on:click={handleCopy}
title="Clicked Successfully!"
type="button"
>
Click!
</button>
|
啟動專案。
前往 http://localhost:5174 瀏覽。
程式碼
參考資料