Kaunista Svelte-projektejasi suositulla Bootstrap CSS -kirjastolla.

Svelte on erinomainen valinta käyttöliittymien rakentamiseen ja vaikka mukautettujen tyylien kirjoittaminen saattaa riittää pieniin projekteihin, komponenttikirjasto on usein parempi suuriin projekteihin.

Tällaiset kirjastot tarjoavat etuja, kuten johdonmukaisen käyttöliittymän, paremman käytettävyyden ja joustavia mukautusvaihtoehtoja. Opi, kuinka voit työskennellä SvelteStrap-komponenttikirjaston kanssa tehostaaksesi kehitystäsi.

Mitä ovat Svelte ja Bootstrap?

Svelte on JavaScript-kehys, joka poikkeaa Reactin kaltaisten kehysten perinteisestä lähestymistavasta. Sen sijaan, että Svelte suorittaisi suurimman osan toiminnoistaan ​​ajon aikana, se kääntää sovelluksesi JavaScriptiksi rakennusprosessin aikana.

Tämä ainutlaatuinen lähestymistapa poistaa virtuaalisen tarpeen Document Object Model (DOM) ja vähentää merkittävästi yleiskoodia.

Bootstrap on CSS-kehys, jonka on luonut Twitter (nykyisin tuotemerkki X), joka oli "mobiili-ensin"-suunnittelufilosofian edelläkävijä. Se tarjoaa runsaasti valmiiksi suunniteltuja komponentteja.

instagram viewer

Sveltestrapin asentaminen projektiisi

Ennen kuin voit asentaa Sveltestrapin projektiisi, sinun on varmistettava, että Svelte-projektisi on määritetty oikein. Varmista, että sinulla on Node.js ja Node Package Manager (NPM) tai lanka käynnissä koneellasi. Voit rakentaa uuden Svelte-projektin tällä komennolla:

npm create vite
# or
yarn create vite

Nimeä Svelte-projektisi ja kun sinua kehotetaan valitsemaan kehys ja muunnelma, valitse Svelte ja JavaScript. Sen jälkeen CD projektihakemistoon ja suorita:

npm install
# or
yarn

Tämä komento asentaa tarvittavat riippuvuudet tyypilliseen Svelte-projektiin.

Kun Svelte-projektisi on valmis, voit nyt asentaa Sveltestrap-kirjaston suorittamalla:

npm i sveltestrap
# or
yarn add sveltestrap

Jos kohtaat Sveltestrapin asennuksen aikana "ei pysty ratkaisemaan riippuvuuspuuta" -virheen, ratkaise se suorittamalla nämä päätekomennot:

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

Jatka sitten Sveltestrapin asennusta tai harkitse Yarnin käyttöä vaihtoehtoisena paketinhallinnana.

Poista omaisuutta ja lib kansio ja tyhjennä sitten sen sisältö App.svelte tiedosto ja App.css tiedosto. Tämän jälkeen voit käynnistää kehityspalvelimen suorittamalla:

npm run dev
# or
yarn dev

Sveltestrapin käyttäminen projektissasi

Voit aloittaa Sveltestrapin käytön lisäämällä linkin Bootstrap-tyylisivuun CDN-linkin avulla. Voit tehdä tämän sisällä pää elementti HTML-asettelussasi tai hoikka: pää -tunnistetta Svelte-komponentissasi.

Avaa index.html tiedosto ja lisää seuraavat tiedostot pää elementti:

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

Halutessasi voit tuoda tai lisätä linkki tunniste suoraan hoikka: pää erikoiselementti kuten tämä:

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

Vaihtoehtoisesti voit käyttää @tuonti sääntö sisällä tyyli minkä tahansa komponentin tunniste, kuten tämä:

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

Sveltestrapin painikekomponentti

Tavallinen Bootstrap-kehys tarjoaa useita luokkanimiä, joita voit käyttää painikkeiden tyylittämiseen. Nämä luokkavaihtoehdot sisältävät nimiä, kuten "ensisijainen", "vaara", "tiedot", "linkki" ja monet muut.

Sveltestrapissa jokainen Painike komponentissa on kätevästi väripalkki, joka on linjassa Bootstrapin oletusmuotoiluvaihtoehtojen kanssa. Tämä auttaa yksinkertaistamaan räätälöintiprosessia. Jos haluat tuoda komponentin, kuten painikkeen, lisää seuraava mihin tahansa .hoikka komponenttitiedosto, esim src/App.svelte: