Polepšajte svoje projekte Svelte s priljubljeno knjižnico Bootstrap CSS.

Svelte je odlična izbira za gradnjo uporabniških vmesnikov in medtem ko lahko pisanje slogov po meri zadostuje za majhne projekte, je knjižnica komponent pogosto boljša za obsežne projekte.

Takšne knjižnice ponujajo prednosti, kot so dosleden uporabniški vmesnik, izboljšana dostopnost in prilagodljive možnosti prilagajanja. Naučite se, kako lahko delate s knjižnico komponent SvelteStrap, da poenostavite svoj razvoj.

Kaj sta Svelte in Bootstrap?

Svelte je ogrodje JavaScript, ki se razlikuje od običajnega pristopa ogrodij, kot je React. Namesto izvajanja večine svojih operacij med izvajanjem, Svelte prevede vašo aplikacijo v JavaScript med gradnjo.

Ta edinstven pristop odpravlja potrebo po virtualnem Objektni model dokumenta (DOM) in znatno zmanjša standardno kodo.

Bootstrap je ogrodje CSS, ki ga je ustvaril Twitter (zdaj blagovna znamka X), ki je bil pionir filozofije oblikovanja »najprej mobilno«. Ponuja veliko vnaprej pripravljenih komponent.

Namestitev Sveltestrapa v vaš projekt

Preden lahko namestite Sveltestrap v svoj projekt, se morate prepričati, da je vaš projekt Svelte pravilno nastavljen. Prepričajte se, da imate Node.js in Node Package Manager (NPM) ali Yarn teče na vašem stroju. S tem ukazom lahko zgradite nov projekt Svelte:

npm create vite
# or
yarn create vite

Poimenujte svoj projekt Svelte in ko boste pozvani, da izberete okvir in različico, izberite Svelte oziroma JavaScript. Ko to storite, cd v imenik projekta in zaženite:

npm install
# or
yarn

Ta ukaz bo namestil potrebne odvisnosti za tipičen projekt Svelte.

Ko je vaš projekt Svelte pripravljen, lahko zdaj namestite knjižnico Sveltestrap tako, da zaženete:

npm i sveltestrap
# or
yarn add sveltestrap

Če med namestitvijo Sveltestrap naletite na napako »ni mogoče razrešiti drevesa odvisnosti«, jo odpravite tako, da zaženete te terminalske ukaze:

npm config set legacy-peer-deps true
npm cache clean --force

Nato nadaljujte z namestitvijo Sveltestrap ali razmislite o uporabi Yarna kot alternativnega upravitelja paketov.

Izbriši sredstev in lib mapo, nato počistite vsebino mape App.svelte datoteko in App.css mapa. Nato lahko zaženete razvojni strežnik tako, da zaženete:

npm run dev
# or
yarn dev

Uporaba Sveltestrapa v vašem projektu

Če želite začeti uporabljati Sveltestrap, morate vključiti povezavo do slogovnega lista Bootstrap s povezavo CDN. To lahko storite znotraj glavo element v vaši postavitvi HTML ali iz svelte: glava v vaši komponenti Svelte.

Odprite index.html in v datoteko dodajte naslednje glavo element:

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

Če želite, lahko uvozite ali dodate povezava oznako neposredno v svelte: glava poseben element, kot je ta:

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

Lahko pa uporabite tudi @uvoz pravilo v stil oznaka katere koli komponente, kot je ta:

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

Komponenta gumba v Sveltestrapu

Standardno ogrodje Bootstrap ponuja različna imena razredov, ki jih lahko uporabite za oblikovanje gumbov. Te možnosti razreda vključujejo imena, kot so "primarno", "nevarnost", "informacije", "povezava" in mnoga druga.

V Sveltestrapu vsak Gumb komponenta priročno vsebuje barvni rekvizit, ki je usklajen s privzetimi možnostmi oblikovanja Bootstrapa. To pomaga poenostaviti postopek prilagajanja. Če želite uvoziti komponento, kot je gumb, dodajte naslednje v poljuben .svelte komponentna datoteka, npr src/App.svelte: