sveltestrap
v6.2.7
Sveltestrap은 부트 스트랩 5 구성 요소를 Svelte 애플리케이션에 단순화하도록 설계된 라이브러리입니다. 부트 스트랩 구성 요소 클래스, 부트 스트랩의 JavaScript 포함 및 jQuery에 대한 의존이 필요하지 않습니다.
이 오픈 소스 소프트웨어는 허용 MIT 라이센스에 따라 자유롭게 사용할 수 있습니다. ReactStrap 라이브러리에서 영감을 얻습니다.
Sveltestrap은 부트 스트랩 스타일을 직접 포함하지 않습니다 . 부트 스트랩 테마를 효과적으로 사용하려면 아래에 요약 된 방법 중 하나를 사용하여 부트 스트랩 5 CS를 포함해야합니다.
참고 Svelte 3.X 지원을 찾는 경우 원래 Sveltestrap 패키지를 사용할 수 있습니다.
# npm
> npm install svelte @sveltestrap/sveltestrap
# pnpm
> pnpm install svelte @sveltestrap/sveltestrap
# yarn
> yarn add svelte @sveltestrap/sveltestrapBootstrap 5 구성 요소에는 Bootstrap 스타일이 사전로드 된 상태로 제공되지 않으므로 스타일 시트를 수동으로 추가해야합니다. 다음은 다음을 추가 할 수있는 방법입니다.
index.html 파일에 추가하십시오 < head >
< link
rel =" stylesheet "
href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css "
/>
</ head >App.svelte 파일에 추가하십시오 < svelte:head >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " >
</ svelte:head > < style >
@import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
</ style > < script >
import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >
< Styles />그런 다음 Svelte 구성 요소에서 Sveltestrap 구성 요소를 사용하십시오.
< script >
import { Button , Col , Row } from '@sveltestrap/sveltestrap' ;
</ script >
< Row >
< Col >
< Button color =" primary " outline > Hello World! </ Button >
</ Col >
</ Row > 아이콘 구성 요소를 사용하려면 부트 스트랩 아이콘 CSS 링크도 포함해야합니다.
앱 App.svelte 에 포함시킵니다.
< svelte:head >
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css " >
</ svelte:head > 또는 앱의 index.html 에 포함시킬 수 있습니다.
< link
rel =" stylesheet "
href =" https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css "
/>또는 스타일 구성 요소에는 기본적으로 부트 스트랩 아이콘 CSS가 포함됩니다.
< script >
import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >
< Styles /> 
