Разкрасете вашите проекти на Svelte с популярната библиотека Bootstrap CSS.

Svelte е отличен избор за изграждане на потребителски интерфейси и докато писането на персонализирани стилове може да е достатъчно за малки проекти, библиотеката с компоненти често е по-добра за мащабни проекти.

Такива библиотеки предлагат предимства като последователен потребителски интерфейс, подобрена достъпност и гъвкави опции за персонализиране. Научете как можете да работите с библиотеката с компоненти SvelteStrap, за да рационализирате своето развитие.

Какво представляват Svelte и Bootstrap?

Svelte е рамка на JavaScript, която се отклонява от конвенционалния подход, възприет от рамки като React. Вместо да изпълнява повечето от своите операции по време на изпълнение, Svelte компилира вашето приложение в JavaScript по време на процеса на изграждане.

Този уникален подход елиминира нуждата от виртуален Обектен модел на документ (DOM) и значително намалява шаблонния код.

Bootstrap е CSS рамка, създаден от Twitter (сега с марка X), който е пионер във философията на дизайна „първо за мобилни устройства“. Той предлага изобилие от предварително проектирани компоненти.

instagram viewer

Инсталиране на Sveltestrap във вашия проект

Преди да можете да инсталирате Sveltestrap във вашия проект, трябва да се уверите, че вашият проект Svelte е правилно настроен. Уверете се, че имате Node.js и Мениджър на пакети на възли (NPM) или Yarn, работещ на вашата машина. Можете да създадете нов проект на 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 като алтернативен мениджър на пакети.

Изтрийте активи и на либ папка, след което изчистете съдържанието на 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>

Компонентът на бутона в Sveltestrap

Стандартната рамка на Bootstrap предоставя различни имена на класове, които можете да използвате за стилизиране на бутони. Тези опции за клас включват имена като "основен", "опасност", "информация", "връзка" и много други.

В Свелтестрап всеки Бутон компонентът удобно разполага с цветова опора, която е в съответствие с опциите за стил по подразбиране на Bootstrap. Това помага за опростяване на процеса на персонализиране. За да импортирате компонент като бутон, добавете следното във всеки .изтънчен компонентен файл, като src/App.svelte: