Popüler Bootstrap CSS kitaplığıyla Svelte projelerinizi güzelleştirin.

Svelte, kullanıcı arayüzleri oluşturmak için mükemmel bir seçimdir ve küçük projeler için özel stiller yazmak yeterli olsa da, büyük ölçekli projeler için bir bileşen kütüphanesi genellikle daha iyidir.

Bu tür kitaplıklar tutarlı kullanıcı arayüzü, gelişmiş erişilebilirlik ve esnek özelleştirme seçenekleri gibi avantajlar sunar. Geliştirmenizi kolaylaştırmak için SvelteStrap bileşen kitaplığıyla nasıl çalışabileceğinizi öğrenin.

Svelte ve Bootstrap Nedir?

Svelte, React gibi çerçevelerin benimsediği geleneksel yaklaşımdan ayrılan bir JavaScript çerçevesidir. Svelte, işlemlerinin çoğunu çalışma zamanında yürütmek yerine, uygulamanızı derleme süreci sırasında JavaScript'e derler.

Bu benzersiz yaklaşım sanal ortama olan ihtiyacı ortadan kaldırır. Belge Nesne Modeli (DOM) ve standart kodu önemli ölçüde azaltır.

Bootstrap bir CSS çerçevesidirTwitter tarafından oluşturulan (artık X markalı), "önce mobil" tasarım felsefesine öncülük eden. Önceden tasarlanmış çok sayıda bileşen sunar.

instagram viewer

Projenize Sveltestrap Kurulumu

Sveltestra'yı projenize kurmadan önce Svelte projenizin doğru şekilde kurulduğundan emin olmanız gerekir. Node.js'ye sahip olduğunuzdan emin olun ve Düğüm Paketi Yöneticisi (NPM) veya Makinenizde iplik çalışıyor. Bu komutla yeni bir Svelte projesinin iskelesini oluşturabilirsiniz:

npm create vite
# or
yarn create vite

Svelte projenize bir ad verin ve bir çerçeve ve değişken seçmeniz istendiğinde sırasıyla Svelte ve JavaScript'i seçin. Bunu yaptıktan sonra, CD proje dizinine girin ve şunu çalıştırın:

npm install
# or
yarn

Bu komut tipik bir Svelte projesi için gerekli bağımlılıkları kuracaktır.

Svelte projeniz hazır olduğunda, artık aşağıdakileri çalıştırarak Sveltestrap kütüphanesini kurabilirsiniz:

npm i sveltestrap
# or
yarn add sveltestrap

Sveltestrap kurulumu sırasında "bağımlılık ağacı çözülemiyor" hatasıyla karşılaşırsanız, şu terminal komutlarını çalıştırarak sorunu çözün:

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

Ardından Sveltestrap kurulumuna devam edin veya Yarn'ı alternatif paket yöneticisi olarak kullanmayı düşünün.

Sil varlıklar ve kitap klasörün içeriğini temizleyin, ardından Uygulama.svelte dosya ve Uygulama.css dosya. Daha sonra aşağıdakileri çalıştırarak geliştirme sunucusunu başlatabilirsiniz:

npm run dev
# or
yarn dev

Projenizde Sveltestrap Kullanımı

Sveltestrap'i kullanmaya başlamak için bir CDN bağlantısı kullanarak Bootstrap stil sayfasına bir bağlantı eklemeniz gerekir. Bunu içeride yapabilirsiniz KAFA HTML düzeninizdeki veya ince: kafa Svelte bileşeninizde etiketleyin.

Aç indeks.html dosyaya şunu ekleyin ve KAFA eleman:

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

İsterseniz içe aktarabilir veya ekleyebilirsiniz. bağlantı doğrudan etiketleyin ince: kafa bunun gibi özel unsur:

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

Alternatif olarak, şunları kullanabilirsiniz: @içe aktarmak kural stil bunun gibi herhangi bir bileşenin etiketi:

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

Sveltestrap'teki Düğme Bileşeni

Standart Bootstrap çerçevesi, düğmelere stil vermek için kullanabileceğiniz çeşitli sınıf adları sağlar. Bu sınıf seçenekleri "birincil", "tehlike", "bilgi", "bağlantı" ve daha birçok adı içerir.

Sveltestrap'te her biri Düğme bileşen, Bootstrap'in varsayılan stil seçenekleriyle uyumlu bir renk desteğine sahiptir. Bu, özelleştirme sürecini basitleştirmeye yardımcı olur. Düğme gibi bir bileşeni içe aktarmak için herhangi bir öğeye aşağıdakini ekleyin: .svelte bileşen dosyası gibi src/App.svelte: