Украсьте свои проекты Svelte с помощью популярной CSS-библиотеки Bootstrap.

Svelte — отличный выбор для создания пользовательских интерфейсов, и хотя для небольших проектов может быть достаточно написания собственных стилей, для крупномасштабных проектов часто лучше использовать библиотеку компонентов.

Такие библиотеки предлагают такие преимущества, как согласованный пользовательский интерфейс, улучшенная доступность и гибкие возможности настройки. Узнайте, как можно работать с библиотекой компонентов SvelteStrap для оптимизации разработки.

Что такое Svelte и Bootstrap?

Svelte — это фреймворк JavaScript, который отличается от традиционного подхода, используемого в таких фреймворках, как React. Вместо выполнения большинства операций во время выполнения Svelte компилирует ваше приложение в JavaScript во время процесса сборки.

Этот уникальный подход устраняет необходимость в виртуальном Объектная модель документа (DOM) и значительно сокращает шаблонный код.

Bootstrap — это CSS-фреймворк., созданный Twitter (теперь под брендом X), который стал пионером философии дизайна «сначала мобильные устройства». Он предлагает множество заранее разработанных компонентов.

instagram viewer

Установка Sveltestrap в ваш проект

Прежде чем вы сможете установить Sveltestrap в свой проект, вам необходимо убедиться, что ваш проект Svelte настроен правильно. Убедитесь, что у вас есть Node.js и Менеджер пакетов узлов (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 в качестве альтернативного менеджера пакетов.

Удалить ресурсы и библиотека папку, затем очистите содержимое 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 предоставляет множество имен классов, которые можно использовать для стилизации кнопок. Эти параметры класса включают такие имена, как «основной», «опасность», «информация», «ссылка» и многие другие.

В Sveltestrap каждый Кнопка Компонент удобно имеет цветовую опору, которая соответствует параметрам стиля Bootstrap по умолчанию. Это помогает упростить процесс настройки. Чтобы импортировать компонент, например кнопку, добавьте следующее в любой .стройный файл компонента, например src/App.svelte: