sveltestrap

Bootstrap 5 Suve 4+的組件

Sveltestrap是一個庫，旨在簡化Bootstrap 5組件在您的Svelte應用程序中的集成。它消除了Bootstrap組件類的需求，Bootstrap的JavaScript包含以及對jQuery的依賴。

該開源軟件可根據MIT允許的MIT許可免費提供。它從ReactStrap庫中汲取靈感來進行React。

請注意，Sveltestrap不會直接嵌入引導樣式。要有效地使用Bootstrap主題，必須使用以下概述的一種方法包括Bootstrap 5 CS。

請注意，如果您尋找Svelte 3.x支持，則可以使用原始的Sveltestrap軟件包。

加入社區

---

安裝

 # npm
> npm install svelte @sveltestrap/sveltestrap

# pnpm
> pnpm install svelte @sveltestrap/sveltestrap

# yarn
> yarn add svelte @sveltestrap/sveltestrap

Bootstrap CSS

必須注意的是，Bootstrap 5組件不帶有預加載的引導樣式，因此您需要手動添加樣式表。這是您可以添加它們的方法：

1. 添加到您的應用程序static index.html文件

 < head >
  < link
    rel =" stylesheet "
    href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css "
  />
</ head >

2. 添加到您的主App.svelte程序。

 < svelte:head >
  < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css " >
</ svelte:head >

3. 直接在您的CSS捆綁中導入樣式

 < style >
  @import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
</ style >

4. 使用提供的樣式組件

 < 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 > 

引導圖標

如果要使用圖標組件，則還必須包括一個鏈接到Bootstrap Icon 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 "
/>

或樣式組件默認包含Bootstrap圖標CSS：

 < script >
  import { Styles } from '@sveltestrap/sveltestrap' ;
</ script >

< Styles /> 

贊助商

維護者

貢獻者