Forskønne dine Svelte-projekter med det populære Bootstrap CSS-bibliotek.

Svelte er et glimrende valg til at bygge brugergrænseflader, og selvom det kan være tilstrækkeligt at skrive brugerdefinerede stilarter til små projekter, er et komponentbibliotek ofte bedre til store projekter.

Sådanne biblioteker tilbyder fordele som ensartet brugergrænseflade, forbedret tilgængelighed og fleksible tilpasningsmuligheder. Lær, hvordan du kan arbejde med SvelteStrap-komponentbiblioteket for at strømline din udvikling.

Hvad er Svelte og Bootstrap?

Svelte er en JavaScript-ramme, der afviger fra den konventionelle tilgang, som rammer som React. I stedet for at køre det meste af dets operationer under kørsel, kompilerer Svelte din applikation til JavaScript under byggeprocessen.

Denne unikke tilgang eliminerer behovet for en virtuel Document Object Model (DOM) og reducerer kedelkoden markant.

Bootstrap er en CSS-ramme, skabt af Twitter (nu mærket X), der var banebrydende for "mobil-first"-designfilosofien. Det tilbyder et væld af foruddesignede komponenter.

instagram viewer

Installation af Sveltestrap i dit projekt

Før du kan installere Sveltestrap i dit projekt, skal du sikre dig, at dit Svelte-projekt er korrekt opsat. Sørg for, at du har Node.js og Node Package Manager (NPM) eller Garn kører på din maskine. Du kan stilladsere et nyt Svelte-projekt med denne kommando:

npm create vite
# or
yarn create vite

Navngiv dit Svelte-projekt, og når du bliver bedt om at vælge en ramme og en variant, skal du vælge henholdsvis Svelte og JavaScript. Efter at have gjort det, cd ind i projektmappen og kør:

npm install
# or
yarn

Denne kommando vil installere de nødvendige afhængigheder til et typisk Svelte-projekt.

Med dit Svelte-projekt klar, kan du nu installere Sveltestrap-biblioteket ved at køre:

npm i sveltestrap
# or
yarn add sveltestrap

Hvis du støder på en "ikke i stand til at løse afhængighedstræ"-fejl under Sveltestrap-installationen, skal du løse den ved at køre disse terminalkommandoer:

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

Fortsæt derefter med Sveltestrap-installationen eller overvej at bruge Yarn som en alternativ pakkehåndtering.

Slet aktiver og lib mappe, og ryd derefter indholdet af App.svelte fil og App.css fil. Bagefter kan du starte udviklingsserveren ved at køre:

npm run dev
# or
yarn dev

Brug af Sveltestrap i dit projekt

For at begynde at bruge Sveltestrap skal du inkludere et link til Bootstrap-stilarket ved hjælp af et CDN-link. Du kan gøre dette inde i hoved element i dit HTML-layout eller fra svelte: hoved tag i din Svelte-komponent.

Åbn index.html fil, og tilføj følgende til hoved element:

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

Hvis du foretrækker det, kan du importere eller tilføje link tag direkte i svelte: hoved særligt element som dette:

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

Alternativt kan du bruge @importere reglen i stil tag af enhver komponent som denne:

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

Knapkomponenten i Sveltestrap

Standard Bootstrap-rammen giver en række klassenavne, du kan bruge til at style knapper. Disse klassemuligheder omfatter navne som "primær", "fare", "info", "link" og mange andre.

I Sveltestrap, hver Knap komponenten har bekvemt en farveprop, der stemmer overens med Bootstraps standardstilingsmuligheder. Dette er med til at forenkle tilpasningsprocessen. For at importere en komponent som en knap skal du tilføje følgende i en hvilken som helst .svelte komponentfil, f.eks src/App.svelte: