Svelte에 Bootstrap 5를 설치하는 방법
Svelte에 부트스트랩 5 설치
Svelte 프로젝트 만들기
npm create vite@latest
날씬한 선택
✔ Project name: … svelte-bootstrap
? Select a framework: › - Use arrow-keys. Return to submit.
vanilla
vue
react
preact
lit
❯ svelte
svelte에서 bootstrap 5를 설치할 수 있는 두 가지 방법이 있습니다. sveltesttrap 및 npm 설치 부트스트랩을 사용합니다.
1) sveltestrap을 사용하여 svelte에 부트스트랩 5를 설치합니다.
먼저 NPM을 통해 sveltesttrap을 설치해야 합니다.
npm install sveltestrap svelte
부트스트랩 추가
Sveltesttrap은 부트스트랩 CSS를 포함하거나 포함하지 않으므로 레이아웃에 부트스트랩 CSS를 포함하거나(1) npm에서 설치(2)하여 사용자가 설치해야 합니다.
정적 HTML 레이아웃
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte + Vite App + Bootstrap 5</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
App.svelte
<script>
import { Button, Col, Row } from 'sveltestrap';
</script>
<main>
<Row>
<Col>
<Button color="primary">Button</Button>
<Button color="primary" outline>Button</Button>
<Button color="danger">Button</Button>
<Button color="danger" outline>Button</Button>
</Col>
</Row>
</main>
<style>
main {
text-align: center;
padding: 1em;
margin: 0 auto;
}
</style>
2. 또는 npm을 통해 설치
npm install bootstrap
src/index.js 파일에서 Bootstrap CSS를 가져옵니다.
import 'bootstrap/dist/css/bootstrap.min.css';
3. CDN을 통해 Svelte에 부트스트랩 5 설치
sveltesvelte:head 요소를 사용하면 문서 내부에 요소를 삽입할 수 있습니다.
<svelte:head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</svelte:head>
<div>
<button class="btn btn-primary">
Button
</button>
</div>
또한 읽기
How to install & setup Vite + Typescript in Svelte
Svelte For Each Block Loop Example
Svelte Two Way Data Binding Example
How to Install Tailwind CSS 3 in Svelte
How to Use Click Event Handler in Svelte
How to Image Upload With Preview in Svelte
Build a Simple Counter App in Svelte
Reference
이 문제에 관하여(Svelte에 Bootstrap 5를 설치하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/frontendshape/how-to-install-bootstrap-5-in-svelte-4acc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
