logo

Použití Bootstrap s Svelte

Co je to Bootstrap?

Bootstrap je open-source CSS framework, který pomáhá při vytváření mobilního front-endového vývoje webu. Dodává se se spoustou šablon a tříd CSS, což nám pomáhá zkrátit čas a úsilí při vývoji aplikací.

Vytvořte projekt Svelte

npx degit sveltejs/template svelte-bootstrap
cd my-svelte-project

npm install
npm run dev

Vytvořte nový projekt pomocí svelte pomocí výše uvedených příkazů

Můžete si také vyhledat oficiální dokumentaci pro začátek se Svelte - https://svelte.dev/blog/the-easiest-way-to-get-started

Možnost 1 – Přidání Bootstrapu přes CDN

Bootstrap má jednoduchý odkaz CDN, který obsahuje všechny přibalené soubory CSS a js potřebné pro váš projekt. Toto je pravděpodobně nejjednodušší možnost, jak zahrnout Bootstrap do vašeho projektu. Stačí přidat níže uvedené odkazy ke svému public/index.html

Přejděte na webovou stránku bootstrap a zkopírujte existující odkazy CDN. V době psaní tohoto tutoriálu je nejnovější verze Bootstrapu 5

https://getbootstrap.com/docs/5.0/getting-started/download/ 

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Možnost 2 – Přidání prostřednictvím modulů uzlů

Bootstrap můžete přidat jako balíček npm a přidat jej do aplikace po aktualizaci konfiguračních souborů souhrnu.

Instalace bootstrap balíčku

npm install bootstrap

Po spuštění tohoto příkazu bude Bootstrap přidán do vašeho node_modules složku. Musíme to zkopírovat do public složka pro štíhlé. Můžeme to automatizovat pomocí pluginu pro kopírování rollup

Instalace kumulativního kopírovacího pluginu

npm install rollup-plugin-copy -D

Aktualizujte konfigurační soubor souhrnu

//...........
import copy from 'rollup-plugin-copy'

//...........
export default {
    //...........
    plugins: [

        // we'll extract any component CSS out into
        // a separate file - better for performance
        css({ output: 'bundle.css' }),
        // Add bootstrap files to public folder
        copy({
            targets: [{ 
                src: 'node_modules/bootstrap/dist/**/*', 
                dest: 'public/vendor/bootstrap' 
            }]
        }),

        //...........
};
//...........

Po přidání tohoto kopírovacího pluginu můžete ověřit veřejnou složku a ujistit se, že vendor složka je vytvořena a bootstrap složka je k dispozici.

Většina konfigurace je hotová. Musíme pouze přidat odkaz na tyto soubory v našem index.html složku 

<link rel='stylesheet' href='vendor/bootstrap/css/bootstrap.min.css'>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

A je to. Začněte ve své aplikaci používat bootstrap třídy

Připojte se k našemu discord kanálu pro další diskusi nebo dotazy

Discord – https://discord.gg/AUjrcK6eep