Kaunistage oma Svelte projekte populaarse Bootstrap CSS-i teegiga.

Svelte on suurepärane valik kasutajaliideste loomiseks ja kuigi kohandatud stiilide kirjutamisest võib piisata väikeste projektide jaoks, on suuremahuliste projektide jaoks sageli parem komponentide teek.

Sellised teegid pakuvad selliseid eeliseid nagu ühtne kasutajaliides, parem juurdepääsetavus ja paindlikud kohandamisvalikud. Siit saate teada, kuidas saate töötada SvelteStrapi komponentide teegiga, et oma arendust sujuvamaks muuta.

Mis on Svelte ja Bootstrap?

Svelte on JavaScripti raamistik, mis erineb tavapärasest lähenemisviisist, mida kasutavad sellised raamistikud nagu React. Selle asemel, et enamikku oma toiminguid käivitada, kompileerib Svelte teie rakenduse koostamise ajal JavaScripti.

See ainulaadne lähenemine välistab vajaduse virtuaalsuse järele Dokumendiobjekti mudel (DOM) ja vähendab oluliselt katlakoodi.

Bootstrap on CSS-i raamistik, mille lõi Twitter (praegu kaubamärgiga X), mis oli teerajajaks disainifilosoofiale "kõigepealt mobiil". See pakub hulgaliselt eelprojekteeritud komponente.

instagram viewer

Sveltestrapi installimine teie projekti

Enne kui saate Sveltestrapi oma projekti installida, peate veenduma, et teie Svelte projekt on õigesti seadistatud. Veenduge, et teil oleks Node.js ja Sõlme paketihaldur (NPM) või teie masinas jooksev lõng. Selle käsuga saate luua uue Svelte projekti:

npm create vite
# or
yarn create vite

Nimetage oma Svelte projekt ja kui teil palutakse valida raamistik ja variant, valige vastavalt Svelte ja JavaScript. Pärast seda, cd projekti kataloogi ja käivitage:

npm install
# or
yarn

See käsk installib tüüpilise Svelte projekti jaoks vajalikud sõltuvused.

Kui teie Svelte projekt on valmis, saate nüüd installida Sveltestrapi teegi, käivitades:

npm i sveltestrap
# or
yarn add sveltestrap

Kui teil tekib Sveltestrapi installimise ajal tõrge "sõltuvuspuud ei õnnestu lahendada", lahendage see, käivitades järgmised terminalikäsud:

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

Seejärel jätkake Sveltestrapi installimisega või kaaluge Yarni kasutamist alternatiivse paketihaldurina.

Kustuta varasid ja lib kausta, seejärel tühjendage kausta sisu App.svelte fail ja App.css faili. Seejärel saate arendusserveri käivitada, käivitades:

npm run dev
# or
yarn dev

Sveltestrapi kasutamine oma projektis

Sveltestrapi kasutamise alustamiseks peate lisama lingi Bootstrapi stiililehele, kasutades CDN-i linki. Seda saate teha sisemuses pea HTML-i küljenduses või sale: pea sildi oma Svelte komponendis.

Ava index.html faili ja lisage sellele järgmine pea element:

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

Soovi korral saate importida või lisada link sildi otse sale: pea spetsiaalne element nagu see:

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

Teise võimalusena võite kasutada @import valitsema stiilis mis tahes komponendi silt nagu see:

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

Sveltestrapi nupukomponent

Standardne Bootstrapi raamistik pakub erinevaid klassinimesid, mida saate nuppude stiilimiseks kasutada. Nende klassivalikute hulka kuuluvad sellised nimed nagu "esmane", "oht", "teave", "link" ja paljud teised.

Sveltestrapis igaüks Nupp komponendil on mugavalt Bootstrapi vaikestiilisuvanditega joonduv värvitugi. See aitab kohandamisprotsessi lihtsustada. Komponenti, näiteks nupu importimiseks lisage mis tahes jaotisesse järgmine teave .sihvakas komponentfail, nagu src/App.svelte: