Forskjønn dine Svelte-prosjekter med det populære Bootstrap CSS-biblioteket.

Svelte er et utmerket valg for å bygge brukergrensesnitt, og selv om å skrive tilpassede stiler kan være tilstrekkelig for små prosjekter, er et komponentbibliotek ofte bedre for store prosjekter.

Slike biblioteker tilbyr fordeler som konsekvent brukergrensesnitt, forbedret tilgjengelighet og fleksible tilpasningsmuligheter. Lær hvordan du kan jobbe med SvelteStrap-komponentbiblioteket for å strømlinjeforme utviklingen din.

Hva er Svelte og Bootstrap?

Svelte er et JavaScript-rammeverk som avviker fra den konvensjonelle tilnærmingen tatt av rammeverk som React. I stedet for å kjøre mesteparten av operasjonene på kjøretid, kompilerer Svelte applikasjonen din til JavaScript under byggeprosessen.

Denne unike tilnærmingen eliminerer behovet for en virtuell Document Object Model (DOM) og reduserer koden betydelig.

Bootstrap er et CSS-rammeverk, skapt av Twitter (nå merket X), som var banebrytende for "mobil-først"-designfilosofien. Den tilbyr et vell av forhåndsdesignede komponenter.

instagram viewer

Installere Sveltestrap i prosjektet ditt

Før du kan installere Sveltestrap i prosjektet ditt, må du sørge for at Svelte-prosjektet er riktig konfigurert. Sørg for at du har Node.js og Node Package Manager (NPM) eller Garn som kjører på maskinen din. Du kan stillas et nytt Svelte-prosjekt med denne kommandoen:

npm create vite
# or
yarn create vite

Gi Svelte-prosjektet ditt et navn, og når du blir bedt om å velge et rammeverk og en variant, velger du henholdsvis Svelte og JavaScript. Etter å ha gjort det, cd inn i prosjektkatalogen og kjør:

npm install
# or
yarn

Denne kommandoen vil installere de nødvendige avhengighetene for et typisk Svelte-prosjekt.

Med Svelte-prosjektet ditt klart, kan du nå installere Sveltestrap-biblioteket ved å kjøre:

npm i sveltestrap
# or
yarn add sveltestrap

Hvis du støter på en "ikke i stand til å løse avhengighetstreet"-feil under Sveltestrap-installasjonen, løser du det ved å kjøre disse terminalkommandoene:

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

Fortsett deretter med Sveltestrap-installasjonen eller vurder å bruke Yarn som en alternativ pakkebehandling.

Slett eiendeler og lib mappen, fjern deretter innholdet i App.svelte filen og App.css fil. Etterpå kan du starte utviklingsserveren ved å kjøre:

npm run dev
# or
yarn dev

Bruke Sveltestrap i prosjektet ditt

For å begynne å bruke Sveltestrap, må du inkludere en lenke til Bootstrap-stilarket ved å bruke en CDN-lenke. Du kan gjøre dette inne i hode element i HTML-oppsettet ditt eller fra svelte: hode tag i Svelte-komponenten din.

Åpne index.html fil, og legg til følgende i hode element:

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

Hvis du foretrekker det, kan du importere eller legge til link tag direkte i svelte: hode spesielt 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 bruke @import regel i stil tag for en hvilken som helst komponent som dette:

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

Knappekomponenten i Sveltestrap

Standard Bootstrap-rammeverket gir en rekke klassenavn du kan bruke til å style knapper. Disse klassealternativene inkluderer navn som "primær", "fare", "info", "link" og mange andre.

I Sveltestrap, hver Knapp komponenten har praktisk en fargerekvisitt som er på linje med Bootstraps standard stylingalternativer. Dette bidrar til å forenkle tilpasningsprosessen. For å importere en komponent som en knapp, legg til følgende i en hvilken som helst .svelte komponentfil, som src/App.svelte: