Ομορφύνετε τα έργα σας Svelte με τη δημοφιλή βιβλιοθήκη Bootstrap CSS.

Το Svelte είναι μια εξαιρετική επιλογή για τη δημιουργία διεπαφών χρήστη και, ενώ η σύνταξη προσαρμοσμένων στυλ μπορεί να αρκεί για μικρά έργα, μια βιβλιοθήκη στοιχείων είναι συχνά καλύτερη για έργα μεγάλης κλίμακας.

Τέτοιες βιβλιοθήκες προσφέρουν πλεονεκτήματα όπως σταθερό περιβάλλον εργασίας χρήστη, βελτιωμένη προσβασιμότητα και ευέλικτες επιλογές προσαρμογής. Μάθετε πώς μπορείτε να εργαστείτε με τη βιβλιοθήκη στοιχείων SvelteStrap για να βελτιστοποιήσετε την ανάπτυξή σας.

Τι είναι το Svelte και το Bootstrap;

Το Svelte είναι ένα πλαίσιο JavaScript, το οποίο αποκλίνει από τη συμβατική προσέγγιση που ακολουθούν πλαίσια όπως το React. Αντί να εκτελεί τις περισσότερες από τις λειτουργίες του κατά το χρόνο εκτέλεσης, το Svelte μεταγλωττίζει την εφαρμογή σας σε JavaScript κατά τη διαδικασία δημιουργίας.

Αυτή η μοναδική προσέγγιση εξαλείφει την ανάγκη για εικονικό Μοντέλο αντικειμένου εγγράφου (DOM) και μειώνει σημαντικά τον κωδικό λέβητα.

instagram viewer

Το Bootstrap είναι ένα πλαίσιο CSS, που δημιουργήθηκε από το Twitter (τώρα με την επωνυμία X), που πρωτοστάτησε στη σχεδιαστική φιλοσοφία του «mobile-first». Προσφέρει πληθώρα προσχεδιασμένων εξαρτημάτων.

Εγκατάσταση του Sveltestrap στο έργο σας

Για να μπορέσετε να εγκαταστήσετε το Sveltestrap στο έργο σας, πρέπει να βεβαιωθείτε ότι το έργο Svelte έχει ρυθμιστεί σωστά. Βεβαιωθείτε ότι έχετε Node.js και Node Package Manager (NPM) ή Νήματα που τρέχουν στο μηχάνημά σας. Μπορείτε να δημιουργήσετε ένα νέο έργο Svelte με αυτήν την εντολή:

npm create vite
# or
yarn create vite

Ονομάστε το έργο σας Svelte και όταν σας ζητηθεί να επιλέξετε ένα πλαίσιο και μια παραλλαγή, επιλέξτε Svelte και JavaScript αντίστοιχα. Αφού το κάνεις αυτό, CD στον κατάλογο του έργου και εκτελέστε:

npm install
# or
yarn

Αυτή η εντολή θα εγκαταστήσει τις απαραίτητες εξαρτήσεις για ένα τυπικό έργο Svelte.

Με το έργο Svelte έτοιμο, μπορείτε τώρα να εγκαταστήσετε τη βιβλιοθήκη Sveltestrap εκτελώντας:

npm i sveltestrap
# or
yarn add sveltestrap

Εάν αντιμετωπίσετε ένα σφάλμα "δεν είναι δυνατή η επίλυση του δέντρου εξάρτησης" κατά την εγκατάσταση του Sveltestrap, επιλύστε το εκτελώντας αυτές τις εντολές τερματικού:

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

Στη συνέχεια, προχωρήστε στην εγκατάσταση του Sveltestrap ή σκεφτείτε να χρησιμοποιήσετε το Yarn ως εναλλακτικό διαχειριστή πακέτων.

Διαγράψτε το περιουσιακά στοιχεία και το lib φάκελο και, στη συνέχεια, διαγράψτε τα περιεχόμενα του App.svelte αρχείο και το App.css αρχείο. Στη συνέχεια, μπορείτε να ξεκινήσετε τον διακομιστή ανάπτυξης εκτελώντας:

npm run dev
# or
yarn dev

Χρησιμοποιώντας το Sveltestrap στο έργο σας

Για να ξεκινήσετε να χρησιμοποιείτε το Sveltestrap, πρέπει να συμπεριλάβετε έναν σύνδεσμο προς το φύλλο στυλ Bootstrap χρησιμοποιώντας έναν σύνδεσμο CDN. Μπορείτε να το κάνετε αυτό μέσα στο κεφάλι στοιχείο στη διάταξη HTML σας ή από το σβέλτος: κεφάλι ετικέτα στο στοιχείο Svelte.

Ανοιξε το index.html αρχείο και προσθέστε τα ακόλουθα στο κεφάλι στοιχείο:

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

Εάν προτιμάτε, μπορείτε να εισαγάγετε ή να προσθέσετε το Σύνδεσμος ετικέτα απευθείας στο σβέλτος: κεφάλι ειδικό στοιχείο όπως αυτό:

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

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το @εισαγωγή κανόνας στο στυλ ετικέτα οποιουδήποτε στοιχείου όπως αυτό:

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

The Button Component στο Sveltestrap

Το τυπικό πλαίσιο Bootstrap παρέχει μια ποικιλία ονομάτων κλάσεων που μπορείτε να χρησιμοποιήσετε για το στυλ κουμπιών. Αυτές οι επιλογές κλάσης περιλαμβάνουν ονόματα όπως "κύρια", "κίνδυνος", "πληροφορίες", "σύνδεσμος" και πολλά άλλα.

Στο Sveltestrap, το καθένα Κουμπί Το στοιχείο διαθέτει βολικά ένα έγχρωμο στήριγμα που ευθυγραμμίζεται με τις προεπιλεγμένες επιλογές στυλ του Bootstrap. Αυτό βοηθά στην απλοποίηση της διαδικασίας προσαρμογής. Για να εισαγάγετε ένα στοιχείο όπως ένα κουμπί, προσθέστε τα ακόλουθα σε οποιοδήποτε .λυγερή αρχείο συστατικού, όπως src/App.svelte: