Înfrumusețați-vă proiectele Svelte cu populara bibliotecă CSS Bootstrap.

Svelte este o alegere excelentă pentru construirea de interfețe cu utilizatorul și, în timp ce scrierea stilurilor personalizate poate fi suficientă pentru proiecte mici, o bibliotecă de componente este adesea mai bună pentru proiectele la scară largă.

Astfel de biblioteci oferă avantaje precum interfața de utilizare consistentă, accesibilitate îmbunătățită și opțiuni flexibile de personalizare. Aflați cum puteți lucra cu biblioteca de componente SvelteStrap pentru a vă simplifica dezvoltarea.

Ce sunt Svelte și Bootstrap?

Svelte este un cadru JavaScript, care se abate de la abordarea convențională adoptată de cadre precum React. În loc să ruleze majoritatea operațiunilor sale în timpul execuției, Svelte compilează aplicația dvs. în JavaScript în timpul procesului de construire.

Această abordare unică elimină necesitatea unui virtual Document Object Model (DOM) și reduce semnificativ codul standard.

Bootstrap este un cadru CSS

instagram viewer
, creat de Twitter (acum marca X), care a fost pionier în filozofia de design „mobile-first”. Oferă o multitudine de componente pre-proiectate.

Instalarea Sveltestrap în proiectul dvs

Înainte de a putea instala Sveltestrap în proiectul dvs., trebuie să vă asigurați că proiectul dvs. Svelte este configurat corect. Asigurați-vă că aveți Node.js și Node Package Manager (NPM) sau Fire care rulează pe mașina dvs. Puteți crea un nou proiect Svelte cu această comandă:

npm create vite
# or
yarn create vite

Denumiți-vă proiectul Svelte și când vi se solicită să alegeți un cadru și o variantă, selectați Svelte și respectiv JavaScript. După ce a făcut asta, CD în directorul de proiect și rulați:

npm install
# or
yarn

Această comandă va instala dependențele necesare pentru un proiect tipic Svelte.

Cu proiectul Svelte gata, acum puteți instala biblioteca Sveltestrap rulând:

npm i sveltestrap
# or
yarn add sveltestrap

Dacă întâmpinați o eroare „nu se poate rezolva arborele de dependență” în timpul instalării Sveltestrap, rezolvați-o rulând aceste comenzi de terminal:

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

Apoi, continuați cu instalarea Sveltestrap sau luați în considerare utilizarea Yarn ca manager de pachete alternativ.

Ștergeți active si lib folder, apoi ștergeți conținutul App.svelte dosarul și App.css fişier. După aceea, puteți porni serverul de dezvoltare rulând:

npm run dev
# or
yarn dev

Utilizarea Sveltestrap în proiectul dvs

Pentru a începe să utilizați Sveltestrap, trebuie să includeți un link către foaia de stil Bootstrap folosind un link CDN. Puteți face acest lucru în interiorul cap element în aspectul dvs. HTML sau din svelt: cap eticheta în componenta dvs. Svelte.

Deschide index.html fișier și adăugați următoarele la fișierul cap element:

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

Dacă preferați, puteți importa sau adăuga legătură eticheta direct în svelt: cap element special ca acesta:

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

Alternativ, puteți utiliza @import regulă în stil eticheta oricărei componente ca aceasta:

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

Componenta butonului din Sveltestrap

Cadrul standard Bootstrap oferă o varietate de nume de clase pe care le puteți folosi pentru a stila butoanele. Aceste opțiuni de clasă includ nume precum „principal”, „pericol”, „informații”, „link” și multe altele.

În Sveltestrap, fiecare Buton componenta dispune în mod convenabil de un suport de culoare care se aliniază cu opțiunile de stil implicite ale Bootstrap. Acest lucru ajută la simplificarea procesului de personalizare. Pentru a importa o componentă ca un buton, adăugați următoarele în oricare .svelte fișier component, cum ar fi src/App.svelte: